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

Question

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

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
  }

在这种情况下，反之亦然。在按下向左箭头键之前，对象不会向右移动。

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

Answer 1

您需要定义左右按下的变量。现在，当您的代码遇到第一个 undefined variable 时，您的代码在绘图函数上会出错。

当您首先处理 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;