实现康威的生命游戏

在我们深入之前，我们有一些设计选择需要考虑。

生命游戏是在无限的宇宙中进行的，但我们没有无限的内存和计算能力。解决这个相当恼人的限制，通常有以下三种风格:

1。跟踪宇宙的哪个子集发生了有趣的事情，并根据需要，扩展此区域。在最坏的情况下，这种扩展是无限制的，实现将变得越来越慢，最终耗尽内存。

2。创建固定大小的Universe，边缘上的单元格具有较少的邻居比中间的单元格。这种方法的缺点是无限像滑翔机一样到达宇宙尽头的模式被扼杀了。

3。创建一个固定大小的周期性Universe，其中边缘上的单元格具有环绕到Universe另一侧的邻居。因为邻居环绕宇宙的边缘，滑翔机可以永远运行。

我们将实现第三种选择。

这是从本教程中，你要理解和获取的最重要的概念之一!

wasm_bindgen定义了，如何与跨边界复合结构一起工作的共识。它涉及封装Rust结构，将指针包装在JavaScript类中以实现可用性，或者从Rust索引到一个JavaScript对象表格。wasm_bindgen非常方便，但它不需要考虑我们的数据表示，以及跨越这个边界传递什么值和结构.。相反，将其视为实现您选择的接口设计的工具。

在设计WebAssembly和JavaScript之间的接口时，我们希望针对以下属性进行优化:

作为一般的经验法则，一个好的JavaScriptWebAssembly接口设计，通常是将大型，长寿命的数据结构实现，为生活在WebAssembly线性内存中的Rust类型，并作为不透明控制暴露给JavaScript.JavaScript调用，这些持有不透明控制的导出了的WebAssembly函数，转换数据，执行繁重的计算，查询数据，最终返回一个小的可复制结果。通过仅返回计算的小结果，我们避免在JavaScript垃圾收集堆和WebAssembly线性存储器之间，来回复制和序列化所有内容。

让我们首先列举一些要避免的危险。我们不希望在每次tick，都将整个Universe复制到WebAssembly线性内存。我们不希望为宇宙中的每个单元分配对象，也不想强加一个跨边界调用来读写每个单元。

这给我们留下了什么我们可以将Universe表示为，位于WebAssembly线性内存中的平面数组，并且每个单元格都有一个字节。0是一个死单元格，1是一个活单元格。

以下是4x4宇宙在内存中的样子:

要在Universe的给定行和列中，查找单元格的数组索引，我们可以使用以下公式:

在上一章中，我们克隆了一个初始项目模板.我们现在将修改该项目模板.

让我们开始删除wasm-game-of-life/src/lib.rs的alert导入和greet函数，并用单元格的类型定义替换它们:

##![allow(unused_variables)]#fnmain(){#[wasm_bindgen]#[repr(u8)]#[derive(Clone,Copy,Debug,PartialEq,Eq)]pubenumCell{Dead=0,Alive=1,}#}重要的是我们拥有#[repr(u8)]，以便每个单元格表示为单个字节。同样重要的是Dead代表0，那个Alive是1，这样我们就可以轻松地计算一个单元格的活邻居。

接下来，让我们定义宇宙(Universe)。宇宙具有宽度和高度，以及长度为width*height的单元格向量。

##![allow(unused_variables)]#fnmain(){#[wasm_bindgen]pubstructUniverse{width:u32,height:u32,cells:Vec,}#}要访问给定行和列的单元格，我们将行和列转换为单元格向量的索引，如前所述:

##![allow(unused_variables)]#fnmain(){implUniverse{fnget_index(&self,row:u32,column:u32)->usize{(row*self.width+column)asusize}//...}#}为了计算单元格的下一个状态，我们需要计算其邻居有多少是活着的。我们来写一个live_neighbor_count方法，做到这一点!

##![allow(unused_variables)]#fnmain(){implUniverse{//...fnlive_neighbor_count(&self,row:u32,column:u32)->u8{letmutcount=0;fordelta_rowin[self.height-1,0,1].iter().cloned(){fordelta_colin[self.width-1,0,1].iter().cloned(){ifdelta_row==0&&delta_col==0{continue;}letneighbor_row=(row+delta_row)%self.height;letneighbor_col=(column+delta_col)%self.width;letidx=self.get_index(neighbor_row,neighbor_col);count+=self.cells[idx]asu8;}}count}}#}live_neighbor_count方法使用deltas和modulo来避免宇宙的边缘情况。当应用-1的增量时，我们添加self.height-1，然后让modulo做它的事，而不是试图减去1。row和column可以为0，如果我们试图减去1，从他们来看，会有一个无符号整数下溢。

##![allow(unused_variables)]#fnmain(){usestd::fmt;implfmt::DisplayforUniverse{fnfmt(&self,f:&mutfmt::Formatter)->fmt::Result{forlineinself.cells.as_slice().chunks(self.widthasusize){for&cellinline{letsymbol=ifcell==Cell::Dead{""}else{""};write!(f,"{}",symbol);}write!(f,"\n");}Ok(())}}#}最后，我们定义一个构造函数，用一个有趣的活单元格和死单元格模式来初始化宇宙，以及render方法:

##![allow(unused_variables)]#fnmain(){///Publicmethods,exportedtoJavaScript.#[wasm_bindgen]implUniverse{//...pubfnnew()->Universe{letwidth=64;letheight=64;letcells=(0..width*height).map(|i|{ifi%2==0||i%7==0{Cell::Alive}else{Cell::Dead}}).collect();Universe{width,height,cells,}}pubfnrender(&self)->String{self.to_string()}}#}有了这个，我们的生命游戏Rust实现的一半就完成了!

在wasm-game-of-life目录内，通过运行wasm-packbuild重新编译为WebAssembly。

首先，让我们添加一个用于渲染宇宙的

元素到wasm-game-of-life/www/index.html，就放在另外，我们想要这个
，以网页中间为中心.我们可以使用CSSflex来完成这项任务。添加以下内容在wasm-game-of-life/www/index.js的顶端，让我们修复我们的导入来引入Universe，而不是旧的greet函数:
import{Universe}from'./wasm_game_of_life';另外，获取我们刚加的
元素，并实例化新Universe的元素:
constpre=document.getElementById('game-of-life-canvas');constuniverse=Universe.new();JavaScript运行在[一个requestAnimationFrame循环][requestanimationframe]。在每次迭代中，它将当前的Universe绘制到
，然后运行Universe::tick。
constrenderLoop=()=>{pre.textContent=universe.render();universe.tick();requestAnimationFrame(renderLoop);};要开始渲染过程，我们所要做的就是为渲染循环的第一次迭代进行初始调用:
在Rust中生成(和分配)一个String，然后有wasm-bindgen将其转换为有效的JavaScript字符串，来会生成Universe单元格的不必要副本。其实在JavaScript代码知道Universe的宽度和高度，并且可以直接从JavaScript中读取WebAssembly线性内存中的单元格字节，我们就可以修改render方法，用来返回单元数组的开头指针。
首先，让我们把pre，换成了一个(它也应该在，为了从Rust实现中获取必要的信息，我们需要为Universe的宽度，高度和指向其单元数组的指针添加更多的一些getter函数。所有这些都暴露在JavaScript中。添加这些内容wasm-game-of-life/src/lib.rs:
##![allow(unused_variables)]#fnmain(){///Publicmethods，exportedtoJavaScript.#[wasm_bindgen]implUniverse{//...pubfnwidth(&self)->u32{self.width}pubfnheight(&self)->u32{self.height}pubfncells(&self)->*constCell{self.cells.as_ptr()}}#}接下来，在wasm-game-of-life/www/index.js，我们也从wasm-game-of-life导入Cell，和让我们定义JavaScript在渲染Canvas时将使用的一些常量:
import{Universe,Cell}from'wasm-game-of-life';constCELL_SIZE=5;//pxconstGRID_COLOR='#CCCCCC';constDEAD_COLOR='#FFFFFF';constALIVE_COLOR='#000000';现在，让我们重写当前的JS代码(导入除外)，不再写入
的textContent，而是专注在:
//构造theuniverse，andgetitswidthandheight.constuniverse=Universe.new();constwidth=universe.width();constheight=universe.height();//Givethecanvasroomforallofourcellsanda1pxborder//aroundeachofthem.constcanvas=document.getElementById('game-of-life-canvas');canvas.height=(CELL_SIZE+1)*height+1;canvas.width=(CELL_SIZE+1)*width+1;constctx=canvas.getContext('2d');constrenderLoop=()=>{universe.tick();drawGrid();drawCells();requestAnimationFrame(renderLoop);};为了在单元格之间绘制网格，我们绘制一组等间隔的水平线和一组等间距的垂直线。这些线纵横交错形成网格。
constdrawGrid=()=>{ctx.beginPath();ctx.lineWidth=1/window.devicePixelRatio;ctx.strokeStyle=GRID_COLOR;//Verticallines.for(leti=0;i<=width;i++){ctx.moveTo(i*(CELL_SIZE+1)+1,0);ctx.lineTo(i*(CELL_SIZE+1)+1,(CELL_SIZE+1)*height+1);}//Horizontallines.for(letj=0;j<=height;j++){ctx.moveTo(0,j*(CELL_SIZE+1)+1);ctx.lineTo((CELL_SIZE+1)*width+1,j*(CELL_SIZE+1)+1);}ctx.stroke();};我们可以直接通过memory拿到WebAssembly的线性内存，而这个memory由原生wasm模块wasm_game_of_life_bg提供。为了绘制单元格，我们拿到universe'scells的指针，构造一个覆盖单元格缓存的Uint8Array，迭代每个单元格，并分别根据单元格是死还是活，绘制白色或黑色矩形。通过使用指针和覆盖，我们避免在每次tick上跨边界复制单元格。
//文件顶部，导入WebAssemblymemoryimport{memory}from'./wasm_game_of_life_bg';//...constgetIndex=(row,column)=>{returnrow*width+column;};constdrawCells=()=>{constcellsPtr=universe.cells();//
requestAnimationFrame(renderLoop);请注意，在执行requestAnimationFrame()之前，我们要调用drawGrid()和drawCells()。我们这样做的原因是，在我们进行修改之前，绘制宇宙的初始状态。如果我们改为简单地调用requestAnimationFrame(renderLoop)，我们最终得到的第一帧实际的绘制情况是，在第一次调用universe.tick()后，也就是这些单元格生命状态的第二次“tick”。
通过在根wasm-game-of-life目录中运行此命令，来重构建WebAssembly和绑定粘合剂:
wasm-packbuild确保您的开发服务器仍在运行。若没有，请从wasm-game-of-life/www目录内部再次启动:
您可以checkoutchapter-one分支找到完整代码.
答案
##![allow(unused_variables)]#fnmain(){//确保你添加此依赖到了Cargo.toml!externcratefixedbitset;usefixedbitset::FixedBitSet;//...#[wasm_bindgen]pubstructUniverse{width:u32,height:u32,cells:FixedBitSet,}#}可以通过以下方式调整Universe构造函数:
##![allow(unused_variables)]#fnmain(){pubfnnew()->Universe{letwidth=64;letheight=64;letsize=(width*height)asusize;letmutcells=FixedBitSet::with_capacity(size);foriin0..size{cells.set(i,i%2==0||i%7==0);}Universe{width,height,cells,}}#}要更新宇宙的下一个tick中的单元格，我们使用FixedBitSet的set方法:
##![allow(unused_variables)]#fnmain(){next.set(idx,match(cell,live_neighbors){(true,x)ifx<2=>false,(true,2)|(true,3)=>true,(true,x)ifx>3=>false,(false,3)=>true,(otherwise,_)=>otherwise});#}要将指向开头位的指针传递给JavaScript，您可以转换FixedBitSet到切片，然后将切片转换为指针:
##![allow(unused_variables)]#fnmain(){#[wasm_bindgen]implUniverse{//...pubfncells(&self)->*constu32{self.cells.as_slice().as_ptr()}}#}在JavaScript中，构建Wasm的内存成一个Uint8Array，与之前相同，只是数组的长度不再是width*height，而是width*height/8，因为我们一个位有一个单元，而不是字节(8位):
constcells=newUint8Array(memory.buffer,cellsPtr,(width*height)/8);给出一个索引和Uint8Array，你可以确定是否使用以下函数设置nth位:
constbitIsSet=(n,arr)=>{letbyte=Math.floor(n/8);letmask=1<
constdrawCells=()=>{constcellsPtr=universe.cells();//这时，已更新constcells=newUint8Array(memory.buffer,cellsPtr,(width*height)/8);ctx.beginPath();for(letrow=0;row