htKeyUp 事件未针对某些键触发

Question

我正在开发一个 HTML5 Javascript 2D 游戏。我需要处理用户输入以在画布上移动角色。我写了一段代码来处理“按键”状态。

const PRESSED = 1;
const RELEASED = 0;

const UP = 90;
const DOWN = 83;
const LEFT = 81;
const RIGHT = 68;

['keyup', 'keydown'].forEach(eventName => {
    window.addEventListener(eventName, function(e){
    e.preventDefault();
    const keyState = e.type === 'keydown' ? PRESSED : RELEASED;
    const keyCode = e.keyCode;

  if(keyCode === UP){
    player.go.dirY = keyState === PRESSED ? "UP" : "STOP"
  } else if(keyCode === DOWN){
    player.go.dirY = keyState === PRESSED ? "DOWN" : "STOP"
  } else if(keyCode === LEFT){
    player.go.dirX = keyState === PRESSED ? "LEFT" : "STOP"
  } else if(keyCode === RIGHT){
    player.go.dirX = keyState === PRESSED ? "RIGHT" : "STOP"
  }
});
});

问题是某些键在我释放它们时不会触发 keyUp 事件，因此它会产生键阻塞效果并且玩家会继续移动。它适用于 KeyW 和 KeyD，但不适用于 KeyA 和 KeyS。我也尝试改用箭头键，当我释放 ArrowUp 和 ArrowRight 时会触发 keyUp 而不会触发 ArrowLeft 和 ArrowDown。

我在某处读到这是一个旧错误，它与操作系统和浏览器有关。我使用 Ubuntu 16.10 和 Chrome 版本 68.0.3440.84（64 位）。但我找不到任何解决方法。有些人在没有展示任何演示的情况下谈论了使用 setTimout 或 setInterval 的解决方法。我不知道如何让它工作，但我不能让玩家的动作依赖于操作系统和浏览器......

我希望有人能帮助我找到解决方案。 谢谢！

[编辑] 我只是通过将“window.addEventListener(...)”替换为“document.addEventListener(...)”来解决此问题。

Answer 1

我只是通过将“window.addEventListener(...)”替换为“document.addEventListener(...)”来解决此问题。

Answer 2

您是否尝试过不使用三等号“===”？也就是说 1 是同一类型并且等于 true。要么将 PRESSED 常量更改为 true 而不是 1 并将 RELEASED 常量更改为 false 而不是 0。