JS实现细胞自动机小游戏

什么是细胞自动机

细胞自动机(Cellular automaton，CA) ，又称元胞自动机，是一种时间、空间、状态都离散，空间相互作用和时间因果关系为局部的网格动力学模型，具有模拟复杂系统时空演化过程的能力。

细胞自动机游戏规则

游戏中，对于任意细胞，规则如下：

每个细胞有两种状态：存活或死亡，每个细胞与以自身为中心的周围八格细胞产生互动。

1. 当前细胞为存活状态时，当周围低于2个（不包含2个）存活细胞时， 该细胞变成死亡状态。（模拟生命数量稀少）
2. 当前细胞为存活状态时，当周围有2个或3个存活细胞时， 该细胞保持原样。
3. 当前细胞为存活状态时，当周围有3个以上的存活细胞时，该细胞变成死亡状态。（模拟生命数量过多）
4. 当前细胞为死亡状态时，当周围有3个存活细胞时，该细胞变成存活状态。 （模拟繁殖）

可以把最初的细胞结构定义为种子，当所有在种子中的细胞同时被以上规则处理后, 可以得到第一代细胞图。按规则继续处理当前的细胞图，可以得到下一代的细胞图，周而复始。

JS代码实现

cell.js

export default class Cell {
   
    constructor(ctx, size) {
   
        this.alive = [];
        this.ctx = ctx;
        this.size = size;
        this.init();
    }

    init() {
    // 初始化所有细胞为死亡状态
        for (let i = 0; i < this.size; i++) {
   
            this.alive[i] = [];
            for (let j = 0; j < this.size; j++) {
   
                this.alive[i][j] = 0;
            }
        }
    }

    draw() {
    // 画细胞
        for (let i = 0; i < this.size; i++) {
   
            for (let j = 0; j < this.size; j++) {
   
                if (this.alive[j][i] === 1) {
   
                    this.ctx.fillStyle = 'red';
                } else {
   
                    this.ctx.fillStyle = 'white';
                }
                this.ctx.fillRect(i * 10 + 1, j * 10 + 1, 8, 8);
            }
        }
    }

    transform() {
    // 演化细胞
        let sum = 0;
        let alive = this.copyAlive(this.alive);
        // 循环计算所有细胞周围活细胞个数
        for (let i = 0; i < this.size; i++) {
   
            for (let j = 0; j < this.size; j++) {
   
                if (i === 0 && j === 0) {
    // 左上角
                    sum = this.alive[i][j + 1] + this.alive[i + 1]