javascript - 带有关键处理程序的JavaScript中的问题

我是JavaScript的新手，并编写了以下简单代码。我打算在画布上有一个红色圆圈，可以使用箭头键左右移动。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
var d = 30;
var v = 2;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
  if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
  if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, d, 0, Math.PI*2);
  ctx.fillStyle = "#FF0000";
  ctx.fill();
  ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  if(rightPressed) {
    x += v
  }
  if(leftPressed) {
    x -= v
  }
}

setInterval(draw, 10);

结果完全是我想要的方式，除了一件事：运行代码时，直到按下右箭头时，它才会响应按下左箭头。我尝试过这段代码

  if(rightPressed) {
    x += v
  }
  if(leftPressed) {
    x -= v
  }

并翻转两个“ if”语句。

  if(leftPressed) {
    x -= v
  }
  if(rightPressed) {
    x += v
  }

在这种情况下，倒数是正确的。在按下左箭头键之前，对象不会向右移动。

我希望两个按钮都能够响应，而不要互相依赖。为什么会发生这种情况，我该如何解决？

最佳答案

您需要定义向左和向右按下的变量。现在，当您遇到第一个未定义的变量时，您的代码在draw函数上出错。

当您先处理rightPressed时，未定义rightPressed时，将引发错误，并且代码执行将停止。这意味着当rightPressed未定义时，它将永远不必检查leftPressed。按下向右箭头后，rightPressed现在将具有一个值，并且两个检查都将开始工作。

解决方案是在其他变量之前添加变量定义。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
var d = 30;
var v = 2;
var rightPressed = false;
var leftPressed = false;