0 介绍
视频地址：https://www.bilibili.com/video/BV1eg411g7c8
相关源码：https://github.com/anonymousGiga/Rust-and-Web-Assembly
本节，我们就用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