Question

首先，我想拉随机板，以便游戏在渲染后立即开始运行，但是对于这种情况，我有一个预先分配的布局用于调试。这三个方形的排列将从水平切换到垂直，然后无限地返回。

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;
},

到目前为止非常简单。我使用一个按钮来渲染页面，该按钮允许我执行this.gameStep，它模拟了另一代。更新的值分配给newBoard，state.board在循环后更新。问题是state.board每次循环时都会更新到当前的板状态（在这种情况下为25次）。如果我要插入一个（newBoard == this.state.board）布尔值，它会在循环的每次迭代时返回true。

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

作为参考，checkNeighborSum只是实际的数学函数。 3是生命保证，4是生命，只有它已经存活（又复制状态），其他任何东西都死了。

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

Answer 1

也许请查看：How do I correctly clone a JavaScript object?

var newBoard = this.state.board只是创建另一个对同一变量的引用。它不会克隆您的对象

Answer 2

在gameStep中，您正在更改this.state.board。我建议使用不可变结构，例如immutable.js。但是，由于您刚刚开始，您可以尝试使用Object.assign -

将状态克隆到newState

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

将board添加到newBoard时，应该复制wordlist = ["toto", "tata", "tutu"] booleanlist = [True, False] variable = {word: booleanlist for word in wordlist}。

Reactjs的新手，构建生命游戏，但旧板正在使用新板进行更新

2 个答案: