蛇運動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 。