废话不多说，直接进入正题，这篇文章主要为大家讲解一下一个类似【Z-Type】的 html5 小游戏的开发思路。
【Z-Type】不知大家是否有玩过，Impactjs 的一个演示 demo。一个需要 99$的 html5 游戏框架。咱们暂且先不管他实现的思路，以下我们按自己的思路来一步步实现。
以下实例基于 AlloyTeam 团队游戏底层库 【Laro】 实现.
【演示 Demo】 （Firefox3.4+，Chrome10+，safari10+ 测试通过）
=======================================================
【Stpe 1】游戏主循环和 CanvasReander
游戏初始化的时候，我们先做两件事：
- 获取 Laro 提供的用于 canvas 渲染的 canvas render 实例，里面封装了大部分常用的 canvas 游戏常用的方法。
- 开始循环，重绘
|
1 |
this.render = new La.CanvasRender(canvas, 1, false); |
接下来，主循环开始，我们在主循环里可以先做两件事，一个 update 用于处理每次循环数据方面的更新。 一个 draw ，用来做每帧的重绘。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * looper */ Laro.register('TypeShot.$loop', function (La) { ... this.init = function () { this.$ = new La.Loop(this.looper, this); } this.looper = function (dt) { this.update(dt); this.draw(); } this.update = function (dt) { ... }; this.draw = function () { $TS.render.clear(); ... }; }) |
接下来，开始考虑游戏主流程的逻辑编码，这里我们使用有限状态机 FSM 来处理游戏主流程。
【Stpe 2】游戏主流程
关于有限状态机，简单的理解可以理解为一种 switch case 的升级版，基于事件驱动的状态分支管理方式。适用于一些典型的基于事件驱动的模型，比如说游戏，或者是一些富操作的 app。详细可以 google 或者百科一下。
状态与状态之间尽量解耦，状态之间的消息传递和转换通过他们的宿主来处理。
于是，我们暂且先把这个游戏流程分为 3 块。
