Javascript - 如何避免键盘键的重复使用

Question

我正在做一个贪吃蛇游戏项目(针对 JavaScript 类(class))。我尽量避免一个“bug”，当同时使用两个键时，游戏认为有碰撞，而视觉上没有。

键盘按键管理代码

document.onkeydown = function handleKeyDown(e){
    const key = e.keyCode;
    let newDirection;
    switch(key){
        case 37:
            newDirection = "left";
            break;
        case 38:
            newDirection = "up";
            break;
        case 39:
            newDirection = "right";
            break;
        case 40:
            newDirection = "down";
            break;
        case 32:
            restart();
            return;
        default:
            return;
    }
    snakee.setDirection(newDirection);
}

如何避免这种情况？有人告诉我 preventDefault() 事件，我应该使用它吗？

编辑1

这里是 checkCollision 方法，它是我的蛇构造函数的一部分:

this.checkCollision = function(){
            let wallCollision = false;
            let snakeCollision = false;
            const head = this.body[0];
            const rest = this.body.slice(1);
            const snakeX = head[0];
            const snakeY = head[1];
            const minX = 0;
            const minY = 0;
            const maxX = widthInBlocks-1;
            const maxY = heightInBlocks-1;
            const isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;
            const isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;
            if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls){
                wallCollision = true;
            }
            for(let i = 0;i < rest.length;i++){
                if(snakeX == rest[i][0] && snakeY == rest[i][1]){
                    snakeCollision = true;
                }
            }
            return wallCollision || snakeCollision;
        };

编辑 2:

所以，在您回答之后，这里是使用的解决方案。

我之前用过switch，我决定改用if/else。

const map = {};
  onkeydown = onkeyup = function(e){
    e = e || event;
    map[e.keyCode] = e.type == 'keydown';
    let newDirection;
    if(map[37]){
      newDirection = "left";
    } else if(map[38]){
      newDirection = "up";
    } else if(map[39]){
      newDirection = "right";
    } else if(map[40]){
      newDirection = "down";
    } else if(map[32]){
      restart();
    }
    snakee.setDirection(newDirection);
  }

但是，如果 map 对象的所有属性都为false，问题仍然存在，当我同时按下两个键时会发生什么。

Object {
  32: false,
  37: false,
  38: false,
  39: false,
  40: false
}

我不知道如何防止这种情况。

Answer 1

碰撞是什么意思？ onkeydown 事件将只返回键盘上最后按下的键，即使按下多个键也是如此。

如果您按 down 然后按 left，onkeydown 事件将返回 left 键的键码。

您不需要使用 event.preventDefault()，因为这将停止寻找 keydown 键，而不是返回任何内容。

您的代码应该与我看到的一样正常工作。

如果你想检测多次击键，那么你应该为此保留一个 map 对象。

const keysPressed = {};
onkeydown = function(e) => {
  const e = e || event;
  keyPressed[e.keyCode] = e.keyCode >= 37 && e.keyCode <= 40;

  // move your snake now with the keys pressed
}