JavaScript中画布上的平滑keydown动画

Question

我对编程很陌生，我正在尝试创建一些代码，让我可以通过按箭头键在 Canvas 周围移动一个正方形。我可以让方块移动，但它的运动不是很顺畅。我让它一次移动 10 个像素的增量，所以我理解为什么它感觉有点生涩，因为在 10 帧差异的每个位置之间没有任何动画，但是让它以较小的增量移动让它很远太慢了。到目前为止我所做的如下：

window.onload = function init() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    setInterval(gameLoop,50);
    window.addEventListener('keydown',whatKey,true);
}

avatarX = 400
avatarY = 300

function gameLoop() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 800
    canvas.height = 600
    ctx.fillRect(avatarX,avatarY,50,50);
}

function whatKey(e) {
    switch(e.keyCode) {
    case 37:
        avatarX = avatarX - 10;
        break;
    case 39:
        avatarX = avatarX + 10;
        break;
    case 40:
        avatarY = avatarY + 10;
        break;
    case 38:
        avatarY = avatarY - 10;
        break;
    }
}

每次我按右箭头键时，我都希望方块以恒定的速率向那个方向平滑移动。提前感谢您的任何帮助！

Answer 1

添加了一些东西，第一个是requestAnimationFramefor reasons explained here。

然后我添加了keyup 和keydown 事件处理程序，它们将使用数组跟踪当前正在推送的键。如果数组中的键为真，则当前被推送，如果为假，则不是。此方法还允许您同时按住多个键。

然后我添加了根据按下的内容增加或减少的速度变量，以及一个maxSpeed 变量，这样你的速度就不会超过某个速度。 maxSpeed 变量可以被删除，递增和递减的velX 和velY 也可以被删除，你只需要取消注释我留下的行。它似乎在 10 点时太快了，这就是我添加逐渐加速的原因。

Live Demo

上面看起来会很生涩，因为画布有点苦，所以框架用上下箭头滚动，使用全屏链接来全面测试移动。

Full Screen link

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


window.onload = function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  gameLoop();
}

window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});


var avatarX = 400,
  avatarY = 300,
  velX = 0,
  velY = 0,
  keys = [],
  maxSpeed = 10;

function gameLoop() {
  whatKey();
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 600;

  avatarX += velX;
  avatarY += velY;

  ctx.fillRect(avatarX, avatarY, 50, 50);
  requestAnimationFrame(gameLoop);
}

function whatKey() {
  if (keys[37]) {
    //velX = -10;
    if (velX > -maxSpeed) {
      velX -= 0.5;
    }
  }

  if (keys[39]) {
    //velX = 10;
    if (velX < maxSpeed) {
      velX += 0.5;
    }
  }
  if (keys[40]) {
    //velY = 10;
    if (velY < maxSpeed) {
      velY += 0.5;
    }
  }
  if (keys[38]) {
    //velY = -10;
    if (velY > -maxSpeed) {
      velY -= 0.5;
    }
  }
}