javascript - 康威生命游戏算法中的错误(又名复制二维数组的问题)

Question

花了一些时间使用 Javascript 在 HTML Canvas 中实现 Conways 生命游戏。

我的细胞没有发挥预期作用。它似乎拾取了比实际数量更多的相邻单元格，并删除了不应删除的单元格。任何帮助将不胜感激!

//Globals
var currentCells = [
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,1,1,1,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
];
var currentGrid = currentCells;
var lastGrid = currentCells;

var cellsX = currentCells[1].length;
var cellsY = currentCells.length;

var canvas_id = "gameGrid";
var gridWidth = 100;
var gridHeight = 50;

var c  = document.getElementById("gameGrid");
var ctx = c.getContext("2d");

var cellWidth = gridWidth / cellsX;
var cellHeight = gridHeight / cellsY;
ctx.fillStyle = "yellow";

window.setInterval(step, 1000);



function move(){


for(var a=0;a<cellsX;a++) {

    for(var b=0; b<cellsY;b++) {

        if (a > 0 && b > 0 && a < cellsY - 1 && b < cellsX){ //centre cells only

            var currentNeighbours = neighbourCount(a, b);



            if (lastGrid[a][b] == 0){

                if(currentNeighbours == 3){

                    currentGrid[a][b] = 1;

                }

            }else if (lastGrid[a][b] == 1){

                if(currentNeighbours > 3 || currentNeighbours < 2){

                    currentGrid[a][b] = 0;

                    //console.log("triggered " + currentNeighbours);

                }
            }
        }
    }
}
lastGrid = currentGrid;
}  

function neighbourCount(a, b){

var currentNeighbours = 0;

if(lastGrid[a-1][b] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a+1][b] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a][b-1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a][b+1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a-1][b-1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a+1][b+1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a-1][b+1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}
if(lastGrid[a+1][b-1] == 1){ //

    currentNeighbours = currentNeighbours + 1;

}

//console.log(currentNeighbours);

return currentNeighbours;
}


function Draw(){
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for(var a=0;a<cellsY;a++) {
    var startX = 0;
    for(var b=0; b<cellsX;b++) {

        startX = cellWidth * b;

        if (currentGrid[a][b] == 1){


            ctx.fillRect(startX,(a*cellWidth) ,cellWidth,cellWidth);
        }
        ctx.strokeRect(startX,(a*cellWidth) ,cellWidth,cellWidth);

    }
}
}

function step(){
    move();
    Draw();

}

<canvas id="gameGrid">
</canvas>

Answer 1

这里的问题是 lastGrid 和 currentGrid 都引用同一个数组及其子数组。当您编写以下代码时:

var currentCells = [
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,1,1,1,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
];
var currentGrid = currentCells;
var lastGrid = currentCells;

...您仅创建了一个数组，并有三个名称引用它。因此，当您操作 currentGrid 时，您实际上也在操作 lastGrid。

而是这样做:

var currentCells = [
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,1,1,1,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
];
var currentGrid = currentCells.map(function(arr){return arr.slice()});
var lastGrid = currentCells.map(function(arr){return arr.slice()});

...这是您的 move() 的最后一行:

lastGrid = currentGrid.map(function(arr){return arr.slice()});

...因为，如所述 here ，.slice()方法创建一个具有相同值的新数组并返回对其的引用。 .map()方法遍历每个顶级数组项并执行请求的功能。

通常，要复制一维数组，您可以这样使用.slice():

newArray = oldArray.slice();

但是此方法不适用于二维数组，因为它只会为您提供一个新数组，其中充满了指向 oldArray 中引用的相同子数组的指针。

因此，您必须一次遍历每个顶级数组及其子数组的 .slice()。这是通过 .map() 方法完成的。