分类: 网页动画

生命游戏模拟器

生命游戏(Game of Life),或者叫它的全称John Conway's Game of Life。是英国数学家约翰·康威在1970年代所发明的一种元胞自动机。
所谓元胞自动机其实是一种离散的状态机,即无数个独立的格子,每个格子处于某种状态,然后所有格子按照预先设定好的规律进行状态演化。格子们可以是任意维度、任意形状、按任意规律排布的。
而生命游戏就是最简单的元胞自动机之一——在二维平面上的方格子(细胞),每个细胞有两种状态:死或活,而下一回合的状态完全受它周围8个细胞的状态而定。按照以下三条规则进行演化:
1. 活细胞周围的细胞数如果小于2个或多于3个则会死亡;(离群或过度竞争导致死亡)
2. 活细胞周围如果有2或3个细胞可以继续存活;(正常生存)
3. 死细胞(空格)周围如果恰好有3个细胞则会诞生新的活细胞。(繁殖)
这三条规则简称B3/S23。如果调整规则对应的细胞数量,还能衍生出其他类型的自动机。

以上是对生命游戏这个概念的解释,而我2013年时为它编写了一个js版的模拟器,作为个人项目练习之用。具体解释和功能介绍详见知乎专栏:个人项目开发示例:生命游戏

这里只是为了放个地址方便访问。

点击打开模拟器

素数螺旋

本文启发自知乎问题:极坐标表示 5000 到 50000 之间的素数画点到纸上为什么会形成一条斐波那契螺旋线?

把一个自然数n用极坐标表示,也就是在坐标(n*cos n,n*sin n)的位置绘制一个点;而当你把所有素数绘制到纸上之后,会发现它是一个包含了许多条空白线条的圆形:

很显然,空白是合数导致的,但为什么合数会排列成一条条曲线呢?

王小龙已经做了精彩的回答。不过为了更直观地理解,我写了这个小程序:

[阅读全文]

WWDC 2014海报的彩虹特效

这个有趣的小程序出自知乎问题:WWDC 2014 的海报是怎么做出来的?

本程序使用HTML5+JS进行开发,可以将任意图片转换成WWDC2014海报的样式:用色调如彩虹般绚丽的圆角矩形来拼成原图。

里面已经预置了几个图形,只要点最上面的按钮即可切换;当然,最有意思的是在右边上传本地硬盘的图片,不管是什么图,都能转换成海报上的效果。
(上传图片需较新版本的IE、FF、Chrome浏览器才能支持,建议使用浅色背景、深色图案的)

Enjoy it.

[阅读全文]

约瑟夫斯问题:最后生还者

有这么一个古老的问题:一群死刑犯排成圆圈,每隔一人枪毙一个,转完一圈后从头开始继续枪毙,直到剩下最后一个人,这个幸运儿会被释放。

问:一开始站在哪个位置才能活下来?

这就是著名的约瑟夫斯问题,排成的圆圈叫做约瑟夫斯环。

(当然,隔一人只是个特殊情况,约瑟夫斯问题包含了间隔任何人数的计算方法)

在上面维基百科的链接以及知乎的答案里已经有了通用的计算方法,这里就不必讲什么公式和证明了,而是直接用图形来演示:

[阅读全文]

HTML5入门习作2:炮台

上一篇中,初学html5动画的我在canvas画布上用彩色小球模拟了烟花喷射的效果,功能虽简单,但在制作中涉及到了几个要点:计算、绘制、显示。而且实现了可兼容旧版的requestAnimationFrame方法,以达到更平滑的动画效果。

接下来,我准备在上一篇的基础上加以改进,实现一个有简单互动的小游戏。

当然,只有小球是远远不够用的,在边调试边开发的过程中,下列功能也逐一实现:

  • 封装动画框架到单独js文件(代码复用);
  • 生成多边形(绘制炮台);
  • 渐变填充(绘制防卫区);
  • 角度计算(发射扇面形散布的炮弹);
  • 碰撞检测(炮弹击中目标,以及目标撞墙后的反弹);
  • 鼠标事件(实时调整炮口方向);

以及之前实现过的渐隐对象,用于显示摧毁后的爆炸效果、全屏闪烁以及文字提示。

那么,先看看效果再讲解代码吧。

操作提示:

  • 鼠标控制炮口方向,炮弹自动发射;
  • 击坠10、20、40、80、160……个目标时会升级,升级后某个炮台威力会增加,相应的,敌人数量也会增加;
  • 上方中央的“@”表示HP,敌人触底一次则减少一格;
  • GameOver后,点击屏幕重新开始。

[阅读全文]