蛇形运动javascript

Question

我正在尝试用 js 制作贪吃蛇游戏，我有这个移动代码，其中 sq 正在移动 DIV:

window.onkeyup = function move(e)
{       
    switch(e.keyCode)
    {
        case 37: 
        function moveLeft()
        {
            sq.style.left = parseInt(sq.style.left) - 20 + 'px';    
            checkGameOver();
        }
        setInterval(moveLeft, 500);
        break;
        case 38: 
        function moveUp()
        {
            sq.style.top = parseInt(sq.style.top) - 20 + 'px';  
            checkGameOver();
        }
        setInterval(moveUp, 500);
        break;
        case 39: 
        function moveRight()
        {
            sq.style.left = parseInt(sq.style.left) + 20 + 'px';
            checkGameOver();
            clearTimeout(timeLeft);
        }
        setInterval(moveRight, 500);
        break;
        case 40: 
        function moveDown()
        {
            sq.style.top = parseInt(sq.style.top) + 20 + 'px';  
            checkGameOver();
        }
        setInterval(moveDown, 500);
        break;
    }
}

但是每当我改变移动方向时，最后的方向仍然存在并且移动不正确。问题是我怎样才能做出正确的动作以及如何停止 div?

Answer 1

将 interval 分配给 variable 并在设置新间隔之前清除它：

var movementInterval;
window.onkeyup = function move(e)
{       
  if(movementInterval) {
    clearInterval(movementInterval);
  }
  switch(e.keyCode)
  {
    case 37: 
      function moveLeft()
      {
        sq.style.left = parseInt(sq.style.left) - 20 + 'px';    
        checkGameOver();
      }
      movementInterval = setInterval(moveLeft, 500);
      break;
    case 38: 
      function moveUp()
      {
        sq.style.top = parseInt(sq.style.top) - 20 + 'px';  
        checkGameOver();
      }
      movementInterval = setInterval(moveUp, 500);
      break;
    case 39: 
      function moveRight()
      {
        sq.style.left = parseInt(sq.style.left) + 20 + 'px';
        checkGameOver();
        clearTimeout(timeLeft);
      }
      movementInterval = setInterval(moveRight, 500);
      break;
    case 40: 
      function moveDown()
      {
        sq.style.top = parseInt(sq.style.top) + 20 + 'px';  
        checkGameOver();
      }
      movementInterval = setInterval(moveDown, 500);
      break;
  }
}

否则，每次按键都会继续创建新的 intervals。

蛇形运动javascript

Snake movement javascript

javascript

move