Javascript 为什么我的游戏角色在使用按键事件时不断加速？

我想做一个简单的游戏。绿色方块是我的游戏角色。我使用了一个键控事件，使我的角色能够左右移动。当我按住向右或向左箭头键时，角色将继续加速。如果先单击向右或向左箭头键，您将看到角色所在位置与所在位置之间的间隔会随着单击次数的增加而增加。如何使角色以恒定的速度和恒定的间隔移动

//变量
var canvas=document.getElementById（“canvas”）；
var draw=canvas.getContext（“2d”）；
变量x=20；
var charactery=window.innerHeight-60；
var dx=0.01；
var-dy=0.01；
//帆布尺寸
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//主要游戏功能
函数运行（）{
//循环函数
requestAnimationFrame（运行）；
//清除屏幕
draw.clearRect（0，0，canvas.width，canvas.height）
//开门见山
draw.beginPath（）；
draw.fillStyle=“#823819”；
draw.fillRect（0，canvas.height-20，canvas.width，20）；
draw.fill（）；
draw.closePath（）；
//画主角
draw.beginPath（）；
draw.fillStyle=“#128522”；
draw.fillRect（characterx，charactery，40,40）；
draw.fill（）；
draw.closePath（）；
//关键事件
window.addEventListener（“按键向下”，函数（事件）{
如果（event.keyCode==39）{
字符x+=dx；
}
});
window.addEventListener（“按键向下”，函数（事件）{
如果（event.keyCode==37）{
字符x-=dx；
}		
});
};
run（）

试验
身体{
保证金：0；
溢出：隐藏；
}
帆布{
保证金：0；
溢出：隐藏；
}
您的事件侦听器应该添加到游戏循环之外

当前，您正在为每帧上的每个按键添加一个额外的侦听器，这意味着在第一帧上，您将为按键移动
dx*1
，但在第100帧上，您将为单个按键移动
dx*100

这也是为什么您的
dx
值必须如此低的原因-我在下面的示例中增加了它，但您可以根据需要调整它


//变量
var canvas=document.getElementById（“canvas”）；
var draw=canvas.getContext（“2d”）；
变量x=20；
var charactery=window.innerHeight-60；
var dx=3.0；
var-dy=3.0；
//帆布尺寸
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//关键事件
window.addEventListener（“按键向下”，函数（事件）{
如果（event.keyCode==39）{
字符x+=dx；
}
});
window.addEventListener（“按键向下”，函数（事件）{
如果（event.keyCode==37）{
字符x-=dx；
}		
});
//主要游戏功能
函数运行（）{
//循环函数
requestAnimationFrame（运行）；
//清除屏幕
draw.clearRect（0，0，canvas.width，canvas.height）
//开门见山
draw.beginPath（）；
draw.fillStyle=“#823819”；
draw.fillRect（0，canvas.height-20，canvas.width，20）；
draw.fill（）；
draw.closePath（）；
//画主角
draw.beginPath（）；
draw.fillStyle=“#128522”；
draw.fillRect（characterx，charactery，40,40）；
draw.fill（）；
draw.closePath（）；
};
run（）

试验
身体{
保证金：0；
溢出：隐藏；
}
帆布{
保证金：0；
溢出：隐藏；
}