Rust + WebAssembly 实现康威生命游戏

1. 设计思绪

1.1 选择有限的世界

康威生命游戏的世界是 无穷二维网格，但由于 盘算机内存有限，我们可以选择三种有限宇宙方案：

• 动态扩展：仅存储“活跃区域”，按需扩展（可能无穷增长）。
  
• 固定大小，无边界扩展：边界处的细胞会被“扫除”。
  
• 固定大小，环绕宇宙（Toroidal Universe （我们采用此方案）
  

环绕宇宙（Toroidal Universe）答应 滑翔机（Gliders） 无穷运行，不会被边界限定：

• 上边界的细胞连接到下边界
  
• 左边界的细胞连接到右边界
  

2. Rust 代码实现

2.1 定义 Cell 结构

1. #[wasm_bindgen]
2. #[repr(u8)]
3. #[derive(Clone, Copy, Debug, PartialEq, Eq)]
4. pub enum Cell {
5.     Dead = 0,
6.     Alive = 1,
7. }

复制代码

说明：

• #[repr(u8)]：让 Cell 占用 1 字节，减少内存浪费。
  
• Dead = 0, Alive = 1：使得 Cell 可以直接用整数加法盘算邻居数。
  

2.2 定义 Universe

1. #[wasm_bindgen]
2. pub struct Universe {
3.     width: u32,
4.     height: u32,
5.     cells: Vec<Cell>,
6. }

复制代码

说明：

• width、height：宇宙的宽度和高度
  
• cells: Vec<Cell>：存储全部细胞状态（0=死，1=活）
  

2.3 盘算网格索引

1. impl Universe {
2.     fn get_index(&self, row: u32, column: u32) -> usize {
3.         (row * self.width + column) as usize
4.     }
5. }

复制代码

• 盘算二维网格在一维数组中的索引。
  

2.4 盘算活邻居数量

1. impl Universe {
2.     fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
3.         let mut count = 0;
4.         for delta_row in [self.height - 1, 0, 1].iter().cloned() {
5.             for delta_col in [self.width - 1, 0, 1].iter().cloned() {
6.                 if delta_row == 0 && delta_col == 0 {
7.                     continue;
8.                 }
10.                 let neighbor_row = (row + delta_row) % self.height;
11.                 let neighbor_col = (column + delta_col) % self.width;
12.                 let idx = self.get_index(neighbor_row, neighbor_col);
13.                 count += self.cells[idx] as u8;
14.             }
15.         }
16.         count
17.     }
18. }

复制代码

说明：

• 利用 modulo 盘算 环绕宇宙，确保邻居索引不会溢出。
  
• 避免 if 语句，减少特殊情况处理，进步性能。
  

2.5 更新下一代状态

1. #[wasm_bindgen]
2. impl Universe {
3.     pub fn tick(&mut self) {
4.         let mut next = self.cells.clone();
6.         for row in 0..self.height {
7.             for col in 0..self.width {
8.                 let idx = self.get_index(row, col);
9.                 let cell = self.cells[idx];
10.                 let live_neighbors = self.live_neighbor_count(row, col);
12.                 let next_cell = match (cell, live_neighbors) {
13.                     (Cell::Alive, x) if x < 2 => Cell::Dead,
14.                     (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
15.                     (Cell::Alive, x) if x > 3 => Cell::Dead,
16.                     (Cell::Dead, 3) => Cell::Alive,
17.                     (otherwise, _) => otherwise,
18.                 };
20.                 next[idx] = next_cell;
21.             }
22.         }
24.         self.cells = next;
25.     }
26. }

复制代码

说明：

• 规则翻译：
  
  
  
  • 活细胞 < 2 → 殒命（过少）
    
  • 活细胞 = 2 or 3 → 存活（繁衍）
    
  • 活细胞 > 3 → 殒命（过分拥挤）
    
  • 死细胞 = 3 → 复活（繁殖）
    
  
  

2.6 初始化宇宙

1. #[wasm_bindgen]
2. impl Universe {
3.     pub fn new() -> Universe {
4.         let width = 64;
5.         let height = 64;
7.         let cells = (0..width * height)
8.             .map(|i| if i % 2 == 0 || i % 7 == 0 { Cell::Alive } else { Cell::Dead })
9.             .collect();
11.         Universe {
12.             width,
13.             height,
14.             cells,
15.         }
16.     }
18.     pub fn render(&self) -> String {
19.         self.to_string()
20.     }
21. }

复制代码

• 初始化：创建 64x64 网格，细胞 随机分布。
  
• 实现 render()：在 JavaScript 中调用，返回网格字符串。
  

3. JavaScript 前端

在 wasm-game-of-life/www/index.js 编写 Canvas 渲染 代码。
3.1 JavaScript 初始化

1. import { Universe, Cell, memory } from "wasm-game-of-life";
3. const CELL_SIZE = 5;
4. const GRID_COLOR = "#CCCCCC";
5. const DEAD_COLOR = "#FFFFFF";
6. const ALIVE_COLOR = "#000000";
8. const universe = Universe.new();
9. const width = universe.width();
10. const height = universe.height();

复制代码

3.2 绘制网格

1. const drawGrid = () => {
2.   ctx.beginPath();
3.   ctx.strokeStyle = GRID_COLOR;
5.   for (let i = 0; i <= width; i++) {
6.     ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
7.     ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
8.   }
10.   for (let j = 0; j <= height; j++) {
11.     ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
12.     ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
13.   }
15.   ctx.stroke();
16. };

复制代码

3.3 读取 WebAssembly 内存

1. const drawCells = () => {
2.   const cellsPtr = universe.cells();
3.   const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
5.   ctx.beginPath();
7.   for (let row = 0; row < height; row++) {
8.     for (let col = 0; col < width; col++) {
9.       const idx = row * width + col;
10.       ctx.fillStyle = cells[idx] === Cell.Dead ? DEAD_COLOR : ALIVE_COLOR;
11.       ctx.fillRect(col * (CELL_SIZE + 1) + 1, row * (CELL_SIZE + 1) + 1, CELL_SIZE, CELL_SIZE);
12.     }
13.   }
15.   ctx.stroke();
16. };

复制代码

3.4 动画渲染

1. const renderLoop = () => {
2.   universe.tick();
3.   drawGrid();
4.   drawCells();
5.   requestAnimationFrame(renderLoop);
6. };
8. drawGrid();
9. drawCells();
10. requestAnimationFrame(renderLoop);

复制代码

4.运行项目

1. wasm-pack build
2. cd www
3. npm install
4. npm run start

复制代码

打开 http://localhost:8080/，你会看到 动态演化的生命游戏！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。