javascript - 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 对象，canvas.player 是播放器对象。它有效，但不是很好......假设我按下(并按住)向右箭头键(39)，然后按下向下箭头键(40)，自从我们上次以来，玩家不再向右移动按向下箭头键。工作正常。直到我只释放向下箭头键，同时仍然按下向右箭头键。所以我从来没有松开右箭头键。然后播放器停止，浏览器似乎不明白我正在按右箭头键。

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

<小时/>

有人能解决这个问题吗？有办法检测键码吗？

<小时/>

Answer 1

键盘IO。

通常，诸如鼠标、触摸和键盘之类的 IO 事件只能用于获取它们正在监听的设备的当前状态。对输入使用react的工作是在游戏中完成的。

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

// 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 }