HTML5 Egret Game Development idiom big challenge (eight) General level two page processing

In the game, we generally have a variety of two-level pages, such as the game pause interface or the end of the game interface, these interfaces constitute the main means of interaction between players, in the game development, for these interfaces of the coding organization is very learned, if backward to 10 years ago, Game development of the old-timers must be tireless class how to design a good "easy to read" "Can maintain" "logic clear" interface code, I have become deeply involved in the code key Soso, the result is inefficient, what is the reason? An old-timers project or a piece of code may be long-term maintenance long-term use, and now the high-speed code and ultra-short product life cycle, so do not have to plan so good interaction code, and sometimes may be a few months of their own code is not recognized, how may be to others to see understand. In front of so much, the purpose is to say, this implementation of violence is simple, just want to quickly do not engage in so complex component design, UI planning, now pay attention to the speed, you may feel and the 9th article a little conflict, not, and so the next article out I tell you why.

Now open the project before the Spring Festival, to tell the truth, I am a little strange, this time just a Gamewin interface, directly in the game scene to achieve victory interface, in wing first open Scenegameskin.exml file, at this time "may" will appear the interface does not display, In the output column is this:

For this situation, do not know why, it seems that the custom control caused by the class resolution error, to solve it is very simple, click on the Refresh button above:

Just a moment, find the component and drag it into a group to be the parent of the win interface.

Then, in the design interface to design a successful UI interface, here directly to the final good results for everyone to see it:

First of all, there is a positive solution to the picture bottom plate, there are two labels to show the explanation and provenance, there is a button next question, the reward UI is the original, because we do not realize the reward, so, interested can achieve their own, the bottom of the interface, add a translucent eui. Rect to solve the occlusion and make the UI look more stereoscopic, here is the description added to the Scenegame.exml:

<E:groupID= "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:imageSource= "Result_png"Horizontalcenter= "0"Verticalcenter= "260"/>    <E:buttonID= "Btn_next"x= "432"y= "941">        <E:skinname>            <E:skinstates= "up,down,disabled">                <E:imagewidth= "100%"Height= "100%"Source= "Resultbtn_png"Source.down= "Resultbtn1_png"/>                <E:labelID= "Labeldisplay"Horizontalcenter= "0"Verticalcenter= "0"/>            </E:skin>        </E:skinname>    </E:button>    <E:labelID= "Lb_from"text= "Label"x= "113"y= "The "TextColor= "0x000000"Multiline= "true"width= "501"Height= " +"/>    <E:labelID= "Lb_explain"Multiline= "true"TextColor= "0x000000"text= "Label"Height= "127"y= "805"width= "501"x= "113"/></E:group>

Here is the code control to implement the interface, open the Scenegame.ts file, add the member variable, and the Exml design corresponds to:

private Group_win:eui. Group; // the group control of the Victory interface private Btn_next:eui. Button; // Next Topic private Lb_explain:eui. Label; // explain private Lb_from:eui. Label; // Source

Implement two methods, one is to jump to the next topic, one is to display the result:

PrivateOnclick_next () {//Next Topic     This. group_win.visible =false; Scenelevels.shared (). Openlevel ( This. Levelindex + 1);  This. Initlevel ( This. Levelindex + 1); }PrivateShowwin () { This. group_win.visible =true; varLeveldata = leveldatamanager.shared (). Getlevel ( This. Levelindex);  This. Lb_from.text =Leveldata.tip;  This. Lb_explain.text =leveldata.content;}

Add an event registration for the next topic in the constructor:

this. Btn_next.addeventlistener (Egret. Touchevent.touch_tap,this. Onclick_next,this);

Replace the previous "Console.log" ("Win") in the Onclick_word method;

this. Showwin ();

Because previously reserved the interface, only need to implement the logic, when the game will win the Group_win component visible to True, and the label is assigned, when the next question, hide Group_win and the topic refresh, while the level map also refreshed to promote a level.
The most visible effects are as follows:

Well, this article has been finished, now a nearly complete game has almost, just need to use the visible can be in a UI to organize all the operation, here does not say that using "state", the state can be more convenient to design the UI operation, but the game interface is simple, do not do a detailed explanation.
This project Source: Chengyutiaozhan5.zip (due to the file size limit of the blog park, resource resources, please go to the back of the second chapter to download)

HTML5 Egret Game Development idiom big challenge (eight) General level two page processing