菜鳥教程丨用Egret制作功能簡單的打地鼠類游戲《冰桶挑戰》

菜鳥丨用Egret制作功能簡單的打地鼠類游戲《冰桶挑戰》

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

游戲效果圖如下。

 

游戲比較簡單，分為以下幾個場景：

• 開始場景
• 游戲場景
• 結束場景
• 游戲類

開始場景

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

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

 

 

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

 

 

簡單代碼如下：

//開始場景
classstartextendseui.Componentimplementseui.UIComponent{
   publicbtn_Start: eui.Button;
   publicconstructor() {
       super();
   }
   protectedpartAdded(partName: string, instance: any): void{
       super.partAdded(partName, instance);
   }
   protectedchildrenCreated(): void{
       super.childrenCreated();
       this.Init();
   }
   privateInit() {
       this.height=this.stage.stageHeight;
       //場景跳轉
       this.btn_Start.addEventListener(egret.TouchEvent.TOUCH_TAP, () ={
            this.parent.addChild(newgame())
            this.parent.removeChild(this);
       }, this)
   }
}

 

游戲場景                              

1. 將背景圖片bg_png拖入場景中，跟start場景中背景圖片一樣，按調整好的比例進行約束；
2. 放置一個Group大小改為舞台大小，再將其上下填充約束，將其TouchEnbled改為false；
3. 這里由於資源問題，“洞”都是固定好的，因此再添加一個group改為人物圖片大小（TouchEnbled也改為false），添加Rect作為遮罩；再將水桶和倒水的圖片拖進去（將這兩張圖片隱藏掉），結構和效果如下：

 

 

1. 將小的group復制8個，分別按比例進行位置約束，然后將這9個group都隱藏掉；
2. 代碼編寫：

• 開啟一個心跳事件

   

protectedchildrenCreated(): void{
       super.childrenCreated();
       this.Init();
   }
   privateInit() {
       egret.startTick(this.Update, this);
   }
   //出現的速度
   privatespeed=1;
   privatecount=0;
   //心跳函數
   privateUpdate(): 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(newGameOver());
            egret.stopTick(this.Update, this);
            this.parent.removeChild(this);
       }
       returnfalse;
   }

 

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

 

privatePeopleChange() {
       //在9個group里面隨機一個
       letran=Math.floor(Math.random() *this.group.numChildren);
       letg: eui.Group=<eui.Group>this.group.getChildAt(ran);
       for(leti=0; i<this.group.numChildren; i++) {
            //如果隨機到的group里面沒有人物圖片就進行人物的創建
            if(g.numChildren<4) {
                if(ran==i) {
                    //在三張人物圖片中隨機一張
                    letrandom=Math.floor(Math.random() *3);
                    this.group.getChildAt(i).visible=true;
//新建一張人物圖片
letimg: egret.Bitmap=newegret.Bitmap(RES.getRes(GameUtil.peopleEnemy[random]))
                    //添加到隨機到的group里面
                    g.addChild(img);
                    //設置人物圖片的遮罩
                    img.mask=g.getChildAt(0);
                    leth=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方法中寫

 

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

 

結束場景

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

 

代碼編寫如下：

 

//結束場景
classGameOverextendseui.Componentimplementseui.UIComponent{
   publicbtnPlayAgain: eui.Button;
   publicbtnFenXiang: eui.Button;
   publicscoreText: eui.Label;
   publicconstructor() {
       super();
   }
   protectedpartAdded(partName: string, instance: any): void{
       super.partAdded(partName, instance);
   }
   protectedchildrenCreated(): 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(newgame());
            GameUtil.Constant.score=0;
            this.parent.removeChild(this);
       }, this)
   }
}

 

游戲管理類GameUtil

游戲管理類GameUtil里面寫了分數字段，和兩種狀態下人物圖片的地址字符串枚舉；

moduleGameUtil{
    exportclassConstant{
        publicstaticscore:number;
   }
    exportenumpeopleEnemy{
        "person-fs_png"=0,
        "person-lj_png",
        "person-ldh_png"
   }
    exportenumpeopleEnemyWet{
        "person-fs-wet_png"=0,
        "person-lj-wet_png",
        "person-ldh-wet_png"
   }
}

 

小結

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

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