水果忍者JS版 Dron出品

ucren官方博客发布的水果忍者JS版，作者是个高手，好像现在在百度任职

绘图上，仍然是采用了 vml+svg，这是我一直比较推荐的组合，不过不要一听 vml、svg 等就头大，市面上针对 vml、svg 封装的库还是瞒多的，我用得比较顺手的就 Raphael 了，她的 API 非常简单，支持链式调用，浏览器的兼容性一直很让人满意。在开发水果忍者时，我手贱升级了一把 Raphael 2.1.0，发现性能比较低，又一直找不到原因，无奈又得降回了 1.5，值得注意的是，2.1.0 的 API 并不完全兼容 1.5，其中 rotate/scale/translate 等 API 被标识为即将弃用而使用 transform 替代，并且 rotate/scale 这两个接口使用 transform 代替时，不能完美支持像 rotate/scale 原有的功能（或我不知怎么用）。

搞定了绘图，其它的都比较简单了，因为涉及到动画，这里还需要两样东西：那就是 tween 和 timeline，tween 提供一系列关于动画路径运算的公式，在本游戏当中，我用到哪个公式就摘抄哪个，这些公式没有必要自己推导，反正最后推出来的结果跟 tween 给的是一样的；timeline 用于做全局的时间管理，可以给它挂上无数个任务，什么时间该进行什么事情就不用管了，timeline 会帮你处理，timeline 的实现原理十分简单，我没有在业界上找现成的库，而是自己封装了一把，大概能实现任务管理就行了，至于代码，等下周开源了感兴趣的同学可以去 git 上 clone 下来露一眼。

场景控制：一个专门管理场景切换的脚本，它提供类似于 switchSence 的接口，通过接口来进行场景的切换，本游戏设计了“菜单”、“游戏界面”、“DOJO界面”以及“GameOver”等场景。

游戏采用了 commonJS 的规范来管理模块，由于模块之间需要通讯，除了 require 之外，message 和 state 两个模块也是解藕的两大利器，message 是消息管理器，提供 postMessage 和 addEventListener 两个接口，分别用于发送和接收消息；state 是状态管理器，提供数个关于状态读写的接口。

layer.js 在游戏当中做为 Raphael 库的一个补充，主要解决 Raphael 管理图层不是很方便的问题，Raphael 只有 toFront 和 toBack 两个关于图层顺利控制的接口，如果想精准定位某个元素处于某个层次就不是很方便了，为了弥补，layer.js 中维护了一个图层 mapping，每个图层的 z 索引值在这个 mapping 中进行记录，哪些元素要放于什么层次在游戏逻辑中可以很方便地设置。

collide 模块在游戏中专门用于做碰撞检测运算，这里，collide 只关心线段与椭圆之间的关系，因为刀路过的痕迹与水果可以分别看成是线段的拼接和椭圆。

此外，游戏的脚本中还包括“模块工厂”和“对象包”两个东西，“模块工厂”里存放着几个模块模型，通过这些模型可以衍生出来任意个类型相同的模块，有点像模块级别的继承，由于是工厂模式创建的，所以管它叫模块工厂；“对象包”里则放着每一个元素对应的控制脚本，游戏主逻辑通过对象包中的对象去操纵元素。

最后，还有两个脚本 control.js 和 main.js，control.js 主要负责管理人机交互部分的逻辑，main.js 则管理游戏主线业务逻辑。
好了，暂时就介绍这些，光读文章，也许你会看到比较晕，有兴趣的同学等我把源码再整理整理，开源之后再拉下来读。