Javascript對象更改行間值

我正在創建一個Snake遊戲（就像舊手機上的遊戲一樣）。我在下面有一段代碼，它似乎顯示了一個對象在各行之間改變其值的怪異行爲。Javascript對象更改行間值

函數makeSnakeArray在遊戲開始時或當蛇自身觸及（遊戲重新開始）時被調用。它返回一個新的蛇，它是一個x和y屬性的對象數組，存儲在全局變量snakeArray中。

第一次被調用時，一切正常。但是，當它被稱爲重新啓動遊戲時，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}

這裏是當前VERSI如果你想看到完整的代碼：https://codepen.io/vrsivananda/pen/NvJyGJ?editors=0010

來源

2017-09-04 R. Siva

這似乎是全球位置不正確復位，蛇似乎繼續在那裏。 –

你是什麼意思，我該如何重置全球職位？ –

對不起，我的意思是你的全球蛇陣列 –

我用開發工具調試了你的代碼，並且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"); 
    } 
    }

爲了避免所有的蛇體操縱

來源

2017-09-04 11:22:11

你是對的！非常感謝你！我沒有意識到在調用'restartSnakeGame（）'之後，它會回到'updateSnake（）'函數並繼續進行蛇體操作。感謝所有的麻煩！ :) –

Javascript對象更改行間值

回答

相關問題