Why isn't pop method working in my snake game-CodePudding

So here's is a very brief description on how my snake game works. For loop is used to draw the snake.Newhead is an object, and after first iteration newhead is now the new element occupying the index 0 since we used .unshift() method to add newhead to the front of our snake array. To avoid having our new element obtain the same position during each iteration of the setInterval loop we add or increment the x coordinate by 20 (which affects the rect in the for loop later since snake[0] will now change ie the x will be 60 instead of 40 and snake[1] has taken the element of the old snake[0]) using snakex. But what I don't get is why isn't snake.pop removing the last element or object in our array ie removing one rect from the snake

var canvas = document.querySelector("canvas");
var right = document.querySelector("right");
var left = document.querySelector("left");
var up = document.querySelector("left");
var down = document.querySelector("left");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 200;
var ctx = canvas.getContext("2d");

width = 20;
height = 20;

var snake = [{
  x: 40,
  y: 0
}, {
  x: 20,
  y: 0
}];

function move() {
  for (var i = 0; i < snake.length; i  ) {
    console.log(i);
    //lets just say i stands for index number
    ctx.strokeStyle = "orange";
    ctx.strokeRect(snake[i].x, snake[i].y, width, height);

  }

  snakex = snake[0].x;
  snakey = snake[0].y;

  snakex  = 20;

  var newhead = {
    x: snakex,
    y: snakey
  };

  snake.pop();

  snake.unshift(newhead);
  ctx.clearRect(0, 0, width, height);
}

setInterval(move, 800);

<canvas></canvas>
<button id="right">right</button>
<button id="down">down</button>
<button id="left">left</button>
<button id="up">up</button>

CodePudding user response：

It is popping correctly, the issue is the clearRect call, you pass it width and height but those are set to 20, so only the top 20x20 are getting cleared, so you see al the frames printed on screen.

Working Example: https://jsfiddle.net/vLxmws9d/

Edit: don't know why the SO snippet wasn't running so I used a jsfiddle instead.

var canvas= document.querySelector("canvas");
var right=document.querySelector("right");
var left=document.querySelector("left");
var up=document.querySelector("left");
var down=document.querySelector("left");

canvas.width=window.innerWidth;
canvas.height=window.innerHeight-200;
var ctx= canvas.getContext("2d");

width= 20;
height=20;

var snake=[{x:40, y:0}, {x:20, y:0}];

function move(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for(var i=0; i<snake.length; i  ){
    //lets just say i stands for index number
    ctx.strokeStyle="orange";
    ctx.strokeRect(snake[i].x, snake[i].y, width, height);
  }


  snakex=snake[0].x;
  snakey=snake[0].y;

  snakex =20;

  var newhead={x:snakex, y:snakey};
  snake.unshift(newhead); 
  snake.pop();
}

setInterval(move, 800);