我正在使用Javascript和HTML5 Canvas构建Conway的生活游戏。 这里的代码在gameOfLife对象的上下文中:
this.cells = [];
this.nextCellState = [];
使用我的单元格对象填充this.cells
后,我会像这样填充this.nextCellState
:
this.nextCellState = this.nextCellState.concat(this.cells);
单击鼠标时,相应的单元格对象属性isAlive将变为true:
function clickAlive(x, y) {
for (var i in this.cells) {
if (x.between(this.cells[i].x, this.cells[i].x + cellsize) && y.between(this.cells[i].y, this.cells[i].y + cellsize)) {
this.cells[i].isAlive = true;
console.log('Breakpoint');
}
}
}
问题是,看一下断点处的cells
和nextCellState
数组,它们都将点击的单元格激活为true
。
造成这种情况的原因是什么?
答案 0 :(得分:2)
将cells
的内容复制到nextCellState
时,您正在制作数组的浅表副本。对象本身现在由两个数组别名(即cells[0]
和nextCellState[0]
引用相同的对象。)
您需要在nextCellState
中创建新对象,以便能够独立更改对象的内部状态。如果您的单元格对象具有复制构造函数,则最简单。然后你可以做这样的事情:
this.nextCellState = this.nextCellState.concat(
this.cells.map(function(cell) {
return cell.copy(); // or whatever your copy constructor is
})
);