addEventListener('keydown') JavaScript 错误？

Question

我正在尝试用 HTML5 创建一个游戏，但我已经到了需要启用键盘输入的地步。

这是我的代码：

window.addEventListener('keydown', function(e) {
    let key = e.keyCode;
    console.log(key);
    if (key == 37) {
        canvas.player.x -= 5;
    }
    if (key == 38) {
        canvas.player.y -= 5;
    }
    if (key == 39) {
        canvas.player.x += 5;
    }
    if (key == 40) {
        canvas.player.y += 5;
    }
}, false);

其中canvas 是画布对象，canvas.player 是播放器对象。它有效，但不是很好......假设我按下（并按住）右箭头键（39），而不是按下向下箭头键（40），自从我们上次以来，玩家不再向右移动按向下箭头键。工作正常。直到我在按下右箭头键的同时释放下箭头键。所以我从来没有松开右箭头键。然后播放器停止并且浏览器似乎不理解我正在按右箭头键。

您可以在 this fiddle 的控制台日志中轻松看到这一点。

---

有人有解决这个问题的方法吗？无论如何检测键码的方法？

---

Answer 1

键盘输入输出。

一般来说，鼠标、触摸和键盘等 IO 事件只能用于获取它们正在侦听的设备的当前状态。对输入做出反应的工作在您的游戏中完成。

处理键盘输入的一种方法如下

// this defines what keys you are listening to and 
// holds the current state of the key true for down false for up
const keys = {
    ArrowUp : false,  // list the keyboard keys you want to listen to
    ArrowDown : false,
    ArrowLeft : false,
    ArrowRight : false,
};
// the event listener listens for key events
function keyEvents(e){
    if(keys[e.code] !== undefined){ // check if its a key we are listening for
        keys[e.code] = event.type === "keydown" ; // set the state up or down
        e.preventDefault();  // stop default action
    } 
}
addEventListener("keyup",keyEvents);  // set up the listeners
addEventListener("keydown",keyEvents);

然后在游戏的主循环中或从那里调用检查键状态并执行状态所需的操作..

  if (keys.ArrowDown) { player.y += 5 }
  if (keys.ArrowUp) { player.y -= 5 }
  if (keys.ArrowLeft) { player.x -= 5 }
  if (keys.ArrowRight) { player.x += 5 }

Answer 2

这可能是一个错误，我认为它使用了键盘事件，但在 mac 上它似乎在按住时重复字符，但在 mac 上正常打字时按住一个键不会这样做。

在使用keydown 和keyup 的组合为每个键设置布尔值之前，我已经做了一个解决方法。然后使用类似setInterval 的间隔来检查每个键的每个布尔值。如果它们是真的，那么我执行那个键的动作。