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資源方面請到第二篇的后面下載）