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

2020-10-02 19:00:37 阅读：343 来源： 互联网

标签：Phaser 游戏场景 ts H5 入门篇 game 小游戏 js

上一篇，水了近千字，很酸爽，同时表达了“重拾”一项旧本领并不容易，还有点题之效果。其实压缩起来就一句话：经过了一番记忆搜索，以及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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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