0 介绍

视频地址：www.bilibili.com/video/BV1eg411g7c...
相关源码：github.com/anonymousGiga/Rust-and-...

本节，我们就用WebAssembly实现一个简单的游戏。

1 游戏规则

在一个二维方格中，每个方格的状态都为“生”或者“死”。每个方格对应的就是一个细胞，每个细胞和它的周围的八个方格相邻。在每个时间推移过程中，都会发生以下转换：

1、 任何少于两个活邻居的活细胞都会死亡。

2、 任何有两个或三个活邻居的活细胞都能存活到下一代。

3、 任何一个有三个以上邻居的活细胞都会死亡。

4、 任何一个有三个活邻居的死细胞都会变成一个活细胞。

考虑初始状态：

----------------
|  |  |  |  |  |
----------------
|  |  |生|  |  |
----------------
|  |  |生|  |  |
----------------
|  |  |生|  |  |
----------------
|  |  |  |  |  |
----------------

按照上面的规则，下一个时间点，将会变成：

----------------
|  |  |  |  |  |
----------------
|  |  |  |  |  |
----------------
|  |生|生|生|  |
----------------
|  |  |  |  |  |
----------------
|  |  |  |  |  |
----------------

2 设计

2.1 设计规则

2.1.1 宇宙的设计

所谓宇宙，也就是二维的方格的设计。因为生命周期的游戏是在无限的宇宙中进行的，但是我们没有无限的记忆和计算能力，所以我们对整个宇宙可以由三种设计方式：

1、不断扩展的方式。

2、创建固定大小的宇宙，其中边缘上的细胞比中间的细胞少，是一种有尽头的模式。

3、创建一个固定大小的宇宙，但是左边的尽头就是右边。

2.1.2 Rust和Js交互的原则

1、最小化对WebAssembly线性内存的复制。不必要的拷贝会带来不必要的开销。

2、最小序列化和反序列化。与副本类似，序列化与反序列化也会带来开销，而且通常也带来复制。

一般来讲，一个好的javascript和WebAssembly接口设计通常是将大的、长寿面的数据结构实现为驻留在WebAssembly线性内存中的Rust类型，并将其作为不透明句柄传递给JavaScript。

2.1.3 在我们游戏中Rust和Js交互的设计

我们可以用一个数组表示，每个元素里面0表示死细胞，1表示活细胞，因此，4*4的宇宙是这样的：

Indices: 0  1  2  3  4  5  6  7  8  9  10 11 12 13 14 15

        -------------------------------------------------
array  :|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
        -------------------------------------------------
Rows:   |   0       |     1     |         2 |    3     |

要在宇宙中找出给定行和列的索引值，公式如下：

index(row, column, universe) = row * width(universe) + column

3 Rust实现

开始修改wasm-game-of-life/src/lib.rs中添加代码

3.1 定义细胞状态枚举类型

代码如下：

#[wasm_bindgen]
#[repr(u8)]
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum Cell {
    Dead = 0,
    Alive = 1,
}

在上面的代码中，我们定义了每个细胞的状态，0表示死，1表示生。上面的#[repr(u8)]是表示下面的枚举类型占用内存8个比特。

3.2 定义宇宙

下面我们定义宇宙，代码如下：

#[wasm_bindgen]
pub struct Universe {
    width: u32,
    height: u32,
    cells: Vec<Cell>,
}

下面定义相关的方法：

#[wasm_bindgen]
impl Universe {
    //获取到对应的索引
    fn get_index(&self, row: u32, column: u32) -> usize {
        (row*self.width + column) as usize
    }

    //获取活着的邻居个数
    //相邻的都是-1, 0, 1
    fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
        let mut count = 0;

        for delta_row in [self.height-1, 0, 1].iter().cloned() {
            for delta_col in [self.width-1, 0, 1].iter().cloned() {
                if delta_row == 0 && delta_col == 0    {
                    continue;
                }

                let neighbor_row = (row + delta_row) % self.height;
                let neighbor_col = (column + delta_col) % self.width;
                let idx = self.get_index(neighbor_row, neighbor_col);
                count += self.cells[idx] as u8;
            }
        }
        count
    }

    //计算下一个滴答的状态
    pub fn tick(&mut self) {
        let mut next = self.cells.clone();        

        for row in 0..self.height {
            for col in 0..self.width {
                let idx = self.get_index(row, col);
                let cell = self.cells[idx];
                let live_neighbors = self.live_neighbor_count(row, col);

                let next_cell = match(cell, live_neighbors) {
                    (Cell::Alive, x) if x < 2 => Cell::Dead,
                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
                    (Cell::Alive, x) if x > 3 => Cell::Dead,
                    (Cell::Dead, 3) => Cell::Alive,
                    (otherwise, _) => otherwise,
                };

                next[idx] = next_cell;
            }
        }
        self.cells = next;
    }

}

至此，我们基本上把核心的逻辑写完了，不过，我们想用黑色方格表示生的细胞，用空的方格表示死的细胞，我们还需要写如下代码：

use std::fmt;

impl fmt::Display for Universe {
    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
        for line in self.cells.as_slice().chunks(self.width as usize) {
            for &cell in line {
                let symbol = if cell == Cell::Dead {
                    '◻'
                } else {
                    '◼'
                };

                write!(f, "{}", symbol)?;
            }
            write!(f, "\n")?;
        }
        Ok(())
    }
}

接下来，我们写剩余的代码，创建宇宙的代码和填充的代码：

#[wasm_bindgen]
impl Universe {
    //创建
    pub fn new() -> Universe {
        let width = 64;
        let height = 64;

        let cells = (0..width * height)
                    .map(|i| {
                        if i%2 == 0 || i%7 == 0 {
                            Cell::Alive
                        } else {
                            Cell::Dead
                        }
                    })
                    .collect();

        Universe {
            width,
            height,
            cells,
        }
    }

    //填充
    pub fn render(&self) -> String {
        self.to_string()
    }

    ...
}    

3.3 编译

使用如下命令编译：

wasm-pack build

4 调用代码编写

修改wasm-game-of-life/www/index.html如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>game-of-life-canvas</title>
    <style>
          body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
    </style>
  </head>
  <body>
    <pre id="game-of-life-canvas"></pre>
    <script src="./bootstrap.js"></script>
  </body>
</html>

修改index.js的代码如下：

import { Universe } from "wasm-game-of-life";

const pre = document.getElementById("game-of-life-canvas");
const universe = Universe.new();
//alert("+++++++++++");

function renderLoop() {
    pre.textContent = universe.render();
    universe.tick();
    window.requestAnimationFrame(renderLoop);
}

window.requestAnimationFrame(renderLoop);

5 调用

进到www目录下，执行命令：

npm run start

在浏览器中输入以下地址，显示细胞的变化：

127.0.0.1:8080

本作品采用《CC 协议》，转载必须注明作者和本文链接