蛇游戏移动问题[javascript]

Question

I'm kind of new in javascript and I'm trying to make a snake game, I would like to make the snake move automatically with snake.push and snake.shift(tail) , I tried a few things and always failed, like a foor loop and add dy++ to the hY (but only the head was moving).

With this code, all I get is head to move and the tail shifted, but it just move once. How would it be a smart way to make it keep moving the desired direction by by adding and removing the item from the multidimensional array ?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var snakeSize=10;
var snakeLength = 5;
var dist =2+snakeSize;
var dy=1;    
var direction = "up";

function game(){
 ctx.clearRect(0,0,canvas.width,canvas.height); 
drawSnake()

}


function snakeBody(x,y){
  ctx.beginPath();
  ctx.fillRect(x*(dist),y*(dist),snakeSize,snakeSize);
  ctx.fillStyle="red";
  ctx.fill();
  ctx.closePath();}

function drawSnake(){
 var snake = []; 
  for (var i=0;i<=snakeLength;i++){
  snake.push({x:i, y:canvas.height/dist/2});
  } 

  var hX = snake[snake.length-1].x
  var hY = snake[snake.length-1].y

  switch(direction){
  case "down":
  hY++;
      break;
  case "up":{
    hY--;}
    break;
  case "right":
    hX++
    break;
  case "left":
    hX--;
    break;
}

var tail = snake.shift();
  tail.x=hX;
  tail.y=hY;

  snake.push(tail);


   for (var i=0;i<=snake.length;i++){
 snakeBody(snake[i].x,snake[i].y); 
  }

} 


setInterval(game,1000)

Answer 1

It turns out that your snake initialization code is included at the beginning of the drawSnake() function.

But it should be processed only once, when a new game is launched. Another problem is that snake[] must exist in the global scope of the game so that it is persistent between 2 calls to game() .

You can easily have your existing code working by moving this block:

var snake = [];
for (var i=0;i<=snakeLength;i++){
  snake.push({x:i, y:canvas.height/dist/2});
} 

just before:

setInterval(game,1000)

There are also 3 other minor fixes in this JSFiddle :

• replaced i<=snake.length with i<snake.length (off by one iteration)
• replaced i<=snakeLength with i<snakeLength (off by one iteration)
• moved ctx.fillStyle="red" before ctx.fillRect() (otherwise, the 1st rectangle is drawn in black)

Hope that helps.