Snake movement javascript

Question

I'm trying to make snake game in js and i have this movement code, where sq is moving 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;
    }
}

But any time i change move direction, last direction stays and movement is not correct. The question is how can i make correct movement and also how to stop a div?

why do you make a function for each case? just put the code in there without a function... And try to debug by viewing all values at some time with `console.log(parseInt(sq.style.top));` for example — JRsz, Jun 30 '16 at 11:27
Change this call to a function ie. `step`; `onkeyup` should set a global variable that controls the snake behaviour, which is then evaluated in `step` in an interval - (`window.setInterval(step, 1000)`, for example). Currently what's happening is that you're pressing the key and that causes the snake to go given way (only once). — eithed, Jun 30 '16 at 11:28
You have to [stop](http://stackoverflow.com/a/1831163/6527256) the running interval first. — JK12321, Jun 30 '16 at 11:31

score 0 · Accepted Answer · answered Jun 30 '16 at 11:30

Assign the interval to a variable and clear it before setting a new interval:

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;
  }
}

Otherwise you will just keep on creating new intervals with each keypress.

Snake movement javascript

1 Answers1