JavaScript Canvas 实现生命游戏：从 0 到 1 构建 100x100 网格交互式模拟器

生命游戏（Game of Life）是英国数学家约翰·康威在1970年提出的一种细胞自动机模型。它通过简单的规则模拟了生命的繁衍、死亡和演化过程。本文将带你从零开始，使用原生JavaScript和Canvas API构建一个高性能的100x100网格生命游戏模拟器，并深入探讨性能优化技巧。

1. 生命游戏基础与规则解析

生命游戏在一个二维网格上进行，每个格子代表一个细胞，细胞有两种状态：存活（1）或死亡（0）。游戏的演化遵循以下四条简单规则：

1. 孤单死亡：如果一个存活细胞的邻居少于2个，它在下一代将死亡
2. 稳定存活：如果一个存活细胞有2或3个邻居，它将保持存活
3. 过度拥挤：如果一个存活细胞有超过3个邻居，它在下一代将死亡
4. 繁殖：如果一个死亡细胞恰好有3个邻居，它在下一代将变为存活状态

在JavaScript中，我们可以用一个二维数组来表示细胞状态：

const grid = Array(100).fill().map(() => Array(100).fill(0));

邻居指的是每个细胞周围8个相邻细胞（上、下、左、右及四个对角线方向）。计算邻居数量的函数可以这样实现：

function countNeighbors(grid, x, y) { let sum = 0; const rows = grid.length; const cols = grid[0].length; for (let i = -1; i < 2; i++) { for (let j = -1; j < 2; j++) { if (i === 0 && j === 0) continue; const row = (x + i + rows) % rows; const col = (y + j + cols) % cols; sum += grid[row][col]; } } return sum; }

注意：这里使用了模运算处理边界条件，使得网格在逻辑上是环状的（即最左边的细胞与最右边的细胞相邻）

2. Canvas 基础实现

Canvas API提供了强大的2D绘图能力，非常适合实现生命游戏的图形渲染。以下是基础实现步骤：

2.1 初始化Canvas

首先在HTML中添加Canvas元素：

<canvas id="gameCanvas" width="500" height="500"></canvas>

然后获取Canvas上下文并设置初始参数：

const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const cellSize = 5; // 每个细胞占5x5像素 const rows = 100; const cols = 100;

2.2 绘制网格

我们可以使用Canvas的fillRect方法绘制细胞：

function drawGrid(grid) { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { ctx.fillStyle = grid[i][j] ? '#000000' : '#FFFFFF'; ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize); } } }

2.3 实现游戏循环

使用requestAnimationFrame实现游戏的主循环：

function gameLoop() { updateGrid(); drawGrid(grid); requestAnimationFrame(gameLoop); } function updateGrid() { const newGrid = grid.map(arr => [...arr]); for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { const neighbors = countNeighbors(grid, i, j); // 应用生命游戏规则 if (grid[i][j] === 1) { newGrid[i][j] = (neighbors === 2 || neighbors === 3) ? 1 : 0; } else { newGrid[i][j] = neighbors === 3 ? 1 : 0; } } } // 更新网格 for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { grid[i][j] = newGrid[i][j]; } } }

3. 性能优化策略

当网格尺寸增大到100x100时，基础实现可能会遇到性能瓶颈。以下是几种有效的优化方法：

3.1 双缓冲技术

直接在原网格上更新会导致"闪烁"效果，且效率不高。双缓冲技术使用两个网格：

let currentGrid = createEmptyGrid(); let nextGrid = createEmptyGrid(); function updateGrid() { for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { const neighbors = countNeighbors(currentGrid, i, j); // 应用规则到nextGrid if (currentGrid[i][j] === 1) { nextGrid[i][j] = (neighbors === 2 || neighbors === 3) ? 1 : 0; } else { nextGrid[i][j] = neighbors === 3 ? 1 : 0; } } } // 交换网格 [currentGrid, nextGrid] = [nextGrid, currentGrid]; }

3.2 位运算优化

使用位运算可以显著提升邻居计算速度：

function countNeighborsBitwise(grid, x, y) { let sum = 0; const rows = grid.length; const cols = grid[0].length; // 使用位运算优化 sum += grid[(x-1+rows)%rows][(y-1+cols)%cols] & 1; sum += grid[(x-1+rows)%rows][y] & 1; sum += grid[(x-1+rows)%rows][(y+1)%cols] & 1; sum += grid[x][(y-1+cols)%cols] & 1; sum += grid[x][(y+1)%cols] & 1; sum += grid[(x+1)%rows][(y-1+cols)%cols] & 1; sum += grid[(x+1)%rows][y] & 1; sum += grid[(x+1)%rows][(y+1)%cols] & 1; return sum; }

3.3 增量更新

只更新发生变化的细胞区域，而不是整个网格：

function drawChanges(grid, prevGrid) { for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { if (grid[i][j] !== prevGrid[i][j]) { ctx.fillStyle = grid[i][j] ? '#000000' : '#FFFFFF'; ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize); } } } }

4. 交互功能实现

一个完整的生命游戏模拟器需要提供用户交互功能：

4.1 鼠标交互

允许用户通过点击来设置初始细胞状态：

canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); grid[y][x] = grid[y][x] ? 0 : 1; drawGrid(grid); });

4.2 控制面板

添加控制按钮和参数调节：

<div class="controls"> <button id="startBtn">开始</button> <button id="stopBtn">停止</button> <button id="clearBtn">清空</button> <button id="randomBtn">随机</button> <label>速度：<input type="range" id="speed" min="10" max="500"></label> </div>

对应的JavaScript控制逻辑：

let animationId = null; let speed = 100; document.getElementById('startBtn').addEventListener('click', () => { if (!animationId) { gameLoop(); } }); document.getElementById('stopBtn').addEventListener('click', () => { cancelAnimationFrame(animationId); animationId = null; }); document.getElementById('clearBtn').addEventListener('click', () => { grid.forEach(row => row.fill(0)); drawGrid(grid); }); document.getElementById('randomBtn').addEventListener('click', () => { for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { grid[i][j] = Math.random() > 0.7 ? 1 : 0; } } drawGrid(grid); }); document.getElementById('speed').addEventListener('input', (e) => { speed = 510 - e.target.value; // 反转值，使滑块右侧为更快 });

4.3 预设模式

添加一些著名的生命游戏模式，如滑翔机、脉冲星等：

const patterns = { glider: [ [0, 1, 0], [0, 0, 1], [1, 1, 1] ], blinker: [ [1, 1, 1] ], // 更多模式... }; function placePattern(grid, pattern, x, y) { for (let i = 0; i < pattern.length; i++) { for (let j = 0; j < pattern[0].length; j++) { const row = (y + i) % rows; const col = (x + j) % cols; grid[row][col] = pattern[i][j]; } } }

5. 高级主题与扩展

5.1 Web Workers 多线程计算

对于更大的网格，可以将计算任务分配给Web Worker：

// main.js const worker = new Worker('game-worker.js'); worker.onmessage = function(e) { grid = e.data; drawGrid(grid); }; function startWorker() { worker.postMessage({ command: 'start', grid: grid, speed: speed }); } // game-worker.js self.onmessage = function(e) { if (e.data.command === 'start') { setInterval(() => { const newGrid = computeNextGeneration(e.data.grid); self.postMessage(newGrid); }, e.data.speed); } }; function computeNextGeneration(grid) { // 计算下一代... return newGrid; }

5.2 着色器加速（WebGL）

使用WebGL和GLSL着色器可以实现硬件加速：

// 创建WebGL上下文 const glCanvas = document.createElement('canvas'); const gl = glCanvas.getContext('webgl'); // 编写片元着色器 const fragmentShaderSource = ` precision highp float; uniform sampler2D u_texture; uniform vec2 u_resolution; void main() { vec2 uv = gl_FragCoord.xy / u_resolution; vec3 color = texture2D(u_texture, uv).rgb; // 实现生命游戏规则的GLSL代码... gl_FragColor = vec4(color, 1.0); } `;

5.3 性能对比测试

不同实现方式的性能对比：

5.4 保存与加载状态

实现游戏状态的保存和加载功能：

function saveState() { const flatGrid = grid.flat(); localStorage.setItem('gameState', JSON.stringify(flatGrid)); } function loadState() { const saved = localStorage.getItem('gameState'); if (saved) { const flatGrid = JSON.parse(saved); for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { grid[i][j] = flatGrid[i * cols + j]; } } drawGrid(grid); } }

通过以上步骤，我们构建了一个完整的、高性能的生命游戏模拟器。从基础实现到各种优化技巧，这个项目不仅展示了Canvas的强大功能，也体现了算法优化在前端开发中的重要性。