Html5 Egret遊戲開發 成語大挑戰（八）通常性二級頁面處理

在遊戲中，咱們通常會有各類各樣的二級頁面，好比遊戲暫停界面或者遊戲結束界面，這些界面組成了對玩家交互主要手段，在遊戲開發中，對於這些界面的coding組織是很是有學問的，若是倒退到十年前，遊戲開發的老前輩們必定孜孜不倦的上課如何設計好「易讀」「可維護」「邏輯清晰」的界面代碼，本人曾深陷其中變得對代碼摳摳索索，結果事倍功半，緣由是什麼？老前輩們的一個項目或一段代碼多是長期維護長期使用的，而如今的高速code和超短的產品生命週期，使得徹底不用規劃那麼好的交互代碼，有時候可能過幾個月本身的代碼都不認得了，怎麼可能給別人去看明白。前面講那麼多，目的是說，這篇實現方式暴力簡單，只想快速完成不要搞那麼複雜的組件設計，UI規劃，如今講究的是速度，可能你會以爲和第9篇有點衝突，其實否則，等下篇出了我再告訴你爲啥。

如今打開春節前的項目吧，說實話，我也有點陌生了，此次只是現實一個gamewin的界面，直接在遊戲場景中實現勝利界面，在Wing先打開SceneGameSkin.exml文件，此時「可能」會出現界面不顯示，在輸出欄裏是這樣的：

對於這個狀況，不知道爲何，彷佛是自定義控件形成的類解析錯誤，解決它很簡單，點擊上面的刷新按鈕：

一下就行了，如今找到組件拖進去一個Group來當Win界面的父容器。

而後，在設計界面裏設計好勝利的UI界面，在這裏直接將最終作好的結果給你們看吧：

首先，有一個正解圖片底板，還有兩個Label來顯示解釋和出處，還有一個按鈕下一題，獎勵的UI是原版有的，因爲咱們不實現獎勵，因此，有興趣的能夠本身實現，界面的底層，加了一個半透明的eui.Rect來解決遮擋，讓UI看起來更加立體，下面是增長到scenegame.exml裏面的描述：

<e:Group id="group_win" left="0" top="0" bottom="0" right="0" visible="false">
    <e:Rect left="0" top="0" bottom="0" right="0" fillAlpha="0.53"/>
    <e:Image source="Result_png" horizontalCenter="0" verticalCenter="260"/>
    <e:Button id="btn_next" x="432" y="941">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="ResultBtn_png" source.down="ResultBtn1_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
            </e:Skin>
        </e:skinName>
    </e:Button>
    <e:Label id="lb_from" text="標籤" x="113" y="700" textColor="0x000000" multiline="true" width="501" height="65"/>
    <e:Label id="lb_explain" multiline="true" textColor="0x000000" text="標籤" height="127" y="805" width="501" x="113"/>
</e:Group>

下面是實現界面的代碼控制，打開SceneGame.ts文件，增長成員變量，和exml設計對應：

private group_win:eui.Group;//勝利界面的group控件
private btn_next:eui.Button;//下一個題目
private lb_explain:eui.Label;//解釋
private lb_from:eui.Label;//來源

實現兩個方法，一個是用來跳轉到下一個題目的，一個是顯示結果的：

private onclick_next(){
    //下一個題目
    this.group_win.visible = false;
    SceneLevels.Shared().OpenLevel(this.levelIndex + 1);
    this.InitLevel(this.levelIndex + 1);
     
}
private showWin(){
    this.group_win.visible = true;
    var leveldata = LevelDataManager.Shared().GetLevel(this.levelIndex);
    this.lb_from.text = leveldata.tip;
    this.lb_explain.text = leveldata.content;
}

在構造函數中增長下一個題目的事件註冊：

this.btn_next.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclick_next,this);

在onclick_word方法裏替換以前的「console.log("win");」

this.showWin();

由於以前預留好了接口，只須要把邏輯實現便可，當遊戲勝利的時候將group_win組件visible爲true，並將Label賦值，當點擊下一題時，隱藏group_win並將題目刷新，同時將關卡地圖也刷新推動一個關卡。
最重顯示效果以下：

好了，本篇就已經結束，如今一個幾乎完整的遊戲已經差很少，只須要活用visible就能夠在一個UI下組織出全部的操做，在這裏沒有說到使用「狀態」，狀態能夠更加方便的設計UI操做，但本遊戲界面簡單，就不作詳細的講解。
本篇項目源碼：ChengyuTiaozhan5.zip（因爲博客園的文件大小限制，resource資源方面請到第二篇的後面下載）