蛇运动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。