javascript - 如何正确应用康威的生命游戏勾选？

Question

在康威的生命游戏算法中，它写道:

The first generation is created by applying the above rules simultaneously to every cell in the seed; births and deaths occur simultaneously, and the discrete moment at which this happens is sometimes called a tick.

如何同时将映射函数应用于数组的每个元素？这真的是它所要求的吗？我的代码似乎可以工作，但是一旦生命开始，它就会表现得不稳定，并且绝对不会完全消失，它只会扩展，直到占据我的整个宽度/高度。因此，我的实现显然存在问题，从我的 Angular 来看，我只能将其与我对勾号实际含义及其应用方式的误解联系起来。

这是我的实现:

conways(xRow: number, yRow: number) {

    // Any live cell with fewer than two live neighbours dies, as if by underpopulation.
    // Any live cell with two or three live neighbours lives on to the next generation.
    // Any live cell with more than three live neighbours dies, as if by overpopulation.
    // Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

    let matrix = [], tracker = [];
    const tileSize = new Dimension(Math.floor(this.dimensions.width / xRow), Math.floor(this.dimensions.height / yRow));

    for (let i = 0; i < xRow; i++) matrix[i] = new Array(yRow);

    for (let i = 0; i < matrix.length; i++) {
        for (let j = 0; j < matrix[i].length; j++) {
            if (Math.floor(Math.random() * 10) === 1) {
                matrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "black");
                matrix[i][j].addProperty("alive", true);
            }
            else {
                matrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "white");
                matrix[i][j].addProperty("alive", false);
            }
            this.render.requestStage(matrix[i][j]);
        }
    }

    let isAlive = (position: Point, world: GameObject[][]) => {
        let neighboursCount = 0;

        const cellStatus = world[position.x][position.y].props["alive"];

        if (world[position.x + 1] && world[position.x + 1][position.y] && 
            world[position.x + 1][position.y].props["alive"]) neighboursCount++;

        if (world[position.x - 1] && world[position.x - 1][position.y] && 
            world[position.x - 1][position.y].props["alive"]) neighboursCount++;

        if (world[position.x] && world[position.x][position.y + 1] && 
            world[position.x][position.y + 1].props["alive"]) neighboursCount++;

        if (world[position.x] && world[position.x][position.y - 1] &&
            world[position.x][position.y - 1].props["alive"]) neighboursCount++;

        if (world[position.x - 1] && world[position.x - 1][position.y + 1] && 
            world[position.x - 1][position.y + 1].props["alive"]) neighboursCount++;

        if (world[position.x + 1] && world[position.x + 1][position.y + 1] && 
            world[position.x + 1][position.y + 1].props["alive"]) neighboursCount++;

        if (world[position.x - 1] && world[position.x - 1][position.y - 1] && 
            world[position.x - 1][position.y - 1].props["alive"]) neighboursCount++;

        if (world[position.x + 1] && world[position.x + 1][position.y - 1] && 
            world[position.x + 1][position.y - 1].props["alive"]) neighboursCount++;

        if (cellStatus) {
            if (neighboursCount < 2) return false;
            if (neighboursCount === 2 || neighboursCount === 3) return true;
            if (neighboursCount > 3) return false;
        }
        else if (!cellStatus && neighboursCount === 3) return true;
        else return false;
    }

    setInterval(() => {
        for (let i = 0; i < matrix.length; i++) {
            for (let j = 0; j < matrix.length; j++) {
                let alive = isAlive(new Point(i, j), matrix);
                if (alive) {
                    matrix[i][j].color = "black";
                    matrix[i][j].props["alive"] = true;
                }
                else {
                    matrix[i][j].props["alive"] = false;
                    matrix[i][j].color = "white";
                }
            }
        }
    }, 100);
}

请不要介意自定义构造函数和函数，因为这是我对“图形库”的看法，实际上仅链接到 Canvas API 和 ImageData。我所做的基本上是:

-创建一个大小为 w/h 的矩阵。

-当对其进行迭代时，单元格存活的几率为 1/10。 (想出一个随机种子，因为我还没有添加输入)

-将其全部渲染在屏幕上。

-每隔 10 毫秒，我就会迭代地将康威规则应用到每个单元格，并相应地更改它们的颜色/状态。

Answer 1

使用 Mike 和 hyde 建议的缓冲策略，我成功了。以下是感兴趣的更改:

conways(xRow: number, yRow: number) {

        // Any live cell with fewer than two live neighbours dies, as if by underpopulation.
        // Any live cell with two or three live neighbours lives on to the next generation.
        // Any live cell with more than three live neighbours dies, as if by overpopulation.
        // Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

        let matrix = [], bufferMatrix = [];
        const tileSize = new Dimension(Math.floor(this.dimensions.width / xRow), Math.floor(this.dimensions.height / yRow));

        for (let i = 0; i < xRow; i++) matrix[i] = new Array(yRow);
        for (let i = 0; i < xRow; i++) bufferMatrix[i] = new Array(yRow);

        for (let i = 0; i < matrix.length; i++) {
            for (let j = 0; j < matrix[i].length; j++) {
                if (Math.floor(Math.random() * 10) === 1) {
                    matrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "black");
                    matrix[i][j].addProperty("alive", true);
                    bufferMatrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "black");
                    bufferMatrix[i][j].addProperty("alive", true);
                }
                else {
                    matrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "white");
                    matrix[i][j].addProperty("alive", false);
                    bufferMatrix[i][j] = new GameObject(Model.RECTANGLE, new Point(i * tileSize.width, j * tileSize.height), new Dimension(tileSize.width, tileSize.height), "white");
                    bufferMatrix[i][j].addProperty("alive", false);
                }
                this.render.requestStage(matrix[i][j]);
            }
        }

        let isAlive = (position: Point, world: GameObject[][]) => {
            let neighboursCount = 0;

            const cellStatus = world[position.x][position.y].props["alive"];

            if (world[position.x + 1] && world[position.x + 1][position.y] && 
                world[position.x + 1][position.y].props["alive"]) neighboursCount++;

            if (world[position.x - 1] && world[position.x - 1][position.y] && 
                world[position.x - 1][position.y].props["alive"]) neighboursCount++;

            if (world[position.x] && world[position.x][position.y + 1] && 
                world[position.x][position.y + 1].props["alive"]) neighboursCount++;

            if (world[position.x] && world[position.x][position.y - 1] &&
                world[position.x][position.y - 1].props["alive"]) neighboursCount++;

            if (world[position.x - 1] && world[position.x - 1][position.y + 1] && 
                world[position.x - 1][position.y + 1].props["alive"]) neighboursCount++;

            if (world[position.x + 1] && world[position.x + 1][position.y + 1] && 
                world[position.x + 1][position.y + 1].props["alive"]) neighboursCount++;

            if (world[position.x - 1] && world[position.x - 1][position.y - 1] && 
                world[position.x - 1][position.y - 1].props["alive"]) neighboursCount++;

            if (world[position.x + 1] && world[position.x + 1][position.y - 1] && 
                world[position.x + 1][position.y - 1].props["alive"]) neighboursCount++;

            if (cellStatus) {
                if (neighboursCount < 2) return false;
                if (neighboursCount === 2 || neighboursCount === 3) return true;
                if (neighboursCount > 3) return false;
            }
            else if (!cellStatus && neighboursCount === 3) return true;
            else return false;
        }

        setInterval(() => {
            this.render.clearStage();
            for (let i = 0; i < matrix.length; i++) {
                for (let j = 0; j < matrix.length; j++) {
                    let alive = isAlive(new Point(i, j), matrix);
                    if (alive) {
                        bufferMatrix[i][j].color = "black";
                        bufferMatrix[i][j].props["alive"] = true;
                    }
                    else {
                        bufferMatrix[i][j].props["alive"] = false;
                        bufferMatrix[i][j].color = "white";
                    }
                    this.render.requestStage(matrix[i][j]);
                }
            }
            // Matching properties from bufferedMatrix and matrix without losing reference.
            for (let i = 0; i < matrix.length; i++) {
                for (let j = 0; j < matrix.length; j++) {
                    matrix[i][j].color = bufferMatrix[i][j].color;
                    matrix[i][j].props["alive"] = bufferMatrix[i][j].props["alive"];
                }
            }
        }, 100);
    }