关闭

用 React + es6 完成一个著名的生命游戏(Game of life,Conway)

1384人阅读 评论(0) 收藏 举报
分类:

http://elevenbeans.github.io/2017/04/05/Game-of-life/

这是有名的康威生命游戏, 描述的是一种细胞自动机。

对一个 M*N 的区域,每一个位置有两种状态,1为活细胞,0为死细胞,对于每个位置都满足如下的条件:

  1. 如果活细胞周围八个位置的活细胞数少于两个,则该位置活细胞死亡

  2. 如果活细胞周围八个位置有两个或三个活细胞,则该位置活细胞仍然存活

  3. 如果活细胞周围八个位置有超过三个活细胞,则该位置活细胞死亡

  4. 如果死细胞周围正好有三个活细胞,则该位置死细胞复活

我们用置换方法 in-place 来解题,不新建一个相同大小的数组,只更新原有数组。所有的位置在同一个周期必须被同时更新,但是在循环程序中我们还是一个位置一个位置更新的,那么当一个位置更新了,这个位置成为其他位置的 neighbor 时,我们怎么知道其未更新的状态呢,我们可以使用状态机转换:

状态0: 死细胞转为死细胞 (dead 黑色)

状态1: 活细胞转为活细胞 (old 红色)

状态2: 活细胞转为死细胞 (dead 黑色)

状态3: 死细胞转为活细胞 (young 粉色)

最后我们对所有状态对2取余,那么状态0和2就变成死细胞,状态1和3就是活细胞。

我们先对原数组进行逐个扫描,对于每一个位置,扫描其周围八个位置,前序细胞(左上/中上/右上/左)如果遇到状态1或2,就计数器累加1,后续细胞(右/右下/中下/左下)遇到取余为1,计数器也累加1。
扫完8个邻居,如果少于两个活细胞或者大于三个活细胞,而且当前位置是活细胞的话,标记状态2,如果正好有三个活细胞且当前是死细胞的话,标记状态3。

完成一遍扫描后对数据更新一遍,变成我们想要的结果。

GitHub repository

Demo地址

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

基于Canvas和React极简游戏(二)

暂停处理游戏业务逻辑是与React组件联系比较紧的。 暂停处理的React组件如下所示: import React from 'react'; import './Pause.scss'; imp...
  • jlin991
  • jlin991
  • 2017-03-22 14:57
  • 718

一个关于生命游戏的程序

生命游戏小程序 罗锐鑫,陈佳俊 题目概述:        它包括一个二维矩形世界,这个世界中的每个方格居住着一个活着的或死了的细胞。一个细胞在下一个时刻生死取决于相邻八个方格中活着的或死了的...
  • ClearCCL
  • ClearCCL
  • 2017-04-29 17:52
  • 142

生命游戏HTML5 Canvas代码

生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。它最初于1970年10月在《科学美国人》杂志中马丁·葛登能(Martin Gardner,1914年11月21日-2010年5月22日...
  • gscienty
  • gscienty
  • 2015-02-13 02:56
  • 1179

基于Canvas和React极简游戏(一)

游戏设计思路游戏引擎:游戏循环,游戏原型 我把这个 miniGame的实现看作是业务逻辑的实现。 因为我希望我的react组件可以复用,而不是嵌入太多业务逻辑的代码。 所以import 这个mi...
  • jlin991
  • jlin991
  • 2017-03-19 11:13
  • 1650

ReactJS实战之简易弹球游戏的实现

这一篇记录的是使用ReactJS完成一个简易的弹球游戏,游戏在浏览器中运行的效果图如下所示: 鼠标在游戏面板中左右移动控制挡板的水平移动。下面一步一步实现这个简单的游戏。 首先,我们需要知道如何在...
  • yubo_725
  • yubo_725
  • 2016-08-04 16:27
  • 1413

基于Canvas和React极简游戏(二)

暂停处理游戏业务逻辑是与React组件联系比较紧的。 暂停处理的React组件如下所示: import React from 'react'; import './Pause.scss'; imp...
  • jlin991
  • jlin991
  • 2017-03-22 14:57
  • 718

生命游戏(Java)

生命游戏(Game of Life、GoL) Java实现
  • yqj2065
  • yqj2065
  • 2015-09-05 12:43
  • 3164

ReactJS实战之简易弹球游戏的实现

这一篇记录的是使用ReactJS完成一个简易的弹球游戏,游戏在浏览器中运行的效果图如下所示: 鼠标在游戏面板中左右移动控制挡板的水平移动。下面一步一步实现这个简单的游戏。 首先,我们需要知道如何在...
  • yubo_725
  • yubo_725
  • 2016-08-04 16:27
  • 1413

康威生命游戏的学习

于实验楼上发现了康威生命游戏。转载生命游戏的实验内容。 康威生命游戏,又称康威生命棋,是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。 它最初于1970年10月在《科学美国人》杂志上马丁...
  • Gold_Experience
  • Gold_Experience
  • 2015-08-14 20:50
  • 5969

生命游戏HTML5 Canvas代码

生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。它最初于1970年10月在《科学美国人》杂志中马丁·葛登能(Martin Gardner,1914年11月21日-2010年5月22日...
  • gscienty
  • gscienty
  • 2015-02-13 02:56
  • 1179
    个人资料
    • 访问:2973340次
    • 积分:28890
    • 等级:
    • 排名:第208名
    • 原创:122篇
    • 转载:1964篇
    • 译文:0篇
    • 评论:261条
    最新评论