爱心鱼小游戏

@(博客)[HTML5,canvas]

这个是小游戏是参考慕课网上Daisy老师做的，自己做了一点改进。如，在果实（可以被 大鱼妈妈吃的橙色和蓝色果实）在实现中，原来是采用果实池（也就是果实数组）。所有的果实（30个）都在这个果实池里，果实有两种状态：一个是在果实池中，alive[i]为false；一种是出生后可以被吃，alive[i]为true。其思想是时刻遍历整个果实池，计算果实池中alive[i]为true的数量，一旦少于15个，就得产生一个果实。

所以这里的问题就是：本来游戏每帧要计算的东西就很多，如果用上面的方法来控制果实，时间复杂度是：O(每帧的时间 * n^2)。于是我改了一种思路：果实池还是保留（总数只剩下一半，即15个），在初始化的时候把所有的果实都产生出来。在果实被吃掉或者超出屏幕的时候，直接让其重新出生即可。时间复杂度为：O(每帧的时间 * n)。

还改了一些小问题，并优化了一下。

另外添加了几个小功能：

1. 增加了开始游戏的页面。
2. 调整了游戏的难度和可玩性。
3. 增加了level记录通关数，主要体现在：小鱼的饥饿程度会随着level的数值变大而变得更快饥饿。
4. 增加了记录最高分数的功能。
5. 取巧性地做了游戏的重新开始功能。
6. 添加了背景音乐，以及吃果实、喂果实的音效。

做这个游戏应用到了很多canvas的API，还有一些做动画的技巧。通过实践，能够把这些API和技巧领悟得更深。如果想学canvas的话，去跟着老师做一遍，大概就能学会了。当然，我推荐像我这样：跟着老师做完后，还要自己去把思路整理一遍。这样会把知识掌握得更牢固！

总之，canvas入门首选实战：Daisy的爱心鱼

我改进后的游戏体验：http://wingmrl.github.io/code/tinyHeart/index.html