Javascript 不能同时移动两个画布矩形

我今天又问了一个问题，我还有一个问题

但首先是代码：

庞
var x=100；
变量y=100；
var xmoveFirst=720；
var ymoveFirst=0；
var xmoveSecond=30；
var ymoveSecond=0；
函数画布（）{
var can=document.getElementById（'theCanvas'）；
can.style.backgroundColor=“黑色”；
var ctx=can.getContext（'2d'）；
//第一名选手
ctx.fillStyle=“白色”；
ctx.fillRect（xmoveFirst，ymoveFirst，5,75）；
//替补队员
ctx.fillStyle='白色'；
ctx.fillRect（xmoveSecond，ymoveSecond，5,75）；
//第一步
功能移动（事件）{
ctx.clearRect（0,0750750）；//clear rect
如果（event.keyCode==40）{
ymoveFirst+=25；
console.log（“第一，”+ymovfirst）；
}
else if（event.keyCode==38）{
ymoveFirst-=25；
console.log（“第一，”+ymovfirst）；
}
else if（event.keyCode==83）{
i秒+=25；
}
else if（event.keyCode==87）{
ymoveSecond-=25；
}
ctx.fillStyle=“白色”；
ctx.fillRect（xmoveFirst，ymoveFirst，5,75）；
ctx.fillRect（xmoveSecond，ymoveSecond，5,75）；
}
变量移动=document.addEventListener（“向下键”，移动）；
}

问题是，浏览器一次只能处理一个按下的键。要绕过此问题，您需要执行以下操作：

• 阵列
• 两个事件侦听器，一个用于keydown，另一个用于keyup事件

阵列将保存当前按下的键。在keydown事件监听器中，您需要将与按下的键的id相同的索引处的元素设置为true，而在keyup事件监听器中，您需要将相同的元素设置为false。例如：

var keys = [];

document.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});

这将确保元素在释放键之前保持为真。通过检查具有相同索引的元素，可以检查当前是否按下了某个键：

if (keys[87]) {
    // The "W" key is pressed
}
if (keys[83]) {
    // The "S" key is pressed
}
/// ...

---

注意：检查按键时，如果s，则不应使用

else。
问题是，浏览器一次只能处理一个按键。要绕过此问题，您需要执行以下操作：


阵列
两个事件侦听器，一个用于keydown，另一个用于keyup事件

阵列将保存当前按下的键。在keydown事件监听器中，您需要将与按下的键的id相同的索引处的元素设置为true，而在keyup事件监听器中，您需要将相同的元素设置为false。例如：

var keys = [];

document.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});

这将确保元素在释放键之前保持为真。通过检查具有相同索引的元素，可以检查当前是否按下了某个键：

if (keys[87]) {
    // The "W" key is pressed
}
if (keys[83]) {
    // The "S" key is pressed
}
/// ...

注意：检查按下的键时，如果

s，则不应使用

。
应学习面向对象的javascript。应学习面向对象的javascript。@NimrodNaim如果需要多次运行canvas函数，请使用
setInterval
或
requestAnimationFrame
主函数？编辑：它不起作用，你能帮我吗？@NimrodNaim 1.：move永远不会被调用，你需要调用它2.：你需要调用move多次。示例：@NimrodNaim您需要多次运行canvas函数，使用
setInterval
或
requestAnimationFrame
主函数？编辑：它不起作用，你能帮我吗？@NimrodNaim 1.：move永远不会被调用，你需要调用它2.：你需要调用move多次。例子：