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

【问题标题】：Handling WASD and Arrows simultaneously in JavaScript game在 JavaScript 游戏中同时处理 WASD 和箭头
【发布时间】：2017-06-10 05:56:11
【问题描述】：

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

移动处理程序看起来很简单：

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);

        }
});

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

问题：如果W 和Up Arrow 被压在一起，那么只有一个桨移动。这取决于最后按下的是哪个键。

如何正确处理按键事件？

我需要两个桨根据按下的键一起移动。如果W 和Up Arrow，那么两者都上涨。如果W 和Down Arrow，那么左上去右下。当然，如果只按下一个键，则只有一个桨应该移动。

【问题讨论】：

您不能在活动中移动桨，您需要在“游戏循环”中不断移动它。 onkeydown，您为每个桨设置一个状态isMoving=true。在游戏循环中，if(isMoving) 然后移动桨。 onkeyup，设置isMoving=false。这是执行此操作的唯一方法，因为键盘一次无法在多个键上触发重复的“打字”事件。

标签： javascript

【解决方案1】：

https://gist.github.com/RepComm/52690eadaa9f4a3e7a7819b3267feca4

像这样使用它：（在任何类型的循环中，这个只是使用动画框架）

Input.init();
var test = function () {
    window.requestAnimationFrame(test);
    if (Input.isKeyDown("w")) {
        console.log("Forward March!");
    }
}
window.requestAnimationFrame(test);

【讨论】：

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

【解决方案2】：

尝试通过说来分隔键

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 时，else if 与 if 配对，就像 else 一样，只有一个块可以同时为真

【讨论】：