Javascript 对象在行之间更改值

Question

我正在制作贪吃蛇游戏（就像旧手机上的游戏一样）。我在下面有一段代码，它似乎展示了对象在行之间更改其值的奇怪行为。

函数makeSnakeArray在游戏开始时调用，或者当蛇碰到自己（游戏重新开始）时调用。它 returns 新蛇是一个对象数组，具有 x 和 y 属性，存储在全局变量 snakeArray.

中

第一次调用，一切正常。但是调用重启游戏时，consoleLog1和consoleLog2的x和y的值是不同的（见代码注释）。

在consoleLog1 中，x 和y 值与我在函数中计算的预期值一样。但是，在 consoleLog2 中，tempArray 打印出 snakeArray 要求游戏重新启动时的内容（我确保通过设置 snakeArray = []; 在调用 makeSnakeArray 函数之前）。结果，这条蛇并没有像第一次那样从屏幕中间开始，而是似乎只是在它停止的地方继续。

为什么会这样？

函数：

function makeSnakeArray(){
  var tempArray = [];

  //Get the position of the head of the snake
  var halfWidth = Math.floor(canvasWidth/2) * blockSize;
  var halfHeight = Math.floor(canvasHeight/2) * blockSize;

  //Add in each block of the snake to the snake array, starting with the head
  for (var i = 0; i < startingSnakeLength; i++){  

    //Create and initialize the snakeBlock
    var snakeBlock = {
      x: halfWidth,
      y: halfHeight + (i*blockSize),
    }

    console.log(snakeBlock); //consoleLog1
    tempArray.push(snakeBlock);
  }

  console.log(tempArray);//consoleLog2
  return tempArray;
}

示例输出：

consoleLog1

{x: 180, y: 180}
{x: 180, y: 195}
{x: 180, y: 210}
{x: 180, y: 225}
{x: 180, y: 240}

consoleLog2

0:{x: 60, y: 270}
1:{x: 60, y: 285}
2:{x: 60, y: 300}
3:{x: 60, y: 315}
4:{x: 60, y: 330}

这是贪吃蛇游戏的当前版本，如果您想查看完整代码：https://codepen.io/vrsivananda/pen/NvJyGJ?editors=0010

Answer 1

我用开发工具对你的代码进行了调试，makeSnakeArray() 函数似乎运行良好。问题在于 updateSnake() 函数。

//Push this into the front of the snakeArray
  snakeArray.unshift(newHead);

  //If the head is the same place as the apple, then get a new apple and do not pop the tail off the snake
  if(newHead.x == apple.x && newHead.y == apple.y){
    apple = placeRandomApple();
  }
  else{
    //Delete the tail fo the snakeArray
    snakeArray.pop();
  }
  //Redraw the canvas
  drawCanvas();

在这部分你不应该用新头更新蛇，如果你知道那个游戏刚刚重新启动。另外，在这种情况下你也不应该剪掉尾巴。

最简单的方法就是在您知道游戏重新启动后添加 return 语句：

for (var i = 0; i < snakeArray.length; i++){
    //If it is, restart the game
    if(newHead.x == snakeArray[i].x && newHead.y == snakeArray[i].y){
      restartSnakeGame();
      return;
      console.log("restarting");
    }
  }

避免所有蛇身操作

Javascript 对象在行之间更改值

Javascript object change values between lines

javascript

arrays

global-variables

javascript-objects

console.log