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

1699人阅读 评论(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地址

查看评论

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

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

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

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

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

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

使用React来实现一个简单的贪吃蛇游戏

github地址:https://github.com/YangLin2510/snake_game最近学习了一下React前端开发框架,可以基于组件来开发可复用的前端界面。写一个小项目来综合练习下创...
  • a963214153
  • a963214153
  • 2018-03-01 14:48:47
  • 55

用javascript实现元胞自动机的生命游戏

演示效果如下: 源代码如下: lifeGame     #canvas1{     margin: 50px auto;     display: block;  ...
  • qq_22187867
  • qq_22187867
  • 2016-05-07 12:06:23
  • 384

HTML5版本的生命游戏

初学HTML5,写了一个程序练练手。
  • lifegame
  • lifegame
  • 2011-05-02 21:23:00
  • 5297

生命游戏简介及算法分析(整理)

生命游戏 生命游戏(game of life)为1970年由英国数学家J. H. Conway所提出,某一细胞的邻居包括上、下、左、右、左上、左下、右上与右下相邻之细胞。 规则 生命游戏中,对于任意细...
  • u011439689
  • u011439689
  • 2013-12-09 17:20:12
  • 5033

Conway: 游戏人生

Conway: 游戏人生发信人: dionysus (悲剧的诞生)本文首发于《心桥》第26期,此处略有改动。Conway: 游戏人生    上帝是怎样创造这个世界的?按照《圣经》的说法,第一天他在一片...
  • Suprman
  • Suprman
  • 2007-01-17 10:58:00
  • 2649

基于ReactNative的跨平台俄罗斯方块游戏的实现2——搭建游戏整体框架

在上一篇中我介绍了使用React Native开发的跨平台俄罗斯方块小游戏,截图和代码都在上一篇中。本篇记录的是如何来实现这个小游戏的框架。如果你还不了解React Native,可以参考Rea...
  • yubo_725
  • yubo_725
  • 2018-03-07 10:36:35
  • 44

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

http://elevenbeans.github.io/2017/04/05/Game-of-life/ 这是有名的康威生命游戏, 描述的是一种细胞自动机。 对一个 M*N 的区域,每一...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-14 12:25:15
  • 1699
    个人资料
    持之以恒
    等级:
    访问量: 367万+
    积分: 3万+
    排名: 159
    最新评论