重拾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，今天的《入门篇》就先写到这里，我们在《实战篇》再会吧！

标签：Phaser,游戏,场景,ts,H5,入门篇,game,小游戏,js
来源： https://www.cnblogs.com/citywafe/p/13762448.html