今天教大家使用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)} }

游戲場景

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

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

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

將小的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

轉載于:https://blog.51cto.com/11960887/2310715

總結

以上是生活随笔為你收集整理的用Egret制作功能简单的打地鼠类游戏《冰桶挑战》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。