Javascript 键盘输入暂停

我做了一个非常基本的演示，你按下一个箭头键，方块就会朝那个方向移动。一个问题是：当我第一次按键时，方块会移动一点，暂停，然后继续移动。我如何摆脱或绕过停顿

代码：

var canvas=document.getElementById（“canvas”）
var ctx=canvas.getContext（'2d'）；
var p1=document.getElementById（“p1”）；
var键=[]；
变量x=25
变量y=25
文件.添加的文件列表器（“键控”，功能（e）{
键[e.keyCode]=真；
更新（）；
});
文件.附录列表（“键控”，功能（e）{
密钥[e.keyCode]=假；
更新（）；
});
函数更新（）{
ctx.clearRect（0,040400）
如果（键[40]==真）{
y+=5
}
如果（键[38]==真）{
y-=5
}
如果（键[39]==真）{
x+=5
}
如果（键[37]==真）{
x-=5
}
ctx.fillRect（x，y，100100）
控制台日志（键）；
p1.innerText=“”；
对于（i=0；i

测试

之所以发生这种情况，是因为

键控

事件被激活

与其依赖浏览器不时发送

keydown

，不如让自己的更新循环以

60fps

的速度运行，使用并根据按下的键移动框

var canvas=document.getElementById（“canvas”）
var ctx=canvas.getContext（'2d'）；
var p1=document.getElementById（“p1”）；
var键=[]；
变量x=25
变量y=25
文件.addEventListener（“键控”，函数（e）{
e、 preventDefault（）；//确保这不会滚动窗口
键[e.keyCode]=真；
});
文件.附录列表（“键控”，功能（e）{
密钥[e.keyCode]=假；
});
函数更新（）{
//告诉浏览器在“空闲”时再次运行更新，
//最好是60帧/秒（实际上是显示器的刷新率）
requestAnimationFrame（更新）；
ctx.clearRect（0,040400）
如果（键[40]==真）{
y+=5
}
如果（键[38]==真）{
y-=5
}
如果（键[39]==真）{
x+=5
}
如果（键[37]==真）{
x-=5
}
ctx.fillRect（x，y，100100）
p1.innerText=“”；
对于（i=0；i

测试

请参见以下答案：我还认为

Event.preventDefault（）

应该在浏览器环境中使用-当使用箭头时。还应考虑对角线运动补偿。@RokoC.Buljan感谢您的建议，我将其添加到我的答案中。我尝试了此代码，但由于某些原因，它无法在Codepen中运行。我需要添加任何东西才能运行吗？@ARCS2016如果您按上面的“运行代码片段”，您应该会看到它正在工作。是的，nvm它现在正在工作。我不知道为什么以前没有。谢谢