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 = "";清除先前写入的容器，这将清除先前的写入，然后可以再次执行循环。

如果您需要使用html和javascript，则仅画布仍可使用，因为它是内置的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 ? "&#9723;" : "&#9724;";

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

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

1 个答案: