生活游戏的 Javascript + Canvas 实现不起作用

Question

我在使用 javascript+canvas 实现 Conways Game of Life 时遇到问题。单元格创建得很好，代表单元格的 Canvas 框也被渲染得很好。但在此过程中的某个地方，所有细胞似乎都被激活并且没有切换。对于我的一生，我不明白出了什么问题。javascript代码是here我的实现是 here .谁能告诉我哪里出错了。

********* ***************编辑************************

我想我已经弄清楚出了什么问题。我将二维数组的一个元素传递给 reallyToggle() 函数，就像这样 -

var reallyToggle = function(a) {
//code
}
reallyToggle(cell[i][j]);

我认为问题出在这部分代码上。谁能告诉我如何将数组元素传递给函数？

Answer 1

因此，说实话，您的代码非常晦涩且过于复杂。创建自定义 Javascript 函数对象的网格是过度工程化的方式:您只需要一个 2D bool 数组。

如果将此类问题视为两个独立的问题:问题空间和世界空间，通常最容易解决。问题空间是您解决实际问题的区域。世界空间是映射到视觉结果的问题空间。要针对您的问题将其分离出来，请将问题空间视为 bool 值的二维数组，然后将世界空间视为您的 Canvas 。

如果您想稍微清理一下模拟，这里有一种方法可能会有所帮助:

//Have some parameters that you can change around
var cellSize = 10;
var cellsWide = 100;
var cellsHigh = 100;

//Instantiate and initialize a 2d array to false
var theGrid = new Array();

for (var i=0; i<cellsWide; i++) {
    theGrid.push(new Array());
    for (var j=0; j<cellsHeight; j++) {
        theGrid[i].push(false);
    }
}

//Attach a click event to your canvas (assuming canvas has already been dropped on page
//at the assigned width/height
$('#simCanvas').click(function(e) {
    var i = Math.floor((e.pageX - this.offsetLeft)/cellSize);
    var j = Math.floor((e.pageY - this.offsetTop)/cellSize);
    theGrid[i][j] = !theGrid[i][j];
});

这将是您处理问题空间的一种更加简洁的方法。问题空间到世界空间的映射更直接一些，但如果您需要这方面的帮助，请告诉我。

干杯