重拾H5小游戏之入门篇（二）

上一篇，水了近千字，很酸爽，同时表达了“重拾”一项旧本领并不容易，还有点题之效果。其实压缩起来就一句话：经过了一番记忆搜索，以及try..catch的尝试后，终于选定了Phaser 3.0作为我的小游戏开发引擎。

从这篇开始，我要开始拿出干货，进入实战。大家准备了好吗？一个字——干！

开发环境

首先说明一下，我的开发环境是VS Code + TypeScript。如果大家手头上没有用得比较顺手的TS开发环境，可以参考官微软方文档弄一个：

https://code.visualstudio.com/Docs/languages/typescript

项目搭建

项目伊始，先准备个大纲。然而这个大纲正正体现在项目的文件目录结构当中。

dist/
├── index.html
├── scripts/
│   ├── game.js
│   └── phaser.min.js
src/
├── game.ts
├── tsconfig.json
└── typings/
     ├── phaser.d.ts
     └── matter.d.ts

说明一下：

两个目录: src 是ts源码目录; dist是发布目录；

/dist/index.html是入口html页面。负责加载scripts目录中的phaser.min.js，以及游戏应用执行脚本game.js（由源码目录中game.ts编译生成）；

/src/tsconfig.json TypeScript编译参数的配置；

/src/game.ts 游戏应用的ts源代码（我的demo游戏代码量比较少，所以全写在这，懒得细分了）；

/src/typings目录里面的是phaser的ts定义文件，Phaser的GitHub有提供。

下面先看看tsconfig.json配置

{

"compilerOptions": {

"noImplicitAny": false,

"noEmitOnError": true,

"removeComments": true,

"sourceMap": true,

"target": "es5",

"outDir": "../dist/scripts",

"module": "amd"

},

"files": [

"./game.ts"

]

}

其中，有两个关键的配置项需要留意的：

outDir - 配置ts编译后输出的目录

files - 配置编译的入口文件。当然我的源码只有game.ts一个文件，没有其他可选的。假设您的项目还有其他ts文件，而且都被game.ts所引用，那么这里也只是需要配置game.ts就够了，因为被它引用的ts文件也会连带被compile输出，不用额外配置进来。

接下来再看看index.html，其主要作用是js的引入和显示容器（说的就是那个div）的定义。

数独游戏

游戏场景
终于轮到正菜上桌了！game.ts来了。

class MyGame {

constructor() {

// 游戏开始前的场景

const enterScene= {

key: 'enter',

active: true,

preload: function () { that.preload(this) },

create: function () { that.enterGame(this) }

};

// 游戏进行中的场景

const playScene = {

key: 'play',

active: false,

visible: false,

create: function () { that.playGame(this) }

};

// 游戏结束的场景

const endScene = {

key: 'end',

active: false,

visible: false,

create: function () { that.endGame(this) }

};

// 游戏引擎初始化

this.game = new Phaser.Game({

type: Phaser.AUTO, // 引擎渲染方式：Canvas、WebGL

backgroundColor: 0x666666,

scale: {

parent: "playground",

autoCenter: Phaser.Scale.CENTER_BOTH,

mode: Phaser.Scale.FIT,

width: 800,

height: 600

},

scene: [enterScene, playScene, endScene]

});

}

// 资源预加载

preload(s:Phaser.Scene) {

}

// startScene初始化回调

enterGame(s:Phaser.Scene) {

}

// playScene初始化回调

playGame(s:Phaser.Scene) {

}

// endScene初始化回调

endGame(s:Phaser.Scene) {

}

}

window.onload = () => {

new MyGame();

}

以上的代码很简单，首先定义一个类MyGame，在其构造方法中进行游戏引擎的初始化。至此，一个空白的游戏场景就这样构建出来了，接下来任务就开始基于游戏玩法的设计来编写代码逻辑，然后在游戏场景中呈现出显示对象和实现交互方法。

有必要提及一下的是，我的游戏项目是个多场景应用。因此代码的开始，我定义了置三个场景【enterScene、playScene、endScene】，分别应用于【游戏开始、游戏进行、游戏结束】三个阶段做界面场景切换。这跟单场景的应用略有不同，具体差异大家可以打开Phaser的官方文档看看，这里不赘述了。

OK，今天的《入门篇》就先写到这里，我们在《实战篇》再会吧！