Javascriptオブジェクトは行間の値を変更します

Question

私はスネークゲームを作成しています（古い電話のゲームのようなものです）。私は以下のコードの断片を持っています。これはオブジェクトの奇妙な振る舞いを、行間の値を変えているようです。

関数makeSnakeArrayは、ゲームの開始時、またはスネークが触れたとき（ゲームが再開したとき）に呼び出されます。グローバル変数snakeArrayに格納される、xとyのプロパティを持つオブジェクトの配列である新しいスネークを返します。

初めて呼び出されると、すべて正常に動作します。ただし、ゲームを再起動するために呼び出されると、と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ありますあなたが完全なコードを見たいと思えば、蛇ゲームのon：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"); 
    } 
    } 

すべてのヘビ本体操作