水果忍者 JS 版

2012-07-13 by Dron

今天把憋了 N 久的水果忍者游戏通过 JS 小组的官微 进行了首发。

出乎意料的收获是：JS 小组的官微一下子涨了 300+ 个粉丝，也遇到不少人来问关于实现上的事，这篇博文里，我将做下简单的介绍。

Demo: http://ucren.com/demos/fruit-ninja/

绘图上，仍然是采用了 VML+SVG，这是我一直比较推荐的组合，市面上针对 VML、SVG 封装的库还是满多的，我比较顺手的就 Raphael 了，她的 API 非常简单，支持链式调用，浏览器的兼容性做得很不错。

在开发水果忍者时，我升级了一把 2.1.0 版本，发现性能比较低，又一直找不到原因，无奈又得降回了 1.5.0，值得注意的是，2.1.0 的 API 并不完全兼容 1.5.0，其中 rotate/scale/translate 方法被标识为即将弃用而使用 transform 替代，并且 rotate/scale 这两个接口使用 transform 代替时，不能完美支持像 rotate/scale 原有的功能。

动画方面，主要涉及两个模块：tween 和 timeline，tween 提供一系列关于动画路径的算子；timeline 用于做全局的时间管理。

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

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

layer.js 在游戏当中做为 Raphael 库的一个补充，扩展了图层管理的能力，Raphael 只有 toFront 和 toBack 两个关于图层顺利控制的接口，想精准定位某个元素处于某个层次不是很方便，作为弥补，layer.js 中维护了一个图层 mapping，每个图层的 z 索引值在这个 mapping 中进行记录。

collide 模块用于做碰撞检测运算，这里，collide 只关心线段与椭圆之间的关系，因为刀路过的痕迹与水果可以抽象成线段的拼接和椭圆。

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

最后，还有两个脚本 control.js 和 main.js，control.js 主要负责管理人机交互部分的逻辑，main.js 则管理游戏主线业务逻辑。

好了，暂时就这些。