Html5 Egret游戏开发 成语大挑战游戏逻辑和数据处理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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资源方面请到第二篇的后面下载) 

 

以上是关于Html5 Egret游戏开发 成语大挑战游戏逻辑和数据处理的主要内容,如果未能解决你的问题,请参考以下文章

Html5 Egret游戏开发 成语大挑战干净的eui项目和资源准备

Html5 Egret游戏开发 成语大挑战开始界面

Html5 Egret游戏开发 成语大挑战选关界面

用Egret制作功能简单的打地鼠类游戏《冰桶挑战》

白鹭Egret Engine 1.5震撼发布 HTML5游戏性能大幅提升

基于声网 Flat 实现“成语解谜”的 Web 小游戏