蛇运动javascript答案

【问题标题】：Snake movement javascript蛇运动javascript
【发布时间】：2016-06-30 11:24:40
【问题描述】：

我正在尝试在 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？

【问题讨论】：

为什么要为每个案例制作一个函数？只需将代码放在那里而不使用函数...并尝试通过在某个时间使用console.log(parseInt(sq.style.top));查看所有值来进行调试
@JRsz 对于setInterval 我相信。
将此调用更改为函数，即。 step; onkeyup 应该设置一个控制蛇行为的全局变量，然后在step 中在一个区间内进行评估 - （例如window.setInterval(step, 1000)）。目前正在发生的事情是您正在按下键，这会导致蛇让路（仅一次）。
你必须先stop运行间隔。

标签： javascript move

【解决方案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。

【讨论】：