Html5 Egret遊戲開發 成語大挑戰（七）遊戲邏輯和數據處理

本篇在前面的基礎上，將進行邏輯的編碼開發讓遊戲可以正式的玩起來，這裏沒有注重太多的體驗細節，而是直接實現遊戲的規則邏輯，將分紅兩個部分說明：數據處理和遊戲邏輯。

初始化遊戲數據

在前面的第五篇中，咱們經過數據的構建已經讀取了全部的關卡數據在關卡選擇界面中，LevelDataManager負責管理全部的關卡數據，在SceneLevels類中，當onclick_level觸發時，就會切換到Game界面中，因此改造代碼以下：

private onclick_level(e:egret.TouchEvent){
    var icon = <LevelIcon>e.currentTarget;
    if(this.sel_level != icon.Level){
        this.img_arrow.x = icon.x;
        this.img_arrow.y = icon.y;
        this.sel_level = icon.Level;
    }else{
        //進入並開始遊戲
        this.parent.addChild(SceneGame.Shared());
        SceneGame.Shared().InitLevel(icon.Level);
        this.parent.removeChild(this);
    }
}

還記得單例嗎？不明的能夠去看一下前面第五篇，此時InitLevel方法尚未實現，實現SceneGame類，並添加InitLevel方法：

class SceneGame extends eui.Component {
    //單例
    private static shared: SceneGame;
    public static Shared() {
        if(SceneGame.shared == null) {
            SceneGame.shared = new SceneGame();
        }
        return SceneGame.shared;
    }
    public constructor() {
        super();
        this.skinName = "src/Game/SceneGameSkin.exml";
        this.btn_back.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclick_back,this);

    }
    //對象變量
    private group_answer:eui.Group;
    private group_words: eui.Group;
    private img_question: eui.Image;
    private btn_back: eui.Group;
    private levelIndex:number;
    //初始化關卡
    public InitLevel(level:number){
        this.levelIndex = level;
        var leveldata = LevelDataManager.Shared().GetLevel(level);
    }
    private onclick_back(){
        this.parent.addChild(SceneLevels.Shared());
        this.parent.removeChild(this);
    }
}

參數傳入的是關卡數值，由於咱們已經有了數據管理類，不須要去從外部得到，如今有了對應的關卡數據，就能夠構建遊戲了，爲了後面的設計操做，咱們將如今正在進行的關卡保存到一個自定義變量中就是 this.levelIndex，未來它將幫咱們完成換關卡之類的操做。

可是此時咱們發現一個問題，就是關卡中的選擇「字」是20個，而關卡數據中是10個（4＋6），這樣不夠咱們放置的怎麼辦呢？有一個很簡單的辦法，隨機另一個題目將問題答案和本題組合，而後打亂字符順序，就能夠了，固然若是爲了減小難度，也能夠將問題設計成爲10個「問題字」，這裏採用的是20個「問題字」來保證難度的一致，下面改造InitLevel方法：

//初始化關卡
public InitLevel(level:number){
    this.levelIndex = level;
    var leveldata = LevelDataManager.Shared().GetLevel(level);
    //將字段接起來
    var words = leveldata.answer + leveldata.word;
    //隨機一個其它題目的字段混合進本題目
    while(words.length==10){
        var i = Math.floor(Math.random() * 400);
        if(i!=level){
            var temp = LevelDataManager.Shared().GetLevel(i);
            words += temp.word + temp.answer;
        }
    }
    //對字段重排
    var wordlist:string[]=[];
    for(var i =0 ;i<words.length;i++){
        wordlist.push(words.charAt(i));
    }
    wordlist = this.randomlist(wordlist);
    //賦值
    for(var i = 0;i<this.group_words.numChildren;i++){
        var wordrect = <Word>this.group_words.getChildAt(i);
        wordrect.setWordText(wordlist[i]);
        wordrect.visible = true;
    }
    //重置一些狀態
    for(var i = 0;i<this.group_answer.numChildren;i++){
        var answerrect = <AnswerWord>this.group_answer.getChildAt(i);
        answerrect.SetSelectWord(null);
        answerrect.visible = true;
        answerrect.SelectWord = null;
    }
    //顯示圖像
    this.img_question.source = "resource/assets/"+leveldata.img;
}
//將一個數列隨機
private randomlist(arr: any[]): any[] {
    var array = [];
    while(arr.length > 0) {
        var i = Math.floor(Math.random() * arr.length);
        array.push(arr[i]);
        arr.splice(i,1);
    }
    return array;
}

在最後增長了一個本身寫的randomlist方法，是將一個數組打亂順序，上面的註釋基本上已經將代碼講完，須要注意的是AnswerWord的SetSelectWord方法，在以前的代碼中，沒有對null進行處理，因此還得修改AnswerWord.SetSelectWord(word:Word):

//當一個問題字被選擇添加到回答的時，設置不可見，並保存到本對象中之後使用
public SetSelectWord(word:Word){
    if(word != null){
        this.setWordText(word.getWordText());
        this.SelectWord = word;
        word.visible = false;
    }
    else{
        this.setWordText("");
        this.SelectWord = null;
    }
}

這個方法的做用就是，下面的問題字操做的時候，將其保存在回答字中，未來再操做時將其還原顯示。

字塊操做處理邏輯

打開Word類，本遊戲的字塊是獨立的，幾乎不會變化，因此咱們將點擊事件放入對象自身處理，經過訪問Game類的單例來讓代碼看起來更好讀一些，因此，直接修改onclick_tap方法以下：

protected onclick_tap(){
        SceneGame.Shared().onclick_word(this);
    }

而後在SceneGame實現onclick_word方法，傳入參數是word：

//當字點擊的時候，由word類拋出
public onclick_word(word: Word){
    //找到一個合適的位置添加進答案內容
    var sel:AnswerWord = null;
    for(var i = 0;i<this.group_answer.numChildren;i++){
        var answer = <AnswerWord>this.group_answer.getChildAt(i);
        if(answer.SelectWord == null){
            sel = answer;
            
            break;
        }
    }
    //當有一個合適的位置的時候就會將字填充，並判斷是否勝利
    if(sel != null){
        sel.SetSelectWord(word);
        //判斷是否勝利
        var check_str:string = "";
        for(var i = 0;i < this.group_answer.numChildren;i++) {
            var answer = <AnswerWord>this.group_answer.getChildAt(i);
            check_str += answer.getWordText();
        }
        if(check_str == LevelDataManager.Shared().GetLevel(this.levelIndex).answer){
            //勝利
            console.log("win");
        }
    }
}

若是沒有找到合適添加位置的話，就沒有任何操做，這個邏輯已經基本完成，能夠運行起來看看效果，將開始界面加到Main中：

protected startCreateScene(): void {
    //this.addChild(SceneBegin.Shared());
    this.addChild(SceneLevels.Shared());
}

而後一路點進遊戲界面，就能夠達到你想要效果了。

本篇已經結束，使用了點擊事件和互相調用的方式來實現基本的規則處理，因爲篇幅問題，還有不少東西沒有實現，所以在此以後增長一篇二級頁面的講解。

本篇項目源碼：ChengyuTiaozhan4.zip（因爲博客園的文件大小限制，resource資源方面請到第二篇的後面下載）