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的解决方法，而没有显示任何演示。我不知道如何使它起作用，但我不能让播放器的动作取决于操作系统和浏览器...

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

[EDIT]我仅通过将“ window.addEventListener（...）”替换为“ document.addEventListener（...）”来解决了此问题。

Answer 1

我仅通过用“ document.addEventListener（...）”替换“ window.addEventListener（...）”来解决了该问题。

Answer 2

您是否尝试了三元不等于“ ===”？就是说1是相同类型并且等于true。要么将PRESSED常量更改为true而不是1，将RELEASED常量更改为false而不是0。

htKeyUp事件无法为某些键触发

2 个答案: