javascript - Canvas :按下键时行为异常

默认情况下，我的画布的矩形应从左向右移动。按下键时，它应该开始向下移动。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0,
    y = 0;

function draw(x_move, y_move) {
  requestAnimationFrame(function() {
    draw(x_move, y_move);
  });
  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();
  x = x + x_move;
  y = y + y_move;
}

draw(1, 0);

document.addEventListener('keydown', function(event) {
  //console.log(event.keyCode);
  if (event.keyCode == 40) {
    draw(0, 1);
  }
});

canvas { background-color: red; }

<canvas id="canvas" width="600" height="400"></canvas>

使用上面的代码，您可能至少会注意到两个问题：


按下键时，矩形会向下移动，但也会一直向右移动。
当您多次按下向下键时，速度会提高。


我该如何解决这些问题？

最佳答案

我相信这就是您想要做的（并且您已经接近了！）。我希望这是您想要的行为。

一个相关的观点：用这些函数将x_move和y_move封装在一个闭包中是一个好主意，这样可以避免在程序的其他部分意外地更改它们。这样，您实现的用于更改正方形方向的函数将可以私有访问这些变量。

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  x = 0,
  y = 0;

var x_move = 1;
var y_move = 0;

function draw() {
  requestAnimationFrame(function() {
    draw();
  });

  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath();
  x = x + x_move;
  y = y + y_move;
}

draw();

document.addEventListener('keydown', function(event) {
  //console.log(event.keyCode);
  if (event.keyCode == 40) {
    x_move = 0;
    y_move = 1;
  }
});

canvas {
  background-color: red;
}

<canvas id="canvas" width="600" height="400"></canvas>