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。