本文详细介绍如何使用 JavaScript 实现康威生命游戏。内容涵盖元胞自动机概念、三大演化规则，以及基于 Canvas 的完整代码实现。解析包括系统配置、一维线性存储优化、状态迭代逻辑、画布渲染及启停控制，提供可直接运行的源码参考。
概念介绍
元胞自动机（Cellular Automata）由计算机之父冯·诺依曼（John von Neumann）在 20 世纪 50 年代初提出，旨在模拟生命系统的自复制功能。
生命游戏（Game of Life），全称为 John Conway's Game of Life，是由英国数学家约翰·康威在 1970 年代发明的一种元胞自动机模型。
逻辑规则
在二维网格平面中，每个细胞仅有两种状态：存活或死亡。下一时刻的状态完全取决于其周围 8 个相邻细胞当前的状态。
该世界遵循以下三条核心演化规则：
- 若周围存活细胞数量为 2 个，当前细胞状态保持不变；
- 若周围存活细胞数量为 3 个，当前细胞将处于存活状态（若原为死亡则复活）；
- 若周围存活细胞数量少于 2 个（生命稀疏）或多于 3 个（生命拥挤），当前细胞将死亡。
完整代码
焚霜 / LifeGame
演示页面
基本结构
index.html // 主页面，初始化系统，控制系统运行等
canvas.js // 渲染层，创建画布，手动绘制，画布更新方法等
LifeGame.js // 逻辑层，创建运行系统，系统运行逻辑，数据更新等
主要实现
系统配置：定义二维网格的尺寸参数。在 data 属性中，以 key-value 形式存储所有细胞的生命状态。execute 是 canvas.js 暴露的内部方法，挂载于 config 对象上，用于更新画布显示。
const config = {
width: 100, // 横向细胞数量
height: 100, // 纵向细胞数量
size: 4 + 1, // 细胞大小，细胞间距 1px
speed: 200, // 细胞迭代速度
alive: '#000000', // 细胞存活颜色
dead: '#FFFFFF', // 世界颜色（细胞死亡颜色）
data: new Map(), // 系统运行数据
execute, // 更新画布方法
};
规则实现：遍历二维网格中的每个细胞，获取其当前状态，计算周围存活细胞数量，据此判断下一时刻的生死状态并保存。随后调用渲染层的 execute 方法更新界面。在处理 data 数据时，未使用二维数组，而是将其转换为一维线性表示，并存储于 Map 对象中。
// LifeGame.js
// 二维坐标系一维线性表示
const MakeKey = (x = 0, y = 0) => y * 10000 + x;
function refreshWorld() {
const next = new Map(); // 更新后的系统运行数据
// 迭代二维坐标系所有元素
IterateCells(config, (x, y) => {
const index = MakeKey(x, y); // 计算坐标对应的 key
const current = config.data.get(index); // 当前细胞状态
// 计算当前细胞周围存活细胞的数量
switch (borderSum(x, y)) {
case 2:
// 当周围有 2 个存活细胞时，该细胞保持原样。
next.set(index, current);
break;
case 3:
// 当周围有 3 个存活细胞时，该细胞为存活状态。
next.set(index, true);
!current && config.execute(x, y, true); // 状态变化，更新画布
break;
default:
// 当周围的存活细胞低于 2 个时，该细胞为死亡状态。（生命数量稀少）
// 当周围有超过 3 个存活细胞时，该细胞为死亡状态。（生命数量过多）
next.set(index, false);
current && config.execute(x, y, false); // 状态变化，更新画布
break;
}
return true;
});
return next;
}
系统的启动与停止
// LifeGame.js
// 开启系统
function startWorld() {
stopWorld(); // 停止之前启动的循环
// 根据迭代速度启动系统，循环更新系统
interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);
starting = true; // 开启启动标识
return true;
}
// 关闭系统，当前系统运行数据保留
function stopWorld() {
clearInterval(interval); // 停止循环
starting = false; // 关闭启动标识
return true;
}
计算存活细胞方法
// LifeGame.js
function borderSum(x = 0, y = 0) {
const { width, height, data } = config;
let sum = 0;
for (let j = y - 1; j <= y + 1; j++) {
for (let i = x - 1; i <= x + 1; i++) {
// 边界判断
if (i < 0 || j < 0 || i >= width || j >= height || (i === x && j === y)) {
continue;
}
if (data.get(MakeKey(i, j))) {
sum++; // 存活细胞数量累加
}
}
}
return sum;
}
迭代二维坐标系方法
/**
* 迭代二维坐标系所有元素，执行回调函数
* @param config: { width: number, height: number }
* @param callback: (x: number, y: number) => boolean
*/
const IterateCells = ({ width, height }, callback) => {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (callback && !callback(x, y)) {
return false;
}
}
}
return true;
};
更新画布方法
// canvas.js
function execute(x, y, life) {
const { size, alive, dead } = config;
// 设置细胞颜色
context.fillStyle = life ? alive : dead;
// 绘制细胞，细胞间距 1px
context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1);
return true;
}
以上就是 JavaScript 实现生命游戏的详细内容，更多关于 JavaScript 生命游戏的资料请关注本站其它相关文章！