用Egret製作功能簡單的打地鼠類遊戲《冰桶挑戰》

標籤：size   地址   game   定時   --   舞台   roc   name   結算   

今天教大家使用Egret製作一款功能簡單的遊戲——《冰桶挑戰》，這是一款大家熟悉的打地鼠類遊戲，點擊螢幕使用冰桶澆滅地洞裡鑽出來的明星，結算得到分數。遊戲頁面配置使用EUI封裝了大量的常用UI組件，滿足大部分的互動介面需求，開發人員僅用1天時間即可獨立完成這款小遊戲的開發。

遊戲如下：

遊戲比較簡單，分為以下幾個情境：

· 開始情境

· 遊戲情境

· 結束情境

· 遊戲類

開始情境

這裡使用Eui來搭建UI，舞台大小選擇640 x 960，填充模式選擇fixedWidth；

建立Eui組件將舞台大小改為640 x 960，開始情境這裡資源只有一張圖片，把它拖進去，然後選擇上下填充進行約束，將數值改為比例以便進行螢幕適配。

這裡為了看起來像點到“水桶狀”button上，直接拖一個button，然後改其alpha值為0；

簡單代碼如下：

//開始情境class start extends eui.Component implements eui.UIComponent {    public btn_Start: eui.Button;    public constructor() {        super();    }    protected partAdded(partName: string, instance: any): void {        super.partAdded(partName, instance);    }    protected childrenCreated(): void {        super.childrenCreated();        this.Init();    }    private Init() {        this.height = this.stage.stageHeight;        //情境跳轉        this.btn_Start.addEventListener(egret.TouchEvent.TOUCH_TAP, () ={            this.parent.addChild(new game())            this.parent.removeChild(this);        }, this)    }}

遊戲情境

1. 將背景圖片bg_png拖入情境中，跟start情境中背景圖片一樣，按調整好的比例進行約束；

2. 放置一個Group大小改為舞台大小，再將其上下填充約束，將其TouchEnbled改為false；

3. 這裡由於資源問題，“洞”都是固定好的，因此再添加一個group改為人物圖片大小（TouchEnbled也改為false），添加Rect作為遮罩；再將水桶和倒水的圖片拖進去（將這兩張圖片隱藏掉），結構和效果如下：

4. 將小的group複製8個，分別按比例進行位置約束，然後將這9個group都隱藏掉；

5.代碼編寫：

o 開啟一個心跳事件

 protected childrenCreated(): void {        super.childrenCreated();        this.Init();    }    private Init() {        egret.startTick(this.Update, this);    }    //出現的速度    private speed = 1;    private count = 0;    //心跳函數    private Update(): boolean {        this.count++;        if (this.count == Math.floor(120 / this.speed)) {            this.PeopleChange();            this.count = 0;            this.speed += 0.05;        }        //判斷遊戲是否結束        if (this.time <= 0) {            this.parent.addChild(new GameOver());            egret.stopTick(this.Update, this);            this.parent.removeChild(this);        }        return false;    }

Update函數裡面寫了控制人物出現的速度和遊戲結束的判定；

private PeopleChange() {        //在9個group裡面隨機一個        let ran = Math.floor(Math.random() * this.group.numChildren);        let g: eui.Group = <eui.Group>this.group.getChildAt(ran);        for (let i = 0; i < this.group.numChildren; i++) {            //如果隨機到的group裡面沒有人物圖片就進行人物的建立            if (g.numChildren < 4) {                if (ran == i) {                    //在三張人物圖片中隨機一張                    let random = Math.floor(Math.random() * 3);                    this.group.getChildAt(i).visible = true;//建立一張人物圖片let img: egret.Bitmap = new egret.Bitmap(RES.getRes(GameUtil.peopleEnemy[random]))                    //添加到隨機到的group裡面                    g.addChild(img);                    //設定人物圖片的遮罩                    img.mask = g.getChildAt(0);                    let h = img.y;                    //將人物圖片放到遮罩的下方，然後讓其緩動到上方。                    img.y += img.height;            }        }    }}

然後是人物圖片的緩動，在PeopleChange方法中寫

egret.Tween.get(img).to({ y: img.y - img.height }, 500).to({ y: img.y },500).call(() => {            //緩動執行完成後將group隱藏掉            this.group.getChildAt(i).visible = false;            //人物圖片位置複位            img.y -= img.height;            //從group中刪除人物圖片            g.removeChild(img)            //移除監聽            img.removeEventListener(egret.TouchEvent.TOUCH_TAP, () => { }, this)            egret.Tween.removeTweens(img);            g.getChildAt(2).visible = false;            g.getChildAt(3).visible = false;            })

人物圖片的點擊處理

img.touchEnabled = true;img.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {    //暫停動畫    tw.setPaused(true)    //人物圖片不可觸摸，防止多次點擊    img.touchEnabled = false;    this.tongNum++;    GameUtil.Constant.score++;    g.getChildAt(2).visible = true;    g.getChildAt(3).visible = true;    this.tongNumTXT.text = this.tongNum.toString();    //替換對應被澆水的圖片    img.texture = RES.getRes(GameUtil.peopleEnemyWet[random]);    //200ms後動畫繼續播放    setTimeout(() => {        tw.setPaused(false);        }, 200);}, this)

遊戲採用簡單的計時來判定結束，在Init方法中寫

//定時器let s = setInterval(() => {    if (this.time > 0) {        this.time--;        this.timeDownTXT.text = this.time.toString();    }    else {        clearInterval(s);        }    }, 1000)

結束情境

遊戲結束情境搭建比較簡單，注意按鈕和文字也需要按比例進行約束；

代碼編寫如下：

//結束情境class GameOver extends eui.Component implements eui.UIComponent {    public btnPlayAgain: eui.Button;    public btnFenXiang: eui.Button;    public scoreText: eui.Label;    public constructor() {        super();    }    protected partAdded(partName: string, instance: any): void {        super.partAdded(partName, instance);    }    protected childrenCreated(): void {        this.height = this.stage.stageHeight;        super.childrenCreated();        this.scoreText.text = GameUtil.Constant.score.toString();        this.btnPlayAgain.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {            this.parent.addChild(new game());            GameUtil.Constant.score = 0;            this.parent.removeChild(this);        }, this)    }}

遊戲管理類GameUtil

遊戲管理類GameUtil裡面寫了分數欄位，和兩種狀態下人物圖片的地址字串枚舉；

module GameUtil {    export class Constant {        public static score:number;    }    export enum peopleEnemy {        "person-fs_png" = 0,        "person-lj_png",        "person-ldh_png"    }    export enum peopleEnemyWet {        "person-fs-wet_png" = 0,        "person-lj-wet_png",        "person-ldh-wet_png"    }}

小結

本文主要講述了一款簡單的打地鼠類遊戲的製作過程，遊戲素材全部來自網路，遊戲整體結構和功能較為簡單。如果覺得這篇文章對你有所協助，歡迎在下方評論區留言與我們交流互動！

GitHub源碼地址：https://github.com/duan003387/DaDiShu2

用Egret製作功能簡單的打地鼠類遊戲《冰桶挑戰》