如何同时使用两个 OnKeyDown 事件?

Question

我正在尝试构建一个乒乓球游戏，我希望棋盘能够同时移动(一个带有"s"和"w"，另一个带有向上和向下箭头(。

function movePlayer1(event) {
if (player1.y > 7.5 && player1.y < 390) {
switch (event.keyCode) {
case 83: player1.y += player1.v;
break;
case 87: player1.y -= player1.v;
break;
}
}
else if (player1.y <= 7.5) {
switch (event.keyCode) {
case 83: player1.y += player1.v;
break;
}
}
else if (player1.y >= 390) {
switch (event.keyCode) {
case 87: player1.y -= player1.v;
break;
}
}
}
document.addEventListener("keydown", movePlayer1, false);
function movePlayer2() {
if (player2.y > 7.5 && player2.y < 390) {
switch (event.keyCode) {
case 40: player2.y += player2.v;
break;
case 38: player2.y -= player2.v;
break;
}
}
else if (player2.y <= 7.5) {
switch (event.keyCode) {
case 40: player2.y += player2.v;
break;
}
}
else if (player2.y >= 390) {
switch (event.keyCode) {
case 38: player2.y -= player2.v;
break;
}
}
}
document.addEventListener("keydown", movePlayer2, false);

我尝试将它们放在一个函数中，但没有帮助。

Answer 1

有两件事会使你的代码行为不符合你的预期。

自动重复仅适用于上次按下的键。假设如果您按下"A"并按住它，自动重复将生成"A"的键控事件。但是，如果您按"B"并同时按住两个自动重复将仅为"B"自动生成顺序键。另一方面，我相信对于MacOS，它根本不会自动重复，所以最好不要依赖它。

但实际上，即使按下并按住多个键，"键up"也会正确触发。

因此，您可以重构代码：而不是仅依靠键上/键下，您需要一些计时器，并且每个播放器模型都将是

{
directionIsUp: true | false,
isMoving: true | false
}

以此类推keydown您正在设置适当的方向并使isMovingtrue。在keyup上，你正在使isMoving是假的。

计时器将根据这些模型重新渲染您的战场 - 移动玩家或将其保留在同一位置。