html5游戏引擎phaser官方示例学习

首发：个人博客，更新&纠错&回复

phaser官方示例学习进行中，把官方示例调整为简明的目录结构，学习过程中加了点中文注释，代码在这里。

目前把官方的完整游戏示例看了一大半，

breakout是敲砖块，gemmatch是钻石消除，invaders是小蜜蜂，matching是配对，simon是记忆游戏，sliding是拼图，starstruck类似超级马里奥，tanks是坦克游戏。

游戏场面上看，敲砖块、小蜜蜂是竖版，超级马里奥是横版，坦克游戏是俯瞰，钻石、配对、记忆、拼图这四个都是棋盘。

界面构成上看，棋盘类游戏基本都用到了瓦块图，砖块蜜蜂和坦克是基本精灵，马里奥是瓦块和精灵组合。

瓦块图的绘制使用Tiled进行可视化绘制，绘制完生成json文件，该文件即保存了世界的结构，这个还在摸索。瓦块图的素材网上有很多，其实RPGMaker各个版本自带的素材就不错，它们自带的效果素材如爆炸什么的也可以在phaser中使用，行走图也能用。

因为phaser自身支持动画，定义精灵的时候除了可以指定一张简单图片，还可以指定一张包含了许多帧的大图片（其实只使用其中的一帧如砖块钻石，或者将其中的许多帧一起作为动画使用如小蜜蜂的敌机），甚至可以指定多张图片来形成动画（坦克例子有所演示），除此之外也可以将多个精灵组成一个逻辑精灵（也是坦克例子演示的，车身、炮塔、阴影分别是不同的精灵）。

敌人精灵的行为，简单的就在主循环update方法里为之写逻辑，例如小蜜蜂的敌机，复杂点的可以把敌人定义个类，用prototype的方式编写实例方法，在update方法中遍历之调用某方法，甚至你可能将多个不同类的敌人放到同一个数组里，调用它们的同名方法即可，这有点像java的多态特性，但javascript是弱类型的。

玩家的行为，分为鼠标操作和键盘操作，键盘操作在主循环update里判断是否按下，如果不想太频繁地响应用户操作，可以用个变量保存上次操作时间，再有操作看看其间是否已隔了足够多的毫秒数，否则就不处理，这种“临界值”的使用各个例子中很常见。

鼠标操作可以在主循环判断鼠标键是否按下，更直观的是为精灵添加按下/释放/移动..等响应函数，当鼠标在精灵上做了操作直接调用函数，钻石游戏是很好的演示。至于鼠标的位置，棋类游戏可以把其先转化为在棋盘中的哪一格，得到行数列数再处理，而坦克游戏则直接使用指针的位置来作为目标旋转炮塔和发炮。

游戏中可以用重复而自连接的小图片作为背景，类似现实中地砖或床单上的图案，其实是一个精灵，锁定在屏幕上，你自己来写代码让它卷动，例如小蜜蜂自动将星空向下滚类似飞机在向上飞，而坦克游戏则是向坦克的移动方向反方向卷，看着效果就是坦克和地面的相对位置变化与现实中一致，至于超级马里奥游戏，干脆不卷了，这是因为画面上的地图元件已经足够呈现移动的效果。

配对、记忆、拼图都有“电脑知道而玩家不一定记得”的信息，例如配对游戏中每个格子背后的画是什么，记忆游戏到底出的题目的数字序列是什么，拼图游戏成功时每个碎片应该在什么位置，这些信息当然存在游戏的全局变量里，另外例如坦克游戏里敌人坦克的血量，则由敌人坦克类的一个属性保存。游戏状态的保存使用什么编程元素都可以，可以想到的还有html5的本地存储甚至数据库，甚至是用ajax或者websocket存到服务器上。

记忆游戏有“关卡”的概念，而小蜜蜂游戏当三条命死绝之后有点击重新开始游戏的功能，这些进入新关卡或者重新开始游戏，当然不要location.reload，也不要重新初始化dom之类这样大张旗鼓的事，其实重新开始游戏只是逻辑上的重新开始，将全局变量重设为初始状态（过关则是关卡数加一其他数据清零），并重新显示适当的交互信息即可，例如播放动画、提示用户点击开始什么的。

棋盘类游戏中的精灵，既有坐标，也有身处第几行、第几列的概念，游戏逻辑中当然是用行数列数写逻辑最合理，当要移动棋子时，则使用坐标编写动画语句优美地滑过去，而行数列数则直接指定，代表“该在哪儿”。

小蜜蜂和坦克有炮弹和爆炸的临时精灵，用“池”来预先初始化一批这样的精灵，用到就取出，用完再归还，与数据库的连接“池”、服务器的线程“池”是相同的思想，避免对象过多。炮弹打到敌人坦克/飞机上时的事件，则是主循环中检测接触，如果接触则做点什么，比如销毁炮弹、播放动画效果、敌人血量减少甚至死亡。

目前的体会就这些，总结核心的关键点是主循环、精灵、全局状态、玩家行为、精灵策略，当然还有tile地图。

长期欢迎项目合作机会介绍，项目收入10%用于酬谢介绍人。新浪微博：@冷镜，QQ：908789432。