接上节 http://www.cnblogs.com/hangxin1940/archive/2013/04/09/3011424.html
Whack That Mole!(打鼹鼠)游戏是一个使用Devkit引擎内置的一款游戏，通过学习该游戏的源代码，我们会明白这些Devkit组建是如何组织在一起的。
## 游戏安装
首先启动服务
$ basil serve
他会在`9200`端口启动，在浏览器打开 `http://localhost:9200`
Devkit会提前将打鼹鼠游戏加载好，在左侧导航栏选中`Projects`。
然后选择游戏图标，并点击`Simulate`，会在一个新窗口中运行模拟器。
## 浏览器调试
工欲善其事必先利其器，我们需要一个有力的调试工具，在上节的Hello World!中，我们知道如何使用UI监视工具与在Console中调试代码。
那么现在就用UI监视工具看看这个打鼹鼠的场景结构。
现在打开Console，输入：
GC.app.view
它会返回场景的根节点对象，在Console中也可以方便的查看跟节点的子项
## 工程结构
一个基本的Devkit工程结构如下:
.
├── manifest.json
├── sdk -> /path/to/devkit/sdk
├── resources/
└── src
└── Application.js
在上节已经讲过各个目录/文件存在的意义。
这里说下游戏的清单文件 `manifest.json`， 它可以包含任意数量的json格式的配置信息，一个典型的清单文件包含了程序的ID哈希码、名称以及设备屏幕方向的配置信息。
这个文件由`basil`自动生成，也可以手动编辑。
{
"appID": "abcdefghijklmnopqrstuvwxyz012345",
"shortName": "whackthatmole",
"title": "Whack-that-Mole!",
"supportedOrientations": [
"portrait"
]
}
## 游戏流程
在深入研究打鼹鼠前，我们先看看整个程序的调用流程
首先，devkit引擎会初始化环境，并且调用工程目录下的程序入口`./src/Application.js`文件，它负责初始化屏幕。
程序使用视图栈来压入和弹出游戏屏幕，当进入游戏后，标题视图会被压入试图栈，此时将在屏幕上显示图形并且等待用户输入以开始游戏，这个标题视图定义在 `./src/TitleScreen.js` 文件。
当用户触摸`Play`按钮后，游戏视图会被压入我们的视图栈，游戏视图负责设置游戏的资源以及游戏的界面，然后进行与结束游戏。它被定义在 `./src/GameScreen.js` 文件。
当游戏结束时，用户的得分将被显示在屏幕上，此时游戏会一直等待直到用户输入。接收到触摸事件后，游戏试图会被弹出试图栈，返回到标题视图，之后会继续等待用户输入以便继续开始游戏。
## 游戏结构
项目的完整结构如下：
.
├── manifest.json
├── sdk -> /path/to/basil/sdk
├── resources
│ ├── images
│ │ ├── hole_back.png
│ │ ├── hole_front.png
│ │ ├── icon.png
│ │ ├── mole_hit.png
│ │ ├── mole_normal.png
│ │ └── title_screen.png
│ └── sounds
│ ├── effect
│ │ └── whack.mp3
│ └── music
│ └── levelmusic.mp3
└── src
├── Application.js
├── GameScreen.js
├── MoleHill.js
├── TitleScreen.js
└── soundcontroller.js
游戏逻辑位于 `./src` 目录，现在我们就来看看它。
一旦DevKit初始化后，游戏会从 `./src/Application.js` 开始。在打鼹鼠中，这个文件很短小，它的作用是是初始化标题视图与游戏视图，并且处理事件与引导游戏的流程。
/*
* 游戏主程序，所有代码将从这里开始.
*/
// 导入devkit的模块
import device;
import ui.StackView as StackView;
// 导入用户模块
import src.TitleScreen as TitleScreen;
import src.GameScreen as GameScreen;
import src.soundcontroller as soundcontroller;
/* 程序继承于 GC.Application
* 当游戏运行时，用于导出与实例化
*/
exports = Class(GC.Application, function () {
/* 在引擎被创建之后资源加载之前运行
*/
this.initUI = function () {
var titlescreen = new TitleScreen(),
gamescreen = new GameScreen();
this.view.style.backgroundColor = '#30B040';
//在场景试图的根加入一个新的 StackView 类
var rootView = new StackView({
superview: this,
x: device.width / 2 - 160,
y: device.height / 2 - 240,
320,
height: 480,
clip: true,
backgroundColor: '#37B34A'
});
rootView.push(titlescreen);
var sound = soundcontroller.getSound();
/* 监听标题视图出发的开始按钮事件。
* 隐藏标题视图，显示游戏视图，然后在游戏视图中触发一个自定义事件
*/
titlescreen.on('titlescreen:start', function () {
sound.play('levelmusic');
rootView.push(gamescreen);
gamescreen.emit('app:start');
});
/* 当游戏视图发出游戏结束事件，显示标题试图，以便让用户重新玩一遍
*/
gamescreen.on('gamescreen:end', function () {
sound.stop('levelmusic');
rootView.pop();
});
};
/* 资源文件加载后运行。
*/
this.launchUI = function () {};
});
在代码开始处，我们使用 `import` 导入devkit引擎的两个模块，以及我们自定义的三个模块
// 导入devkit的模块
import device;
import ui.StackView as StackView;
// 导入用户模块
import src.TitleScreen as TitleScreen;
import src.GameScreen as GameScreen;
import src.soundcontroller as soundcontroller;
要注意的是，`Application.js` 文件本身也是一个模块，它使用`Class`关键字继承于`GC.Application`类，这个新类被定义为`exports`对象，当我们的程序被实例化后，它会被赋给全局属性 `GC.app`，然后可以在项目代码任何位置访问它。既然我们在游戏中只需要一个程序，那么可以把它看作是单例的。
在程序的类定义函数中，我们可以使用`this`关键字引用这个类对象。一个简陋的但可以运行的`Application.js`看起来是这样的：
`device`模块包含了运行游戏的物理设备的信息，我们可以用它来获取浏览器的信息，甚至是原型应用信息，这取决与如何运行这个游戏。
exports = Class(GC.Application, function () {
// 在这里定义类..
// this === GC.app //=> true
});
`GC.Application`类比较特殊，他有两个回调函数 `initUI`与`launchUI`,它们会在就绪时检查UI并运行。
`initUI`函数会在devkit引擎创建后并且场景图形准备好后运行。如果定义了闪屏(Splash)或载入屏(Loading)，那么`launchUI`函数在执行后它们会被移除。
GC DevKit 快速入门 -- 游戏概览(二) http://www.cnblogs.com/hangxin1940/archive/2013/04/11/3015553.html