JavaScript对象在行之间更改值

Question

我正在创建一个蛇游戏（就像旧手机上的游戏一样）。我有下面的代码段，似乎表现出对象的奇异行为，改变了线之间的值。

当游戏启动时或蛇触摸自身时（游戏重新启动）时，函数makeSnakeArray被调用。它返回了新的蛇，该蛇是将存储在全局变量snakeArray中的x和y属性的对象数组。

第一次被称为，一切正常。但是，当要求重新启动游戏时，x和y值在consoleLog1和consoleLog2中有所不同（请参阅代码注释）。

在consoleLog1中，x和y值是我所期望的，正如在函数中所计算的那样。但是，在consoleLog2中，tempArray在要求游戏重新启动时打印出snakeArray是什么（我确保通过在调用makeSnakeArray函数之前设置snakeArray = [];来清除snakeArray）。结果，蛇没有像第一次那样从屏幕的中间开始，但是它似乎只是在其停止的位置继续。

为什么会发生这种情况？

功能：

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

我使用开发工具对您的代码进行了调试，而makeNakeArray（）函数看起来很好。问题是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();

在此部分，如果您知道该游戏已经重新启动，则不应用新的头部更新蛇。另外，在这种情况下，您也不应该切尾。

最简单的事情就是在您知道游戏重新启动之后放置返回声明：

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

避免所有蛇身体操纵