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。

通常，鼠标，触摸和键盘等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之类的间隔检查每个键的每个布尔值。如果它们是真的那么我就执行该键的操作。

addEventListener（'keydown'）JavaScript bug？

2 个答案:

键盘IO。