Question

当组件或正方形接触画布的底部时，我按向上箭头，然后它与底部碰撞，当我按下向上箭头时，组件的每次跳转都会越来越少，直到组件最终没有跳起来。但是，发生此问题时，组件同时会同时完美地左右移动。我正在使用箭头键控制正方形，这是我正在创建的该平台游戏的玩家，我不知道如何更改它。

var myGamePiece;
var platformWidth = 500;
var platformX = 0;
var platformY = 250;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");

    document.body.insertBefore(this.canvas, document.body.childNodes[0]);

    this.interval = setInterval(updateGameArea, 20);

    window.addEventListener("keydown", function(e) {
      myGameArea.key = e.keyCode;
    });

    window.addEventListener("keyup", function(e) {
      myGameArea.key = false;
    });
  },

  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;

  this.update = function() {
    ctx = myGameArea.context;

    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;

    this.hitBottom();
  };

  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;

    if (this.y > rockbottom) {
      this.y = rockbottom;

      if (myGameArea.canvas.height - this.height && myGamePiece.key == 38) {
        this.y = this.speedY;
      }
    }
  };
}

function updateGameArea() {
  myGameArea.clear();

  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;

  if (myGameArea.key && myGameArea.key == 37) {
    myGamePiece.speedX = -5;
  }
  if (myGameArea.key && myGameArea.key == 39) {
    myGamePiece.speedX = 5;
  }
  if (myGameArea.key && myGameArea.key == 38) {
    myGamePiece.speedY = -5;
  } else {
    myGamePiece.speedY = 5;
  }

  if (myGameArea.key && myGameArea.key == 40) {
    myGamePiece.speedY = 5;
  }

  myGamePiece.newPos();
  myGamePiece.update();
}

startGame();

Answer 1

您忘了重设重力速度吗？

Graphics

PaintEventArgs

Graphics

这是使用类的另一种方法，您可以通过使用实际的向量类来清理向量数学，例如Victor.js。

this.hitBottom = function() {
  // ...
  if (this.y > rockbottom) {
    // ...
    this.gravitySpeed = 0; // reset?
  }
};

var myGamePiece;
var platformWidth = 360;
var platformX = 0;
var platformY = 120;

function startGame() {
  myGameArea.start();
  myGamePiece = new Component(12, 12, "red", 10, 10);
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = platformWidth;
    this.canvas.height = platformY;
    this.context = this.canvas.getContext("2d");

    document.body.insertBefore(this.canvas, document.body.childNodes[0]);

    this.interval = setInterval(updateGameArea, 20);

    window.addEventListener("keydown", function(e) {
      myGameArea.key = e.keyCode;
    });

    window.addEventListener("keyup", function(e) {
      myGameArea.key = false;
    });
  },

  fill: function(color) {
    this.context.save();
    this.context.fillStyle = color;
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.restore();
  },

  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function Component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;

  this.update = function() {
    ctx = myGameArea.context;

    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;

    this.hitBottom();
  };

  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;

    if (this.y > rockbottom) {
      this.y = rockbottom;

      if (myGameArea.canvas.height - this.height && myGamePiece.key == 38) {
        this.y = this.speedY;
      }
      
      this.gravitySpeed = 0; // reset?
    }
  };
}

function updateGameArea() {
  myGameArea.fill('#DE7');

  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;

  if (myGameArea.key) {
    switch (myGameArea.key) {
      case 37: // left arrow
        myGamePiece.speedX = -5;
        break;
      case 38: // up arrow
        myGamePiece.speedY = -5;
        break;
      case 39: // right arrow
        myGamePiece.speedX = +5;
        break;
      case 40: // down arrow
      default:
        myGamePiece.speedY = +5;
    }
  }

  myGamePiece.newPos();
  myGamePiece.update();
}

startGame();

触地后跳球员

1 个答案: