iceBucketChallenge
項目介紹
iceBucketChallenge：類似打地鼠類的冰桶挑戰(zhàn)游戲(ps:素材均來自網(wǎng)絡(luò))，基于egret白鷺游戲引擎開發(fā)，主要分為2個大頁面，用EUI build相應(yīng)的頁面，用tween來控制動畫，ts控制交互。
項目演示
項目功能結(jié)構(gòu)
項目運(yùn)行
$ egret build xxx(項目名)
$ egret startserver xxx(項目名) -a
項目搭建教程
該游戲比較簡單，就隨便記錄一下大概步驟
1.EUI build頁面
游戲最直觀呈現(xiàn)的就是頁面，egret給我們提供了一個wing的編輯器(個人感覺和vscode超級像)，wing方便我們對圖片和組件進(jìn)行拖拽和build，具體就不再贅述這里的教程，參考官網(wǎng)即可快速入門 —— EUI入門手冊
記住要點(diǎn)：拖拖拖點(diǎn)點(diǎn)點(diǎn)即可
示例圖：
2.tween制作動畫
這里主要使用tween緩動來控制人頭上下出沒的動畫（簡單來說：控制‘地鼠’的出沒）
mask遮罩
在做人頭出沒的時候，用到遮罩
img.mask = g.getChildAt(0);
為什么要這么使用？下面慢慢說。
什么是遮罩？
遮罩是游戲中非常常見的一個視覺處理手段。簡單來說：所謂的遮罩就是指定一個顯示對象哪些部分可以顯示，哪些部分不可以顯示。
推薦一個直觀的實(shí)踐辦法
光看文字，應(yīng)該會覺得一頭霧水，可以嘗試在代碼中這么玩一下：改變rect的高度和寬度，觀察這時候人頭出沒時的效果，這樣可以最直觀的了解到遮罩的意思。
3.發(fā)布游戲
當(dāng)整個游戲制作完成后，我們需要將它進(jìn)行發(fā)布，這里只涉及H5方面發(fā)布。
一句命令行而已的事：
$ egret publish xxx(項目名)
打包成功后，會出現(xiàn)一個bin-release的文件夾
然后把我框出來的1903....這個文件夾里面的東西，拖到服務(wù)器上，然后對應(yīng)訪問，就可以啦。
敲黑板劃重點(diǎn)
如果說，我們平時在自我測試環(huán)節(jié)，起一個本地服務(wù)，然后手機(jī)在同一個網(wǎng)絡(luò)下訪問本機(jī)ip地址就可以
這樣應(yīng)該會比較方便，簡單介紹一下這個步驟：
簡單的http服務(wù)
首先安裝http-server模塊。
$ npm i -g http-server
運(yùn)行發(fā)布完成的包
$ cd bin-release/web/190311152632
$ ls
index.html js manifest.json resource
$ hs -p 8088
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8088
http://192.168.1.100:8088
Hit CTRL-C to stop the server
最后一級文件夾名字其實(shí)是時間戳。
這樣我們便可以在pc瀏覽器或者手機(jī)瀏覽器中查看游戲了。
項目細(xì)究
踩過的小坑
在開發(fā)中，我因?yàn)?個小錯誤，導(dǎo)致進(jìn)度卡殼了一會兒，這里記錄一下，以防下次重犯：
- eui中的布局
egret.startTick思考
繪制人頭出沒的時候，考慮到用幀事件處理，這里使用了egret.startTick和egret.stopTick。
startTick（停止對應(yīng)的則是stopTick）全局函數(shù)將以60幀的速度去 -> 回調(diào)函數(shù)。
需要注意的是如果要使用 startTick 全局函數(shù)需要 Egret 2.5 以上的版本。Ticker 類將被廢棄。
在game.ts中的init fn中，我是這么使用的：
egret.startTick(this.update, this);
startTick函數(shù)涉及到2個入?yún)ⅲ?/p>
- 回調(diào)函數(shù)，要求有返回值，如果返回true，將在回調(diào)函數(shù)執(zhí)行完成之后立刻重繪，如果返回false，則不會重繪
- this對象，通常傳入this即可
module模塊
es6中提到了一個module的概念，簡單來說：模塊就是一個獨(dú)立的文件，該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量。
這次在ts中采用了一個新的寫法：
module GameUtil {
export class Constant {
public static score = 0;
}
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"
}
}
泛型擴(kuò)展
之前在一篇博客《typescript常用點(diǎn)》中提了一部分泛型，通過這個項目，抽象了一句更直白的話：
泛型：參數(shù)化的類型，一般用于限制集合的內(nèi)容
toString拓展
toString() 函數(shù)返回一個表示該對象的字符串
- 數(shù)值
console.log((4).toString()) // '4'
- 字符串
console.log('nwd'.toString()) // 'nwd'
- 布爾值
console.log(true.toString()) // 'true'
- 對象 非數(shù)組
console.log({}.toString()) // [object Object]
- 對象 數(shù)組
console.log([4,6].toString()) // 4,6
- null和undefined
console.log(null.toString()) // Uncaught TypeError: Cannot read property 'toString' of null
console.log(undefined.toString()) // Uncaught TypeError: Cannot read property 'toString' of undefined
項目源碼
代碼中寫了很多注釋，基本都能看懂就不再贅述啦~
