水果忍者 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 则管理游戏主线业务逻辑。

好了,暂时就这些。