CocosCreator像素鳥小游戲實作（有原始碼）超詳細教程 TS實作小游戲 零基礎開發

CocosCreator像素鳥小游戲實作（有原始碼）超詳細教程 TS實作小游戲

大家中秋國慶快樂哈

前言

老規矩先看效果

原始碼的獲取方式在最下面
對于本游戲來說canvas這樣設定最佳哦

游戲實作思路：小鳥的位置是全程不動的，只有管子和地面在動，需要用到物理引擎和碰撞系統，物理引擎來讓小鳥下落，并在點擊螢屏的時候讓小鳥飛起來，碰撞引擎用來判斷小鳥和障礙物碰撞，還需要存盤和讀取歷史最高分等等

本文章的目錄
前言
一、搭建場景
二、寫代碼

一、搭建場景

搭建基本場景
新建一個場景取名為Game并且打開
設定好canvas

把背景圖拖到場景中，把背景的大小設定成和canvas一樣大，還需要添加widget組件來讓背景填滿整個螢屏

再把地面拖過來，要拖兩個，因為需要兩個地面交替移動才能看起來地面時一直在動的
大小也要設定好，為了區分還需要改下名字

接下來就拖我們的主角小鳥到場景啦
給小鳥添加影片組件，添加spriteFrame屬性然后把圖片一張一張拖進去，并按照圖片設定好各種引數

小鳥向下落需要用到物理引擎，所以需要剛體和物理碰撞體，剛體的型別當然就是動態（Dynamic）

為了方便對管子的移動進行控制，游戲碰撞這一塊我就沒有用物理碰撞，而是單獨用了碰撞系統來判斷碰撞，小鳥還需要添加碰撞組件（兩個地面也需要碰撞組件哦!）

放置管子
像素鳥中的管子一共是三組，不斷的向左移動，當管子的最右邊小于了螢屏的最左邊，也就是說當管子超出螢屏的時候就需要讓管子重新回到螢屏最右邊，像這樣一直回圈
新建三個空節點，每個空節點放兩個管子（一個向上的管子一個向下的管子）
每個管子都需要添加碰撞組件哦！！

現在場景應該是這樣的

UI
UI是游戲和玩家之間互動的介質，任何游戲都少不了UI
像素鳥這個游戲是在點擊螢屏的時候讓小鳥向上飛，所以需要給canvas添加button（按鈕）組件
還需要兩個按鈕，一個用來開始游戲，一個用來重新開始，為了讓游戲看起來美觀還可以加一個Logo，最后再加上分數和歷史最高分就很完美了
（分數節點取名為score_label，歷史最高分取名為history_label，開始游戲按鈕取名為btnPlay，重新開始按鈕取名為btnGameover）

都加上之后的樣子

二、寫代碼

場景搭建好了，需要腳本來控制場景的這些節點
新建一個TS腳本，取名為Main（Main腳本里面寫游戲的主要邏輯）
把下面的代碼復制粘貼到腳本里
每一句代碼我都寫了很詳細的注釋哈

我簡單總結了一下，代碼里面實作的內容有

• 計算好每組管子的最佳位置，使它們均勻的分布
• 初始化歷史最高分，當得分超過歷史最高分時就重新存盤
• 游戲開始時第二組和第三組管子的Y坐標隨機加上一個數（第一組管子不加是因為可能在游戲開始之前就和小鳥發生碰撞，這就會出現很多問題，在游戲開始之后還是需要加）
• 在游戲開始時的0.05秒后暫停整個游戲（在0.05秒后暫停是為了先讓一些必要的東西加載）
• 管子和地面的無限移動
• 每移動一次管子就加2分
• 每幀更新分數
• 點擊螢屏時通過設定小鳥的線速度來實作上飛的效果
• 游戲結束時暫停整個場景

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    logo:cc.Node = null;//標志(logo)，也就是FlappyBird

    @property(cc.Node)
    p0:cc.Node = null;//第一組管子

    @property(cc.Node)
    p1:cc.Node = null;//第一組管子

    @property(cc.Node)
    p2:cc.Node = null;//第一組管子

    @property(cc.Node)
    groud0:cc.Node = null;//第一個地面

    @property(cc.Node)
    groud1:cc.Node = null;//第二個地面

    @property(cc.Node)
    btn_play:cc.Node = null;//開始游戲按鈕

    @property(cc.Node)
    btn_gameover:cc.Node = null;//重新開始按鈕

    @property(cc.Label)
    score_label:cc.Label = null;//分數文字

    @property(cc.Label)
    history_label:cc.Label = null;//歷史最高分文字

    @property(cc.Animation)
    bird_anim:cc.Animation = null;//小鳥的影片組件

    @property(cc.RigidBody)
    bird_rig:cc.RigidBody = null;//小鳥的剛體組件

    @property(cc.AudioSource)
    onbtn_music:cc.AudioSource = null;

    @property
    is_debug:boolean = false;//是否除錯

    @property
    score:number = 0;//分數

    onLoad(){
        if(cc.sys.localStorage.getItem("his") == null){//如果歷史最高分為空
            cc.sys.localStorage.setItem("his",0);//初始化歷史最高分
        }

        this.history_label.string = "歷史最高分：" + cc.sys.localStorage.getItem("his");//更新歷史最高分

        this.groud0.width = this.node.width;//把第一個地面的寬設定為螢屏的寬
        this.groud1.width = this.node.width;//把第二個地面的寬設定為螢屏的寬
        this.groud0.y = -this.node.height / 2 + this.groud0.height / 2;//設定兩個地面的Y坐標為最佳
        this.groud1.y = this.groud0.y;
        this.groud1.x = this.groud0.x + this.groud1.width;//讓第二個地面在第一個地面的右側，并且緊緊貼在一起

        let phy_manager = cc.director.getPhysicsManager();//獲取物理引擎
        phy_manager.enabled = true;//開啟物理引擎
        phy_manager.gravity = cc.v2(0,-500);//下落速度

        if(this.is_debug == true){//如果需要除錯就繪制除錯資訊
            cc.director.getPhysicsManager().debugDrawFlags = 
            cc.PhysicsManager.DrawBits.e_aabbBit |
            cc.PhysicsManager.DrawBits.e_pairBit |
            cc.PhysicsManager.DrawBits.e_centerOfMassBit |
            cc.PhysicsManager.DrawBits.e_jointBit |
            cc.PhysicsManager.DrawBits.e_shapeBit;

            let manager = cc.director.getCollisionManager();//獲取碰撞引擎
            manager.enabledDebugDraw = true;//是否繪制碰撞組件的形狀，默認為不繪制
            manager.enabledDrawBoundingBox = true;//是否繪制碰撞組件的包圍盒，默認為不繪制
    	}else{//如果不除錯就不繪制
            cc.director.getPhysicsManager().debugDrawFlags = 0;
        }

        let manager = cc.director.getCollisionManager();//獲取碰撞引擎
        manager.enabled = true;//開啟碰撞引擎

        this.bird_anim.play("Bird");//播放小鳥煽動翅膀的影片

        let width = this.node.width;//獲取螢屏寬
        let p_width = this.p0.children[0].width;//獲取管子寬
        let interval = (width + p_width) / 3;//獲取間距
        this.p0.x = interval;//設定第一組管子的位置
        this.p1.x = this.p0.x - interval;//設定第二組管子的位置
        this.p2.x = this.p1.x - interval;//設定第三組管子的位置
        console.log("螢屏寬" + width);//列印log
        console.log("管子寬" + p_width);
        console.log("間距" + interval);

        this.p1.y = 80 - Math.random() * 160;//開始的時候除了第一組，每一組管子的Y坐標是隨機的
        this.p2.y = 80 - Math.random() * 160;
        this.scheduleOnce(function() {//定時器,0.05秒后執行，目的是在加載一些必要的東西之后再暫停游戲
            cc.director.pause();//暫停游戲
            console.log("暫停游戲");
        },0.05);
    }

    update(){
        this.groud0.x -= 2;//移動地面
        this.groud1.x -= 2;
        this.p0.x -= 2;//移動管子
        this.p1.x -= 2;
        this.p2.x -= 2;
        
        let left = - this.node.width / 2;//螢屏的最左邊
        let right = this.node.width / 2;//螢屏的最右邊

        if(this.groud0.x + this.groud0.width / 2 < left){//如果地面一超出螢屏最左邊就把地面移動到最右邊
            this.groud0.x = this.node.width;//移動到最右邊
            console.log("地面移動了");
        }
        if(this.groud1.x + this.groud1.width / 2 < left){//如果地面二超出螢屏最左邊就把地面移動到最右邊
            this.groud1.x = this.node.width;//移動到最右邊
            console.log("地面移動了");
        }

        if(this.p0.x + this.p0.children[0].width / 2 < left){//如果第一組管子超出螢屏最左邊
            this.p0.x = right + this.p0.children[0].width / 2;//把第一組管子移動到螢屏的最右邊
            this.p0.y = 80 - Math.random() * 160;//隨機設定Y坐標
            this.add_score(2);//加2分
            console.log("管子移動了");
        }

        if(this.p1.x + this.p1.children[0].width / 2 < left){//如果第二組管子超出螢屏最左邊
            this.p1.x = right + this.p1.children[0].width / 2;//把第二組管子移動到螢屏的最右邊
            this.p1.y = 80 - Math.random() * 160;//隨機設定Y坐標
            this.add_score(2);//加2分
            console.log("管子移動了");
        }

        if(this.p2.x + this.p2.children[0].width / 2 < left){//如果第三組管子超出螢屏最左邊
            this.p2.x = right + this.p2.children[0].width / 2;//把第三組管子移動到螢屏的最右邊
            this.p2.y = 80 - Math.random() * 160;//隨機設定Y坐標
            this.add_score(2);//加2分
            console.log("管子移動了");
        }

        this.score_label.string = "分數：" + this.score.toString();//實時更新分數        
    }

    onbtn(){//點擊螢屏時應該執行的代碼
        console.log("點擊了螢屏");
        this.bird_rig.linearVelocity = cc.v2(0,200);//讓小鳥上升
        this.onbtn_music.play();//播放音效
    }

    onbtn_play(){//開始游戲按鈕執行的函式
        console.log("開始游戲");
        cc.director.resume();//恢復已經暫停的游戲
        this.btn_play.active = false;//隱藏開始游戲按鈕
        this.btn_gameover.active = false;//隱藏重新開始按鈕
        this.history_label.node.active = false;//隱藏歷史最高分
        this.logo.active = false;//隱藏logo
    }

    onbtn_gameover(){//重新開始按鈕執行的函式
        console.log("重新開始");
        cc.director.resume();//讓已經暫停的游戲恢復
        cc.director.loadScene("Game");//重新進入游戲
    }

    add_score(num:number){//加分函式，num為想要加的分值
        this.score += num;//加分
    }

    GameOver(){//游戲結束時應該執行的代碼
        console.log("游戲結束");
        cc.director.pause();//暫停游戲
        this.btn_gameover.active = true;//顯示重新開始按鈕
        this.bird_anim.stop("Bird");//停止小鳥扇翅膀影片
        if(this.score > cc.sys.localStorage.getItem("his")){//如果當前的得分超過了歷史最高分
            cc.sys.localStorage.setItem("his",this.score);//重新記錄歷史最高分
            console.log("破紀錄了！");
        }
    }

}

把寫好的腳本掛到canvas上面
接下來一個一個系結吧

按鈕的事件還沒有系結，一個一個系結

游戲開始的時候重新開始按鈕是隱藏的哦

圖片資源來源于網路

然后游戲就完成嘍
Cocos技術交流Q群：1130122408
歡迎進群閑聊、技術交流都歡迎
原始碼在群里
制作不易，感謝你的觀看
Thank You~~