用Egret制作功能簡單的打地鼠類遊戲《冰桶挑戰》
阿新 • • 發佈:2018-10-30
lis ole 51cto 使用 mod -- random this 設置 今天教大家使用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
用Egret制作功能簡單的打地鼠類遊戲《冰桶挑戰》