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

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

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

Answer 2

键盘输入输出。

一般情况下，鼠标、触摸和键盘等 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 }

addEventListener('keydown') JavaScript 错误？

addEventListener('keydown') JavaScript bug?

javascript

keyboard

canvas

keydown

addeventlistener

键盘输入输出。