初识一个框架或引擎，我的方式是，通读一遍文档，懂或不懂读完它，然后有官方例子的话跟着官方实例手撸一遍，没有的话找找看有没有其它人贡献的代码，选个质量高的能运行的，同样跟着手撸一遍，再没有…那就只能放项目中遇到一个坑查文档翻社区填一个坑了。

因为刚进部门的时候整个项目编码还没有开始，也是部门的第一个H5游戏项目，完全没有之前的代码可以参考，所以我的第一个游戏是layabox的官方实例，微信飞机大战。
长这样：

把这个需求拆分一下，分数栏、背景、飞机、子弹、结算面板。

图中有很多种飞机，敌机我机，敌机又分不同形状，甚至很多飞机游戏中子弹也分很多种，威力不一样，效果不一样，但是其实透过现象看本质，它们的行为都是一样的，比如不管什么飞机，它都可以发射子弹，也有类似的动作–这里的“动作”是指经历某些逻辑或某个参数达到某个值，对象自身所播放的动画，比如飞机被打中后会播放自身销毁的动画。所以其实我们只要编写这个抽象出来的对象自身的逻辑，然后根据设定的参数给之相应的贴图及动画即可。这样想这个游戏的实现就很简单了，无非是监听参数变化->执行相应逻辑。

首先，2d游戏，canvas画出场景，静态的分数栏、背景图、飞机对象、子弹对象、结算文字，可以都封装成单独的类，不过其实复杂的话可以把场景中一些字幕合并在一个类中，控制显示隐藏，这样做的条件是这些字幕在比较短的时间内都有可能会出现，可以避免每次实例化带来的内存浪费，当然，如果一个类过大并且很多资源是一时半会用不到的就没有必要这样做了。
罗列一下这些对象自身以及和其它类的交互逻辑。

分数栏
分数：销毁敌机后改变文字 等级：分数达到一定值后自增 暂停按钮：触发点击事件后暂停游戏并改变自身贴图

背景
不断滚动。原理是用两张一模一样的图拼接，然后改变背景图的位置，造成飞机在移动的错觉。

飞机
跟随鼠标移动、检测自己飞机与敌机碰撞、飞行动画、击中动画、销毁动画…

子弹
出现、移动、消失、检测自己与飞机的碰撞……

结算面板
检测到被其它飞机或子弹碰撞后出现、停止画布中所有动画、点击初始化游戏

这样分析其实整个游戏就基本实现了，剩下的就是实例的生成销毁等等。

这里有个帧循环的概念，比如背景图每帧改变位置，每隔多少帧随机出现敌机，当然，这个可以用setTimeOut或setInterval做的，但是简单的游戏还好，复杂一点的游戏很多定时器万一有定时器忘了清除就gg了，定时器一多也不是很好管理，所以如果是一场游戏的主循环，还是推荐使用requestAnimationFrame，具体和定时器的区别、优劣比较之后会细说。

其实整个开发过程，我觉得最有难度的还是类的拆分和设计，设计得不好会产生很多隐患。

如何学习游戏开发

官方文档及社区

不管什么时候，官方文档及社区永远是你的最大保障，论坛管理员永远是你的小天使，不必多说。

其它游戏引擎文档及社区

有个问题是，你所用的游戏引擎和社区不一定成熟到可以解决你所遇到的任何问题，甚至大多数问题。这时候可以溜入一些比较成熟的游戏引擎官网或社区学习学习，不必管是什么语言，自己能不能用得上，因为很多游戏引擎的概念、思路甚至api乃至类名都差不多，上手一个后再阅读其它引擎的文档就很容易了，在一些社区里可以看到更多的解决方案，有时候会更容易找到自己想要的。

直接阅读源码

有些引擎代码写的比文档清晰多了，直接看源码有时候更容易知道为什么会引发这个问题，该怎样避免。

了解基本的游戏概念

当然解决问题不可避免要google，可是要怎样google呢？一大串文字描述一个行为？其实在游戏世界里很多行为是有自己专门的名称的，这个就需要多看多收集了，看到过一篇文章整理了一些游戏中常见的行为(原文链接)，票圈一位大大也给翻译了一下(译文),了解这个还有一个好处是对看api文档有帮助，有时候api的文字描述看不懂到底是什么意思，但直接看类名就一目了然了。

H5游戏引擎对比

想到前几天偶然在MDN看到的list
其实不全啦，layaAir就没有。整个实习阶段跟过两个游戏，第一个使用的是layaAir，第二个使用的是phaser，第一个游戏是从头开始构建的，3D游戏，第二个游戏主要是2D。
我没有使用过很多游戏引擎，也不认为一个demo能说明什么，暂时无意做各个引擎的测评，有兴趣可以尝试。