snake game - snake movement using array.pop and array.unshift

Question

In my code the snake and it's movement consists of an array. In other words the snake's head is the first array number and last number is snake's tail. I try to implement the movement using array.pop and array.unshift. The problem is that the snake gets bigger and bigger as it moves. I think it is some very small detail that I'm missing. Here is the code:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cWidth = canvas.width; var cHeight = canvas.height; var boxWidth = 10; var boxHeight = 10; var boxWH = 10; //One box width and height var points = 0; var score = document.getElementById("Score"); var foodImg = new Image(); var k; foodImg.src = "Pictures/apple2.png"; var snake = []; snake[0] = { x: cWidth/2, y: cHeight/2 }; var food = { x: Math.floor(Math.random()*60)*boxWH, y: Math.floor(Math.random()*60)*boxWH } document.addEventListener("keydown", direction); function direction(event){ var key = event.keyCode; if(key == 65 && k != "right"){ k = "left"; } else if(key == 68 && k != "left"){ k = "right"; } else if(key == 87 && k != "down"){ k = "up"; } else if(key == 83 && k != "up"){ k = "down"; } } function SnakeGame(){ ctx.fillStyle = "green"; ctx.fillRect(0, 0, cWidth, cHeight); var game = setInterval(Draw, 100); } function Draw(){ for(var i = 0; i<snake.length; i++){ ctx.fillStyle = (i == 0) ? "red" : "white"; ctx.fillRect(snake[i].x, snake[i].y, boxWH, boxWH); ctx.strokeStyle = "yellow"; ctx.strokeRect(snake[i].x, snake[i].y, boxWH, boxWH); } ctx.drawImage(foodImg, food.x, food.y); var snakeX = snake[0].x; var snakeY = snake[0].y; snake.pop(); if(k == "right") snakeX += boxWH; if(k == "left") snakeX -= boxWH; if(k == "up") snakeY -= boxWH; if(k == "down") snakeY += boxWH; var nHead = { x: snakeX, y: snakeY } snake.unshift(nHead); } 

Answer 1

The problem has to do with the fact that you draw the snake onto the canvas without resetting it every time. The new snake tiles are drawn, but the old ones are also still there.

You can fix it by moving these lines to the beginning of the Draw function, so they are executed every time you are about to redraw the snake:

ctx.fillStyle = "green";
ctx.fillRect(0, 0, cWidth, cHeight);

Answer 2

the problem is that the sanke gets bigger and bigger as it moves

The snake has the correct size, what happens is that it is leaving a "trail". To avoid that, you need to clear the canvas each Draw call.

Just move the command to fill the canvas from the SnakeGame function to the beginning of Draw , like this:

function SnakeGame(){
var game = setInterval(Draw, 100);
}
function Draw(){
ctx.fillStyle = "green";
ctx.fillRect(0, 0, cWidth, cHeight);
for(var i = 0; i<snake.length; i++){
ctx.fillStyle = (i == 0) ? "red" : "white";
ctx.fillRect(snake[i].x, snake[i].y, boxWH, boxWH);
    //(...)