重拾H5小游戏之入门篇（二）
2020-03-14 本文已影响0人
ChenReal
上一篇，水了近千字，很酸爽，同时表达了“重拾”一项旧本领并不容易，还有点题之效果。其实压缩起来就一句话：经过了一番记忆搜索，以及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.jsonTypeScript编译参数的配置； -
/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）的定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数独游戏</title>
</head>
<body style="padding:0;margin:0;">
<div id="playground"></div>
</body>
</html>
<script src="scripts/phaser.min.js"></script>
<script src="scripts/game.js"></script>
游戏场景
终于轮到正菜上桌了！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，今天的《入门篇》就先写到这里，我们在《实战篇》再会吧！
