JavaScript游戏中同时处理WASD和箭头

让我们假设两个玩家用一个键盘玩一个简单的乒乓球游戏

移动处理程序似乎很简单：

document.addEventListener('keydown', function (event) {
        if (event.keyCode === 87) { //w
            movePaddle(leftPaddle, 0);

        } else if (event.keyCode === 83) { //s
            movePaddle(leftPaddle, 1);

        } else if (event.keyCode === 38) { //arrow_up
            movePaddle(rightPaddle, 0);

        } else if (event.keyCode === 40) { //arrow_down
            movePaddle(rightPaddle, 1);

        }
});

moveblade

函数中的第二个参数仅表示方向（向上或向下）

问题：如果同时按下

W

和

向上箭头

，则只有一个拨杆移动。这取决于最后按的键

如何正确处理keydown事件

我需要两个按按键一起移动的桨。如果

W

和

向上箭头

，则两者都向上。如果

W

和

向下箭头

，则左侧向上，右侧向下。当然，如果只按一个键，则只能移动一个挡板。

这样使用：（在任何类型的循环中，此循环仅使用动画帧）

这样使用：（在任何类型的循环中，此循环仅使用动画帧）

---

试着用下列方式分开钥匙

document.addEventListener('keydown', function (event) {
        if (event.keyCode === 87) { //w
            movePaddle(leftPaddle, 0);

        } else if (event.keyCode === 83) { //s
            movePaddle(leftPaddle, 1);

        }
        // Separate them here
        if (event.keyCode === 38) { //arrow_up
            movePaddle(rightPaddle, 0);

        } else if (event.keyCode === 40) { //arrow_down
            movePaddle(rightPaddle, 1);

        }
});

这会起作用，因为你说的是，如果对于每一个，这意味着在同一时间只有一个是真的

---

我想说的是，当使用else-if时，else-if与if配对，就像just-else一样，同一时间只有一个块可以为真

document.addEventListener('keydown', function (event) {
        if (event.keyCode === 87) { //w
            movePaddle(leftPaddle, 0);

        } else if (event.keyCode === 83) { //s
            movePaddle(leftPaddle, 1);

        }
        // Separate them here
        if (event.keyCode === 38) { //arrow_up
            movePaddle(rightPaddle, 0);

        } else if (event.keyCode === 40) { //arrow_down
            movePaddle(rightPaddle, 1);

        }
});

这会起作用，因为你说的是，如果对于每一个，这意味着在同一时间只有一个是真的

---

我想说的是，当使用else-if时，else-if与if配对，就像just-else一样，在同一时间，只有一个块可以为真

你不能在比赛中移动球拍，你需要在“游戏循环”中不断移动球拍。在按下键时，为每个拨杆设置一个状态，

isMoving=true

。在游戏循环中，

if（isMoving）

然后移动挡板。onkeyup，设置

isMoving=false

。这是唯一能做到这一点的方法，因为键盘一次不能在多个键上重复触发“typematic”事件。在事件中你不能移动挡板，你需要在“游戏循环”中不断移动它。在按下键时，为每个拨杆设置一个状态，

isMoving=true

。在游戏循环中，

if（isMoving）

然后移动挡板。onkeyup，设置

isMoving=false

。这是唯一的方法，因为键盘一次不能在多个键上重复触发“typematic”事件。好主意，但由于

Input.keys[keyName]

，它会出现性能问题。在这种情况下，浏览器每次都必须遍历Input.keys数组。当然，在一个非常简单的循环中，这不是一个问题，但是我的游戏使用了大量的液体动力学计算，所以很明显，这个解决方案比dandavis建议的直接标志要慢。啊，我明白了。此外，按下的不同键越多，在阵列中行走所需的时间就越长。如果你需要扩展性的话！好主意，但是它有性能问题，因为

Input.keys[keyName]

。在这种情况下，浏览器每次都必须遍历Input.keys数组。当然，在一个非常简单的循环中，这不是一个问题，但是我的游戏使用了大量的液体动力学计算，所以很明显，这个解决方案比dandavis建议的直接标志要慢。啊，我明白了。此外，按下的不同键越多，在阵列中行走所需的时间就越长。如果你需要扩展性的话！