為什么 pop 方法在我的貪吃蛇游戲中不起作用

Question

所以這里是關於我的貪吃蛇游戲如何運作的非常簡短的描述。 for 循環用於繪制蛇。Newhead 是一個 object，經過第一次迭代后，newhead 現在是占據索引 0 的新元素，因為我們使用 .unshift() 方法將 newhead 添加到我們的蛇數組的前面。 為了避免在 setInterval 循環的每次迭代期間讓我們的新元素獲得相同的 position，我們將 x 坐標添加或遞增 20（這會影響稍后 for 循環中的 rect，因為 snake[0] 現在將更改，即 x 將為 60而不是 40 並且 snake[1] 使用 snakex 獲取了舊 snake[0]) 的元素。 但我不明白的是為什么 snake.pop 不刪除我們數組中的最后一個元素或 object 即從蛇中刪除一個矩形

 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>

Answer 1

它正確彈出，問題是 clearRect 調用，您將寬度和高度傳遞給它，但它們設置為 20，因此只有頂部 20x20 被清除，因此您可以看到屏幕上打印的所有幀。

工作示例： https://jsfiddle.net/vLxmws9d/

編輯：不知道為什么 SO 片段沒有運行所以我改用了 jsfiddle。

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