3

我对编程很陌生，我正在尝试创建一些代码，让我可以通过按箭头键在 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;
    }
}

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

4

1 回答 1

13

添加了一些东西，首先是requestAnimationFrame 这里解释的原因。

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

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

现场演示

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

全屏链接

(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;
    }
  }
}
于 2013-01-06T04:31:31.050 回答