javascript - keyup 后继续触发 keydown 事件

Question

我正在尝试在 3D 游戏中实现移动，为此我必须处理多键检测。

所以我让它工作

    setControls(){
        this.keyMap = {};
        window.addEventListener('keydown', this.onMove.bind(this));
        window.addEventListener('keyup', this.onMove.bind(this));
    }

    onMove(event){
        this.keyMap[event.key] = event.type === "keydown";

        //Move according to key pressed
    }

keydown 事件工作正常，当按下 2 个键时，我的对象同时向两个方向移动。但是当 keyup 事件被触发时， keyMap 被设置为正确的值，但 onMove 仅被调用一次，即使仍然按下一个键，我的 keyMap 也不再更新。

我尝试了一些让我陷入无限循环的事情。

谢谢。

Answer 1

当创建带有输入的游戏时，不要将移动的逻辑放在按键本身中。相反，有一个“主游戏循环”，它将根据键盘映射中是否设置输入值来移动对象。

将移动逻辑放置在输入中会导致输入延迟，因此初始输入和后续输入之间会出现暂停，从而使移动看起来和行为都很奇怪。通过将其添加到游戏逻辑而不是输入事件中，您将不会看到延迟。

这是一个示例，它不使用 Canvas 或任何东西，但它演示了这一点(使用 WASD 移动):

const player = document.querySelector('.player')
const playerSpeed = 2
let x = 0, y = 0

const keyMap = {
  a: false, d: false,
  w: false, s: false
}

window.addEventListener('keydown', setKey)
window.addEventListener('keyup', setKey)

function setKey(event) {
  keyMap[event.key] = event.type === 'keydown'
}

// Main Game loop
setInterval(() => {
  // Calculate the internal x position
  if (keyMap.a) { x -= playerSpeed }
  if (keyMap.d) { x += playerSpeed }

  // Calculate the internal y position
  if (keyMap.w) { y -= playerSpeed }
  if (keyMap.s) { y += playerSpeed }
  
  // Set the new position of the player
  // based on the internal x/y position
  player.style.left = x + 'px'
  player.style.top = y + 'px'
}, 10)

.player {
  background: red;
  position: absolute;
  height: 50px;
  width: 50px;
}

<div class="player"></div>