Neu zu Reactjs, ein Spiel des Lebens, aber das alte Brett wird mit dem neuen Board

Question

Zuerst möchte ich ein zufälliges Board ziehen, so dass das Spiel startet, sobald es rendert, aber für diesen Fall habe ich ein Pre -zugewiesenes Layout für das Debugging. Diese drei quadratische Anordnung wird unendlich von horizontal zu vertikal und zurück wechseln.

getInitialState: function() { 

var state = { 
    rows: 5, 
    cols: 5, 
    generation: 0, 
    active: false 
}; 
var cellMatrix = []; 
var cellRow = []; 
/* for (var i = 0; i < state.rows; i++) { 
     for (var j = 0; j < state.cols; j++) { 
     cellRow.push(Math.round(Math.random())); 
     } 
     cellMatrix.push(cellRow); 
     cellRow = []; 
    }*/ 

cellMatrix = [ 
    [0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0], 
    [0, 1, 1, 1, 0], 
    [0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0] 
]; 

state.board = cellMatrix; 

return state; 
}, 

Ziemlich einfach so weit. Ich rendere die Seite mit einer Schaltfläche, die es mir erlaubt, diesen.gameStep auszuführen, der eine andere Generation simuliert. Aktualisierte Werte werden newBoard zugewiesen und die state.board wird nach der Schleife aktualisiert. Das Problem besteht darin, dass die state.board bei jedem Schleifen (in diesem Fall 25 Mal) auf den aktuellen Board-Zustand aktualisiert wird. Wenn ich einen Booleschen Wert (newBoard == this.state.board) einfügen würde, wird bei jeder Iteration der Schleife der Wert true zurückgegeben.

gameStep: function() { 

var newBoard = this.state.board; 

for (var i = 0; i < this.state.rows; i++) { 
    for (var j = 0; j < this.state.cols; j++) { 
    console.log(this.state.board); 
    var check = this.checkNeighborSum(i, j, this.state.board); 
    if (check == 3) { 
     newBoard[i][j] = 1; 
    } else if (check == 4) { 
     newBoard[i][j] = this.state.board[i][j]; 
    } else { 
     newBoard[i][j] = 0; 
    } 
    } 
} 

this.setState({ 
    board: newBoard 
}); 
}, 

Als Referenz ist checkNeighborSum nur die eigentliche mathematische Funktion. 3 ist garantiert Leben, 4 ist Leben nur, wenn es bereits lebt (aka kopieren Sie den Status über), alles andere ist tot.

checkNeighborSum: function(x, y, board) { // x is row index, y is column index 
var xMinus = x - 1; 
var xPlus = x + 1; 
var yMinus = y - 1; 
var yPlus = y + 1; 
if (x === 0) { 
    xMinus = this.state.cols - 1; 
} 
if (x === this.state.cols - 1) { 
    xPlus = 0; 
} 
if (y === 0) { 
    yMinus = this.state.rows - 1; 
} 
if (y === this.state.rows - 1) { 
    yPlus = 0; 
} 

return (board[xMinus][yMinus] + 
    board[xMinus][y] + 
    board[xMinus][yPlus] + 
    board[x][yMinus] + 
    board[x][y] + 
    board[x][yPlus] + 
    board[xPlus][yMinus] + 
    board[xPlus][y] + 
    board[xPlus][yPlus]); 

}, 

Link-einhüllen Sie lieber die ganze Seite sehen würde: link

Answer 1

In gameStep ändern Sie selbst. Ich würde empfehlen, unveränderliche Strukturen zu verwenden, z.B. unveränderlich.js. Aber da man erst am Anfang sind, können Sie versuchen, den Staat in newState Klonen mit Object.assign -

var newBoard = Object.assign({}, this.state.board);

Dies sollte die board duplizieren, wenn es um newBoard hinzufügen.

Answer 2

Vielleicht überprüfen: How do I correctly clone a JavaScript object?

var newBoard = this.state.board nur eine weitere Referenz auf die gleiche Variable erstellen. Es klont Ihr Objekt nicht