Question

我是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
  }

然后翻转两个＆＃34;如果＆＃34;语句。

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

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

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

Answer 1

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

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

使用键处理程序在JavaScript中出现问题

1 个答案: