如何使矩形移动而不跳过X值，当空格按下

Question

我试图有它，所以我的矩形在一条直线上移动而不跳过X值。当空格键按下....时，它正在移动但是当我按住它的时候它只是跳过X值(它跳到没有显示)这就是我想要的……当空格键被按住时，我想让我的红色矩形不跳跃和跳过帧。

document.addEventListener("keydown", keyPush)
var Xspeed = 5
var Xpos = 100
setInterval(draw, 1000)
function keyPush(evt) {
switch (evt.keyCode) {
case 32:
Xpos = Xpos + 5
break;
}
}
function draw() {
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "red"
ctx.fillRect(Xpos, 0, 50, 50)
}

<canvas id="myCanvas"></canvas>

Answer 1

你有很多问题:

• 你的setInterval设置得太高，为1000，也就是1秒的时间内，玩家可能按了几次空格键，导致你描述的效果(跳过X值)

• 你没有清除画布所以当它绘制之前的正方形时不会被删除所以看起来矩形在增长而不是移动

• 在draw中我们不应该得到画布和上下文，它们可以是全局变量

• 变量Xspeed已声明但未使用，这将是完美的用于关键事件

下面是一个工作示例:

document.addEventListener("keydown", keyDown)
document.addEventListener("keyup", keyUp)
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "red"
var Xspeed = 0
var Xpos = 10
setInterval(draw, 50)
function keyUp(evt) {
if (evt.keyCode == 32) Xspeed = 0
}
function keyDown(evt) {
if (evt.keyCode == 32) Xspeed = 2
}
function draw() {
ctx.clearRect(0, 0, 999, 999)
Xpos = Xpos + Xspeed
ctx.fillRect(Xpos, 0, 20, 20)
}

<canvas id="myCanvas"></canvas>

在keyDown上我设置了速度，在keyUp上我删除了它。