微信小游戲，抖音小游戲，非常適合個人開發者創業，不用版號，門檻低，同時抖音小游戲的系統算法推薦，能讓好的游戲脫穎而出, 你要做的就是把游戲做好就可以了。
這個系列的文章，配套了視頻教程講解與課程資源,課程源碼。下面開始講解黃金礦工的具體制作流程。
這里有個cocos creator學習交流小組點擊可以直接加入，一起學習交流吧
1:開發工具的基本使用
教程的開發工具選用cocos creator, 開發語言選用TypeScript。首先我們創建項目，導入素材，素材如圖:
項目路徑不要使用中文和空格，使用英文或英文縮寫，項目工程里面的目錄結構要清晰，在Assets下面我們分成Res, Scene, Scripts,。
2: 搭建《黃金礦工》游戲場景
一般做一個2D游戲，我們會把一個游戲的場景分成下面幾個層次:
a: 游戲背景層 b: 游戲地圖層 c: 角色物品層, d: 游戲UI層,我們按照這個層次，把黃金礦工的游戲地圖分類進行放好，如圖:
BackGound: 背景層,
LogicMap: 邏輯地圖層，黃金礦工還有什么地圖呢？主要是要把邊緣表示出來, 我們使用了碰撞檢測系統， 所以把邊緣堵上牆，作為我們的邏輯地圖，也就是加Box碰撞器，如圖:
GoldRoot 黃金物品的跟節點，所有的黃金生成出來后都放這個根節點下。
Player: 游戲主角，就是我們的礦工的繩子和鈎子。這個制作的時候一個技巧，主角是由繩子，和繩子斷點上的金屬圓環組成。
Player的原點在繩子的一頭，所以繩子作為Player的孩子，錨點要為[0.5, 1], 繩子的長度可能會變化，我們修改body的高度就可以讓繩子有變化。比如繩子長度為200，我們把body這個節點的高度改成200，即可
金屬探測圓環，我們命名為header, header 的位置是與繩子的高度相關的，在最下面，我們觀察一下坐標，
得到一個結果, header的坐標: -(繩子長度 + 10)。
UIRoot層：用來放我們用戶的UI操作相關。
場景搭建就此搭建完畢。
3: Type Script代碼開發
Step1: 新建一個組件類，被引擎識別, 這個非常簡單，直接右鍵新建一個TS腳本即可
Step2: new 組件實例，到場景的節點上。這個有兩種方式，可以編輯器添加組按鈕來添加, 可以代碼addComponent(類型)添加, 本質 new 組件類的實例添加到節點上。
Step3: 游戲引擎特定時期，調用特定的入口， 我們寫代碼如果沒有人調用是不值錢的，所以必須要讓引擎調用到，引擎會在特定的時期，調用我們特定的入口，我們只要往特定的入口插入代碼即可，開始運行之前調用 組件實例.start();每次刷新的時候調用組件實例.update(),等這些規定的接口。引擎通過運行場景，找到場景的節點，找到節點上組件實例，來獲得組件實例，這也就是組件實例為什么一定要添加到節點上就是這個原因。
4: TypeScript 代碼模板介紹:
cc: cocos creator;
cc._decorator: 名字空間，定義了裝飾器/注解
ccclass: 裝飾/注解 一個類是一個組件類; property: 裝飾/注解 一個類的數據成員 綁定到編輯器;
@開頭表示裝飾注解
cc.Component: 組件類的基類;
export default: 外部要使用這個類，import default 來獲取這個類型;
@ccclass
export default class GameMgr extends cc.Component {
// 權限 名字: 類型 = 默認值;
@property
private isDebug: boolean = false;
}
5: 黃金礦工核心思路分析
黃金礦工游戲玩法中，要碰到黃金等物品，還有要碰到邊緣等物品，所以我們要利用碰撞檢測系統來做碰撞檢測。
Setp1: 開啟碰撞檢測, 分為兩個步驟，代碼如下:
// 開啟碰撞檢測，一定要在onLoad里面
onLoad () {
// step1: 開啟碰撞檢測系統, 默認是關閉;
cc.director.getCollisionManager().enabled = true;
// step2: 配置調試區域, debugDraw
if(this.is_debug) {
cc.director.getCollisionManager().enabledDebugDraw = true;
}
else {
cc.director.getCollisionManager().enabledDebugDraw = false;
}
}
Step2: 編輯碰撞區域。
黃金需要編輯碰撞區域，游戲地圖的3個邊需要編輯碰撞區域, 礦工的圓形金屬探測器需要添加碰撞器。
Step3: 類型配置與碰撞關系配置。
這個案例里面我們把物體分成了類型有：邊緣(BORD), 黃金Gold, 探測器Header。分別設置好對應節點的類型。
Step4: 碰撞檢測，我們讓金屬探測器Header來做碰撞，碰撞檢測記住一點，那個碰撞器檢測碰撞，就把碰撞檢測的代碼掛到那個碰撞器對應的節點上，所以新建一個代碼來做碰撞檢測，實現碰撞檢測的函數入口
const {ccclass, property} = cc._decorator;
@ccclass
export default class HeaderCtrl extends cc.Component {
onCollisionEnter(other, self): void {
}
}
Step5：配置好碰撞關系,哪些類型與哪些類型碰撞，如圖
黃金礦工會有多個游戲狀態，我們這里將其進行分類:
狀體1: 我們的鈎子擺來擺去; --->Idle
狀態2: 我們的鈎子發射出去 ---> Shoot
狀態3: 碰到邊緣我們就彈回來; ---> Back
狀態4: 如果狀態的是黃金我們就把黃金拖回來; BackWithGold
如果還有其他的狀態，你也可以定義好, 我們編寫一個GameMgr代碼，管理整個游戲，在這個代碼里面定義好狀態：
var State = {
Idle: 0,
Shoot: 1,
Back: 2,
BackWithGold: 3,
};
狀態定義完成以后，我們分析一下狀態變化的條件，整理如下:
狀態1---》狀態2: (用戶點擊了屏幕)
狀態2---》狀態3：(鈎子撞到了邊緣)
狀態2----》狀態4（碰到的是黃金）
狀態3/狀態4 ---》狀態1： 繩子拖回來以后，我們便回到狀態1
每個狀態的動畫，我們編寫一個函數，用來實現如下圖，在update里面:
// 1===============1===============1===============1=======dt========1
// dt: 迭代，100 * dt
update(dt: number): void {
if(this.state === State.Idle) {
this.idleUpdate(dt);
return;
}
else if (this.state === State.Shoot) {
this.shootUpdate(dt);
return;
}
else if(this.state === State.Back) {
this.backUpdate(dt);
return;
}
else if (this.state == State.BackWithGold) {
this.balckWithGoldUpdate(dt);
return;
}
}
把狀態顯示的接口完成后，接下來編寫狀態改變條件。
用戶點擊屏幕，idle-Shoot狀態，代碼如圖:
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
private onTouchStart(): void {
if (this.state !== State.Idle) {
return;
}
this.state = State.Shoot;
}
狀態改變的代碼一定要加一個邏輯，就是當前狀態的判斷。
碰到物體后，狀態改變，所以，當金屬圓圈，檢測到碰撞的時候，調用GameMgr的接口，進入判斷檢測函數。
HeaderCtrl.ts 在碰撞函數里面添加
GameMgr.Instance.onGameCollisionEnter(other, self);
GameMgr.ts里面實現:
public onGameCollisionEnter(other, self): void {
if (this.state !== State.Shoot) {
return;
}
if (other.node.groupIndex === 2) { // 邊緣
this.state = State.Back;
}
else if (other.node.groupIndex === 3) { // 黃金
this.state = State.BackWithGold;
}
}
狀態遷移改變完成了以后，我們就是實現每種狀態的動畫了，這里我重點要介紹一個函數，
private setRopeLen(len: number): void {
this.ropeBody.height = len;
this.header.y = -(len + 10);
}
這個函數，可以修改繩子的長度，這樣，等繩子拋出去，與拖回來都可以用。
狀態遷移邏輯框架實現后，最后我們來往每種狀態里面加代碼。
Idle:
定義一個角速度，定義當前角度，update不斷累加，如果超過左邊，就轉變方向
如果超過右邊，也換個方向到左邊。
private idleUpdate(dt: number): void {
this.nowDegree += (this.wSpeed * dt);
this.player.angle = this.nowDegree;
if (this.nowDegree <= -60) {
this.wSpeed = -this.wSpeed;
}
else if(this.nowDegree >= 60) {
this.wSpeed = -this.wSpeed;
}
}
Shoot:
定一個繩子生長的速度，每次update, 繩子長度變化(速度*時間)
private shootUpdate(dt: number): void {
this.nowLen += (this.shootSpeed * dt);
this.setRopeLen(this.nowLen);
}
Back:
碰到邊緣返回，直接把繩子的長度，由Shoot的變長，變成變短，所以是減。
private backUpdate(dt: number): void {
this.nowLen -= (this.shootSpeed * dt);
if (this.nowLen <= 100) {
this.nowLen = 100;
this.state = State.Idle;
}
this.setRopeLen(this.nowLen);
}
BackWithGold:
勾上黃金的狀態，我就留給大家自己來寫了。
private balckWithGoldUpdate(dt: number): void {
}
這樣就實現了黃金礦工的核心玩法。本次課除了有文字，還配備有 完整視頻教程，游戲素材，課程代碼，需要的可以進入交流小組。