趣味javascript程序

遗传算法解决旅行商问题（TSP）

2014年11月16日 其它JS程序 算法

旅行商问题（TSP）是经典的NP完全问题，也经常被程序员们用来测试和练习各种算法的效率。这是我写的一个纯粹练手的程序，还未完善，随后应该会稍作改进，增加更多的设定选项和更好的遗传生成算法。

Continue reading →

发表回复

素数螺旋

2014年6月24日 知乎相关、网页动画 数学、素数、质数

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

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

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

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

Continue reading →

有一条评论

WWDC 2014海报的彩虹特效

2014年6月7日 知乎相关、网页动画

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

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

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

Enjoy it.

Continue reading →

查看所有4评论

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

2014年1月11日 知乎相关、网页动画 数学、约瑟夫斯问题

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

问：一开始站在哪个位置才能活下来？

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

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

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

Continue reading →

查看所有2评论

HTML5入门习作2：炮台

2013年12月26日 网页动画

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

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

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

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

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

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

操作提示：

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

Continue reading →