需要帮助修复我的Conway Life of Life代码

Question

我正在做一个以预定义板开始的Conway Life of Life游戏，我是通过二维数组制作该板的，已经实现了规则，并且看起来很有效，问题是不同的代只出现在前一个代的旁边而不更换它（请参阅图片[1]）

图片：[！[在此处输入图片描述] [1]] [1]

因此，我需要的是使后几代替换HTML显示屏上的前几代。

var gfg=new Array(10);

for (var COL=0; COL<gfg.length;COL++){
    gfg[COL]=new Array(10);   
}

run();

function run(){  
    board1();
    rules();    
}

function rules(){
        for (var i=0; i<10;i++){
            for(var j=0; j<10; j++){
                const cell = gfg[i][j];
                let numNeighbours = 0;
                for (let x = -1; x < 2; x++) {
                    for (let y = -1; y < 2; y++) {
                        if (x === 0 && y === 0) {
                            continue;
                        }
                    var x_cell = i + x;
                    var y_cell = j + y;

                 if (x_cell > 0 && y_cell > 0 && x_cell <0 && y_cell <0) {
                            const currentNeighbour = 1;
                            numNeighbours=numNeighbours+currentNeighbour;
                        }
                    }                  
                }
                if (cell === 1 && numNeighbours < 2) {
                    gfg[i][j] = 0;
                } else if (cell === 1 && numNeighbours > 3) {
                    gfg[i][j] = 0;
                } else if (cell === 0 && numNeighbours === 3) {
                    gfg[i][j] = 1;
                }                         
            } 
        draw();

       }
    } 

function draw(){          
        for (var i=0; i<10;i++){
            for(var j=0; j<10; j++){                                
                //Writes in HTML according to the coordinate value
                if(gfg[i][j]===0){
                    document.write("&#9723;");
                }else if(gfg[i][j]===1){
                    document.write("&#9724;");
                }                              
            }
        document.write("<br>");      
        }

}
//predefined board
function board1() {
    gfg[0][0] = 1;
    gfg[0][1] = 0;
    gfg[0][2] = 1;
    gfg[0][3] = 0;
    gfg[0][4] = 0;
    gfg[0][5] = 1;
    gfg[0][6] = 0;
    gfg[0][7] = 0;
    gfg[0][8] = 0;
    gfg[0][9] = 1;
    gfg[1][0] = 0;
    gfg[1][1] = 0;
    gfg[1][2] = 0;
    gfg[1][3] = 0;
    gfg[1][4] = 0;
    gfg[1][5] = 0;
    gfg[1][6] = 0;
    gfg[1][7] = 1;
    gfg[1][8] = 0;
    gfg[1][9] = 0;
    gfg[2][0] = 0;
    gfg[2][1] = 0;
    gfg[2][2] = 0;
    gfg[2][3] = 1;
    gfg[2][4] = 0;
    gfg[2][5] = 1;
    gfg[2][6] = 1;
    gfg[2][7] = 0;
    gfg[2][8] = 0;
    gfg[2][9] = 0;
    gfg[3][0] = 0;
    gfg[3][1] = 0;
    gfg[3][2] = 1;
    gfg[3][3] = 0;
    gfg[3][4] = 1;
    gfg[3][5] = 0;
    gfg[3][6] = 0;
    gfg[3][7] = 0;
    gfg[3][8] = 0;
    gfg[3][9] = 1;
    gfg[4][0] = 0;
    gfg[4][1] = 0;
    gfg[4][2] = 0;
    gfg[4][3] = 0;
    gfg[4][4] = 1;
    gfg[4][5] = 0;
    gfg[4][6] = 0;
    gfg[4][7] = 0;
    gfg[4][8] = 0;
    gfg[4][9] = 0;
    gfg[5][0] = 0;
    gfg[5][1] = 1;
    gfg[5][2] = 0;
    gfg[5][3] = 0;
    gfg[5][4] = 0;
    gfg[5][5] = 0;
    gfg[5][6] = 0;
    gfg[5][7] = 0;
    gfg[5][8] = 0;
    gfg[5][9] = 0;
    gfg[6][0] = 0;
    gfg[6][1] = 0;
    gfg[6][2] = 0;
    gfg[6][3] = 0;
    gfg[6][4] = 1;
    gfg[6][5] = 0;
    gfg[6][6] = 1;
    gfg[6][7] = 0;
    gfg[6][8] = 1;
    gfg[6][9] = 0;
    gfg[7][0] = 1;
    gfg[7][1] = 0;
    gfg[7][2] = 0;
    gfg[7][3] = 1;
    gfg[7][4] = 0;
    gfg[7][5] = 0;
    gfg[7][6] = 0;
    gfg[7][7] = 1;
    gfg[7][8] = 0;
    gfg[7][9] = 0;
    gfg[8][0] = 0;
    gfg[8][1] = 0;
    gfg[8][2] = 1;
    gfg[8][3] = 0;
    gfg[8][4] = 1;
    gfg[8][5] = 0;
    gfg[8][6] = 0;
    gfg[8][7] = 0;
    gfg[8][8] = 0;
    gfg[8][9] = 0;
    gfg[9][0] = 0;
    gfg[9][1] = 1;
    gfg[9][2] = 0;
    gfg[9][3] = 0;
    gfg[9][4] = 0;
    gfg[9][5] = 0;
    gfg[9][6] = 0;
    gfg[9][7] = 0;
    gfg[9][8] = 1;
    gfg[9][9] = 0;

}



  [1]: https://i.stack.imgur.com/ZKrFj.png

Answer 1

这是如果您正在使用document.write()那么您要做的就是使用document.body.innerHTML = "";清除先前写入的容器document.body.innerHTML = ""; 这将清除您之前的写入内容，然后您可以再次执行循环。

如果您需要使用html和javascript，则只有canvas仍可以使用，因为它是内置的html标签。 但是，如果您仍然希望继续使用html来显示单元格，请创建一个新的div标签，并为其指定一个ID，例如： id="life_container"然后在页面加载完成后抓取对此标签的引用，并在每一帧上清空div然后遍历循环，并用元素填充它。

var container;
document.onload = function() {
   container = document.getElementById('life_container');
}

// clear container
container.innerHtml = "";

// fill container
container.innerHtml += gfg[i][j] === 0 ? "◻" : "◼";

但是，我可能会建议通过使用画布而不是html来显示您的生活游戏来进行一些改进。 您可以使用P5库来运行循环并显示它。 您将需要添加额外的计算，以找出在画布上绘制单元格的“位置”，但仅此而已。