javascript - 如何防止 Javascript 中的多次按键

Question

我是 JS 的初学者，我正在从事一个创建游戏的项目，在我的例子中是贪吃蛇游戏。一切都很好，除了如果我同时快速按下多个键，Snake 就会死掉，因为(我认为)这是一次碰撞。这就是为什么我想以某种方式禁用多个按键，以尝试是否可以解决问题。我的代码:

var Snake = function()
{
  //this is the direction table; UP, RIGHT, DOWN, LEFT
  this.directions = [[0, -1], [1, 0], [0, 1], [-1, 0]];
}

function onKeyDown(event)
{
  if (gameover)
    tryNewGame();
  else 
  {
    if (event.keyCode == 37 || event.keyCode == 65)
    {
      if (snake.direction != 1)  
        snake.direction = 3;
    } 
    else if (event.keyCode == 38 || event.keyCode == 87) 
    {
      if (snake.direction != 2) 
        snake.direction = 0;
    } 
    else if (event.keyCode == 39 || event.keyCode == 68) 
    {
      if (snake.direction != 3) 
        snake.direction = 1;
    } 
    else if (event.keyCode == 40 || event.keyCode == 83) 
    {
      if (snake.direction != 0)
        snake.direction = 2;
    }   
  }
}

Answer 1

问题可能是在更新蛇的形状之前方向改变了两次，所以这两次方向改变中的第一个实际上被忽略了。

克服这个问题的一种方法是在队列中缓冲方向变化(作为数组实现)。

因此在您的关键事件处理程序中您不会这样做:

if (snake.direction != 1)  
    snake.direction = 3;

而是:

if ((snake.queue.length ? snake.queue[0] : snake.direction) != 1) 
    snake.queue.unshift(3);

这个队列应该在 Snake 构造函数中初始化:

this.queue = [];

然后当你更新蛇的位置时(以一个时间间隔)，你将消费那个队列，如果里面有东西的话:

if (snake.queue.length)
    snake.direction = snake.queue.pop();
// Now apply this direction:
//   ... this would be code you already have...

您可以为此队列大小设置一个最大值，因为如果用户持续按键速度快于蛇更新速度，它会变得很尴尬。