前言

微信小游戏和抖音小游戏非常适合个人开发者创业。它们不需要版本号并且门槛较低。同时，抖音小游戏的系统算法推荐可以让好游戏脱颖而出。你所要做的就是把游戏做好。就是这样。

本系列文章附有视频教程、课程资源、课程源码。您可以按照消息获取！

我们先来说说金矿机的具体生产流程。

1：开发工具的基本使用

选择教程的开发工具和开发语言。首先我们创建项目并导入素材，如图：

项目路径中不要使用汉字和空格。使用英文或英文缩写。项目工程中的目录结构一定要清晰。下面我们将其分为Res, , 。

2：搭建《黄金矿工》游戏场景

一般在制作2D游戏时，我们会将一个游戏场景分为以下几个层次：

a：游戏背景层 b：游戏地图层

c：角色物品层，d：游戏UI层。根据这一层，我们对黄金矿工游戏地图进行分类，如图：

：背景层，：逻辑地图层，金矿工还有哪些地图？主要是表达边缘。我们使用碰撞检测系统，所以我们用墙遮挡边缘作为我们的逻辑图，即添加Box碰撞体，如图：

金币物品的根节点。所有金币生成后都放在这个根节点下。

：游戏的主角是我们矿工的绳子和钩子。制作这个是有技巧的。主角由一根绳子和绳子断裂处的金属环组成。

的原点位于绳索的一端，因此作为 的子项的绳索的锚点为 [0.5, 1]。绳子的长度可能会改变。我们可以修改身体的高度来使绳子发生变化。例如，如果绳子的长度是200，我们将body节点的高度更改为200。

我们命名的金属探测环的位置与绳子的高度有关。在底部，让我们看一下坐标。

得到结果，坐标为：-(绳子长度+10)。

：用来存放我们用户的UI操作。目前场景搭建已经完成。

3：类型代码开发

：创建一个新的组件类并被引擎识别。这很简单。只需右键单击并创建一个新的 TS 脚本即可。

：新的组件实例，到场景的节点。有两种方法可以做到这一点。您可以通过在编辑器中添加组按钮来添加它，可以通过代码（类型）来添加它，还可以将新组件类的实例添加到节点中。

：游戏引擎在特定时间段调用特定入口。我们写的代码如果没有人调用就没有价值，所以我们必须让引擎调用它。引擎会在特定的时间段调用我们的特定入口。我们只要去特定的入口就可以了。只需插入代码，在开始运行之前调用组件实例.()；每次刷新时都会调用组件.()，并等待这些指定的接口。引擎通过运行场景，找到场景的节点，找到节点上的组件实例来获取组件实例。这就是为什么必须将组件实例添加到节点中的原因。

4：代码模板介绍：

1. `cc: cocos creator;` 2. `cc._decorator: 名字空间，定义了装饰器/注解` 3. `ccclass: 装饰/注解 一个类是一个组件类; property: 装饰/注解 一个类的数据成员 绑定到编辑器;` 4. `@开头表示装饰注解` 5. `cc.Component: 组件类的基类;` 6. `export default: 外部要使用这个类，import default 来获取这个类型;` 7. `@ccclass` 8. `export default class GameMgr extends cc.Component {` 9. `// 权限 名字: 类型 = 默认值;` 10. ` @property` 11. ` private isDebug: boolean = false;` 12. `}`

5：黄金矿工核心理念分析

在黄金矿工游戏中，你要接触金子等物品，还有边缘等物品，所以我们需要使用碰撞检测系统来做碰撞检测。 ：开启碰撞检测，分两步

代码如下：

1. `// 开启碰撞检测，一定要在onLoad里面` 2. ` onLoad () {` 3. ` // step1: 开启碰撞检测系统, 默认是关闭;` 4. ` cc.director.getCollisionManager().enabled = true;` 5. ` // step2: 配置调试区域, debugDraw` 6. ` if(this.is_debug) {` 7. ` cc.director.getCollisionManager().enabledDebugDraw = true;` 8. ` }` 9. ` else {` 10. ` cc.director.getCollisionManager().enabledDebugDraw = false;` 11. ` }` 13. ` }`

：编辑碰撞区域。

1. `黄金需要编辑碰撞区域，游戏地图的3个边需要编辑碰撞区域, 矿工的圆形金属探测器需要添加碰撞器。`

：类型配置和碰撞关系配置。

在本例中，我们将对象分为类型：边缘（BORD）、黄金和探测器。分别设置对应的节点类型。

：碰撞检测

我们让金属探测器进行碰撞。请记住有关碰撞检测的一件事。当碰撞器检测到碰撞时，碰撞检测代码将附加到与该碰撞器对应的节点。所以新建一个代码来做碰撞检测，实现碰撞检测。函数入口

1. `const {ccclass, property} = cc._decorator;` 2. `@ccclass` 3. `export default class HeaderCtrl extends cc.Component {` 4. ` onCollisionEnter(other, self): void {` 5. ` }` 6. `}`

：配置碰撞关系，哪些类型与哪些类型碰撞，如图

黄金矿工会有多种游戏状态，我们在这里分类：

形状1：我们的钩子来回摆动； --->空闲

状态 2：我们的钩子已启动 --->

状态3：当我们触及边缘时，我们会反弹； ---> 返回

状态4：如果状态是金子，我们就把金子拖回来；如果还有其他状态，也可以自己定义。我们编写一段代码来管理整个游戏并在这段代码中定义状态：

1. `var State = {` 2. ` Idle: 0,` 3. ` Shoot: 1,` 4. ` Back: 2,` 5. ` BackWithGold: 3,` 6. `};`

状态定义完成后，我们分析状态变化的条件，总结如下：

状态1---》状态2：（用户点击屏幕）

状态2---》状态3：（钩子碰到边缘）

状态2----》状态4（遇到金子）

状态3/状态4---》

状态1：绳子被拖回来后，我们回到状态1

对于每个状态的动画，我们编写一个函数来实现下图，其中：

1. `// 1===============1===============1===============1=======dt========1` 2. ` // dt: 迭代，100 * dt` 3. ` update(dt: number): void {` 4. ` if(this.state === State.Idle) {` 5. ` this.idleUpdate(dt);` 6. ` return;` 7. ` }` 8. ` else if (this.state === State.Shoot) {` 9. ` this.shootUpdate(dt);` 10. ` return;` 11. ` }` 12. ` else if(this.state === State.Back) {` 13. ` this.backUpdate(dt);` 14. ` return;` 15. ` }` 16. ` else if (this.state == State.BackWithGold) {` 17. ` this.balckWithGoldUpdate(dt);` 18. ` return;` 19. ` }` 20. ` }`

完成状态显示界面后，接下来编写状态变化条件。用户点击屏幕，空闲状态，代码如图：

1. `this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);`

1. `private onTouchStart(): void {` 2. ` if (this.state !== State.Idle) {` 3. ` return;` 4. ` }` 5. ` this.state = State.Shoot;` 6. ` }`

状态改变的代码必须添加一个逻辑，就是对当前状态的判断。击中物体后，状态发生变化。因此，当金属圈检测到碰撞时，调用该接口，进入判断检测功能。 .ts添加在碰撞函数中

1. `GameMgr.Instance.onGameCollisionEnter(other, self);`

在.ts中实现：

1. `public onGameCollisionEnter(other, self): void {` 2. ` if (this.state !== State.Shoot) {` 3. ` return;` 4. ` }` 5. ` if (other.node.groupIndex === 2) { // 边缘` 6. ` this.state = State.Back;` 7. ` }` 8. ` else if (other.node.groupIndex === 3) { // 黄金` 9. ` this.state = State.BackWithGold;` 10. ` }` 11. ` }`

状态迁移变化完成后，我们将实现各个状态的动画。这里我重点介绍一个功能，

1. ` private setRopeLen(len: number): void {` 2. ` this.ropeBody.height = len;` 3. ` this.header.y = -(len + 10);` 4. ` }`

该功能可以修改绳子的长度，这样绳子抛出时和拖回时都可以使用。

实现状态迁移逻辑框架后，我们最终向每个状态添加代码并从每个状态添加代码。

闲置的：

定义一个角速度，定义当前角度，不断累加。如果超过左侧，请改变方向。如果超过右侧，也将方向更改为左侧。

1. ` private idleUpdate(dt: number): void {` 2. ` this.nowDegree += (this.wSpeed * dt);` 3. ` this.player.angle = this.nowDegree;` 4. ` if (this.nowDegree <= -60) {` 5. ` this.wSpeed = -this.wSpeed;` 6. ` }` 7. ` else if(this.nowDegree >= 60) {` 8. ` this.wSpeed = -this.wSpeed;` 9. ` }` 10. ` }`

：

确定绳子增长的速度。每次，绳子的长度都会变化（速度*时间）

1. ` private shootUpdate(dt: number): void {` 2. ` this.nowLen += (this.shootSpeed * dt);` 3. ` this.setRopeLen(this.nowLen);` 4. ` }`

后退：

当你撞到边缘并返回时，你直接将绳子的长度从较长变为较短，因此减少了。

1. `private backUpdate(dt: number): void {` 2. ` this.nowLen -= (this.shootSpeed * dt);` 3. ` if (this.nowLen <= 100) {` 4. ` this.nowLen = 100;` 5. ` this.state = State.Idle;` 6. ` }` 7. ` this.setRopeLen(this.nowLen);` 8. ` }`

：

1. `勾上黄金的状态，我就留给大家自己来写了。` 2. `private balckWithGoldUpdate(dt: number): void {` 3. ` }`

这样就实现了黄金矿工的核心玩法。除文字外，本课程还配有完整的视频教程、游戏资料和课程代码。如果需要的话可以在评论区留言。