JavaScript实现生命游戏的方法

　　介绍

这篇文章主要介绍JavaScript实现生命游戏的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

JavaScript是一种什么语言

JavaScript是一种动态类型,弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端网络开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如节点。js .

概念介绍

元胞自动机(细胞自动机),是20世纪50年代初由计算机之父冯·诺依曼(约翰·冯·诺依曼)为了模拟生命系统所具有的自复制功能而提出来的。

生命游戏(游戏的生活),或者叫它的全称约翰·康威# 39;年代的游戏生活,是英国数学家约翰·康威在1970年代所发明的一种元胞自动机。

逻辑规则

在二维平面方格里,每个细胞有两种状态:存活或死亡,而下一时刻的状态完全受它周围8个细胞的状态而定。

这个世界有三条演化规则:

<李>

当周围有2个存活细胞时,该细胞生命状态保持原样;

<李>

当周围有3个存活细胞时,该细胞为存活状态(死亡细胞会复活);

<李>

当周围存活细胞低于2个时(生命数量稀少)或周围超过3个存活细胞时(生命数量过多),该细胞为死亡状态。

基本结构

index.html ,,//,主页面,初始化系统,控制系统运行等 　　canvas.js ,,,//,渲染层,创建画布,手动绘制,画布更新方法等 　　LifeGame.js ,//,逻辑层,创建运行系统,系统运行逻辑,数据更新等

主要实现

系统配置:定义二维平面方格尺寸,数据中以键值形式存储了所有细胞的生命状态,执行是画布。js暴露出来的内部方法,挂载到配置对象上。

,, const  config =, { 　　,,,宽度:,100,,//,横向细胞数量 　　,,,身高:,100,,//,纵向细胞数量 　　,,,尺寸:,4,+,1,,//,细胞大小,细胞间距,1 px 　　,,,速度:,200,,//,细胞迭代速度 　　,,,活着:,& # 39;# 000000 & # 39;,,//,细胞存活颜色 　　,,,死:,& # 39;# ffffff # 39;,,//,世界颜色(细胞死亡颜色) 　　,,,数据:,new 地图(),,//,系统运行数据 　　,,,执行,,//,更新画布方法 　　,,},

规则实现:遍历二维平面里每个细胞,拿到当前的细胞状态,计算其周围存活细胞的数量,判断其下一时刻是存活还是死亡,并将这个状态保存下来,通过调用渲染层的更新画布方法来执行更新界面显示。这里在处理数据数据时没有用二维数组表示二维坐标系,而是将其转换为一维线性表示,将数据保存在地图中。

,,//LifeGame.js//才能,二维坐标系一维线性表示 　　const 才能;MakeKey =, (=x  0,, y =, 0),=祝辞,y  *, 10000, +, x; 　　 　　function 才能;refreshWorld (), { 　　,,,const  next =, new 地图();,//,更新后的系统运行数据 　　,,,//,迭代二维坐标系所有元素 　　,,,IterateCells(配置,(x, y),=祝辞,{ 　　,,,,,const  index =, MakeKey (x, y);,//,计算坐标对应的,钥匙 　　,,,,,const  current =, config.data.get(指数);,//,当前细胞状态 　　,,,,,//,计算当前细胞周围存活细胞的数量 　　,,,,,switch  (borderSum (x, y)), { 　　,,,,,,,case  2: 　　,,,,,,,,,//,当周围有,2,个存活细胞时,该细胞保持原样。 　　,,,,,,,,,next.set(指数,电流); 　　,,,,,,,,,休息; 　　,,,,,,,case  3: 　　,,,,,,,,,//,当周围有,3,个存活细胞时,该细胞为存活状态。 　　,,,,,,,,,next.set(指数,,真的); 　　,,,,,,,,,! current ,,, config.execute (x, y,,真的),,//,状态变化,更新画布 　　,,,,,,,,,休息; 　　,,,,,,,默认值: 　　,,,,,,,,,//,当周围的存活细胞低于,2,个时,该细胞为死亡状态。(生命数量稀少) 　　,,,,,,,,,//,当周围有超过,3,个存活细胞时,该细胞为死亡状态。(生命数量过多) 　　,,,,,,,,,next.set(指数,假); 　　,,,,,,,,,current ,,, config.execute (x, y,,假),,//,状态变化,更新画布 　　,,,,,,,,,休息; 　　,,,,,} 　　,,,,,return 真实; 　　,,,}); 　　,,,return 下; 　　以前,,}

系统的启动与停止

,,//LifeGame.js 　　,,//,才能开启系统 　　function 才能;startWorld (), { 　　,,,stopWorld();,//,停止之前启动的循环 　　,,,//,根据迭代速度启动系统,循环更新系统 　　,,,interval =, setInterval((),=祝辞,(=config.data  refreshWorld ()),, config.speed  | |, 500); 　　,,,starting =,真的,,//,开启启动标识 　　,,,return 真实; 　　,,}//,才能关闭系统,当前系统运行数据保留 　　function 才能;stopWorld (), { 　　,,,clearInterval(间隔);,//,停止循环 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

JavaScript实现生命游戏的方法