为什么 pop 方法在我的贪吃蛇游戏中不起作用答案

【问题标题】：Why isn't pop method working in my snake game为什么 pop 方法在我的贪吃蛇游戏中不起作用
【发布时间】：2023-01-26 22:36:54
【问题描述】：

所以这里是关于我的贪吃蛇游戏如何运作的非常简短的描述。 for 循环用于绘制蛇。Newhead 是一个对象，经过第一次迭代后，newhead 现在是占据索引 0 的新元素，因为我们使用 .unshift() 方法将 newhead 添加到我们的蛇数组的前面。为了避免我们的新元素在 setInterval 循环的每次迭代期间获得相同的位置，我们将 x 坐标添加或递增 20（这会影响稍后 for 循环中的 rect，因为 snake[0] 现在将改变，即 x 将为 60而不是 40 并且 snake[1] 使用 snakex 获取了旧 snake[0]) 的元素。但我不明白的是为什么 snake.pop 不删除数组中的最后一个元素或对象，即从蛇中删除一个矩形

<!doctype html>
<html>
    <head>
        <title>snake</title>
        <meta charset="utf-8">
    </head>
<body>
    <canvas></canvas>
    <button id="right">right</button>
    <button id="down">down</button>
    <button id="left">left</button>
    <button id="up">up</button>
    
<script>
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);
</script>
</body>
</html>

【问题讨论】：

pop 显然有效，因为你的 console.log(i) 只打印 0 和 1 ...清除画布时出了点问题 ...

标签： javascript html

【解决方案1】：

它正确弹出，问题是 clearRect 调用，您将宽度和高度传递给它，但它们设置为 20，因此只有顶部 20x20 被清除，因此您可以看到屏幕上打印的所有帧。

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

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

【讨论】：