JavaScript值更改，但画布不更改'；t使用更新的值重新绘制

我正在尝试使用画布和JavaScript在HTML中实现John Conway的生活游戏。
在2D阵列中，我存储单元的x-y位置和状态（活的或死的）。
我避免使用最外层的单元格，以避免担心边界条件。
使用requestAnimationFrame，我清除画布，根据邻居的数量更新下一代的单元格，然后绘制它们。
我会记录单元格的状态，这些状态会发生变化，但由于某些原因，它们不会在画布中更新。
我已经使用此链接作为参考，但没有任何效果：

以下是JavaScript代码：

var cv = document.querySelector('#cv');
var c = cv.getContext('2d');
var h = cv.height;
var w = cv.width;

//Cell class
function Cell(alive, x, y) {
    this.alive = alive;
    this.x = x;
    this.y = y;

    this.draw = function () {
        //c.beginPath();
        this.x = x;
        this.y = y;
        if(alive == true) {
            c.fillStyle = 'black';
            c.fillRect(this.x, this.y, 10, 10);
        }
        else if(alive == false){
            c.fillStyle = 'white';
            c.fillRect(this.x, this.y, 10, 10);
        }
        //c.stroke();
    }
}


//2d array to contain Cell objects
var cellArray = new Array(100);
for (var i = 0; i < cellArray.length; i++) {
  cellArray[i] = new Array(70);
}
//initial drawing
for(var i = 0; i < cellArray.length; i++) {
    for(var j = 0; j < 100; j++) {
        var b = Math.round(Math.random() - 0.4);
        if(b == 1) {
            cellArray[i][j] = new Cell(true, i * 10, j * 10);
            cellArray[i][j].draw();
        }
        else {
            cellArray[i][j] = new Cell(false, i * 10, j * 10);
            cellArray[i][j].draw();
        }
    }
}

//find number of neghbor cells
function neighborSum(cell, i, j) {
    this.cell = cell;
    this.i = i;
    this.j = j;
    var sum = 0;
    if(cellArray[i - 1][j - 1].alive == true) {
        sum += 1;
    }
    if(cellArray[i][j - 1].alive == true) {
        sum += 1;
    }
    if(cellArray[i - 1][j].alive == true) {
        sum += 1;
    }
    if(cellArray[i + 1][j - 1].alive == true) {
        sum += 1;
    }
    if(cellArray[i - 1][j + 1].alive == true) {
        sum += 1;
    }
    if(cellArray[i + 1][j].alive == true) {
        sum += 1;
    }
    if(cellArray[i][j + 1].alive == true) {
        sum += 1;
    }
    if(cellArray[i + 1][j + 1].alive == true) {
        sum += 1;
    }
    return sum;
}

//animate function
function play() {
    requestAnimationFrame(play);
    c.clearRect(0, 0, w, h);

        //check surrounding neighbor cells
    for(var i = 1; i < cellArray.length - 1; i++) {
        for(var j = 1; j < 70 - 1; j++) {
            if( cellArray[i][j].alive == true &&  (  neighborSum(cellArray[i][j], i, j) > 3 ||   neighborSum(cellArray[i][j], i, j) < 2 )  ) {
                cellArray[i][j].alive = false;
            }
            else if(  cellArray[i][j].alive == true  && ( neighborSum(cellArray[i][j], i, j) == 3 || neighborSum(cellArray[i][j], i, j) == 2 )  ) {
                cellArray[i][j].alive = true;
            }
            else if(cellArray[i][j].alive == false &&  neighborSum(cellArray[i][j], i, j) == 3   ) {
                cellArray[i][j].alive = true;
            }
        }
    }

    //console.log(cellArray)

    //redraw cells alive or dead
    for(var i = 1; i < cellArray.length - 1; i++) {
        for(var j = 1; j < 70 - 1; j++) {
            cellArray[i][j].draw();
        }
    }
}

requestAnimationFrame(play);

var-cv=document.querySelector（“#cv”）；
var c=cv.getContext（'2d'）；
var h=cv高度；
var w=cv宽度；
//细胞类
功能细胞（活的，x，y）{
这是活着的；
这个.x=x；
这个。y=y；
this.draw=函数（）{
//c、 beginPath（）；
这个.x=x；
这个。y=y；
如果（活动==真）{
c、 fillStyle='黑色'；
c、 fillRect（this.x，this.y，10,10）；
}
else if（活动==false）{
c、 fillStyle='白色'；
c、 fillRect（this.x，this.y，10,10）；
}
//c、 笔划（）；
}
}
//包含单元对象的二维数组
var-ray=新阵列（100）；
对于（var i=0；i3| | neighborSum（ceralray[i][j]，i，j）<2））{
[i][j].alive=false；
}
else if（ceralray[i][j]。alive==true&（neighborSum（ceralray[i][j]，i，j）==3 | | neighborSum（ceralray[i][j]，i，j）==2））{
[i][j].alive=true；
}
else if（ceralray[i][j].alive==false&&neighborSum（ceralray[i][j]，i，j）==3）{
[i][j].alive=true；
}
}
}
//console.log（celleray）
//重新绘制活细胞或死细胞
对于（var i=1；i

---

下面是一个JSFIDLE:

好的，因此我可以通过删除draw（）函数来解决问题，而只是直接调用requestAnimationFrame函数中的fillRect（）函数。此外，通过添加另一个相同大小的2d数组来存储下一代单元的状态，修复了单元的行为：

...
for(var i = 1; i < cellArray.length - 1; i++) {
        for(var j = 1; j < 70 - 1; j++) {
            //cellArray[i][j].draw();
            c.beginPath();
            //cellArray[i][j].draw();
            if(cellArray[i][j].alive == true) {
                c.fillStyle = 'black';
                c.fillRect(cellArray[i][j].x, cellArray[i][j].y, 10, 10);
            }
            else if(cellArray[i][j].alive == false){
                c.fillStyle = 'white';
                c.fillRect(cellArray[i][j].x, cellArray[i][j].y, 10, 10);
            }
            c.stroke();
        }
    }
...

。。。
对于（var i=1；i

---

这是一个正在工作的JSFIDLE:

没有笔划，就没有绘图。但是在哪里添加它呢？在我的绘图功能中，我已经把它放在那里了（当然是未注释的），画布是一台绘画机器，当你画东西时，这是肯定固定的。如果你想移动一个绘画部分，在重新绘制下一个之前，你已经清洁了最后一个位置，我通过清理画布来完成；然后检查下一代的状态并更新其值，然后重新绘制；我的问题是为什么画布上没有显示这一点？画布将清除和重画，但会继续使用相同的值，尽管这些值已更改。