时间戳

首页 > 解决方案 > 需要帮助修复我的康威生命游戏代码

javascript - 需要帮助修复我的康威生命游戏代码

问题描述

我正在制作一个康威生命游戏，它从一个预定义的棋盘开始，我通过一个二维数组制作了那个棋盘，已经实现了规则并且它们似乎正在工作，问题是不同的世代只是出现在前一个的旁边无需更换（见图 [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

标签： javascriptarrays

解决方案

这是如果您正在使用document.write() 您所要做的就是清除先前写入的容器，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 ? "&#9723;" : "&#9724;";

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

推荐阅读