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资源方面请到第二篇的后面下载)

posted on 2016-02-06 10:45 nowpaper 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/nowpaper/p/5183916.html

Html5 Egret游戏开发 成语大挑战(七)游戏逻辑和数据处理相关推荐

  1. Html5 Egret游戏开发 成语大挑战(一)开篇

    最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...

  2. Html5 Egret游戏开发 成语大挑战(五)界面切换和数据处理

    Html5 Egret游戏开发 成语大挑战(五)界面切换和数据处理 经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备 ...

  3. Html5 Egret游戏开发 成语大挑战(八)一般性二级页面处理

    Html5 Egret游戏开发 成语大挑战(八)一般性二级页面处理 在游戏中,我们一般会有各种各样的二级页面,比如游戏暂停界面或者游戏结束界面,这些界面组成了对玩家交互主要手段,在游戏开发中,对于这些 ...

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

    Html5 Egret游戏开发 成语大挑战(二)干净的eui项目和资源准备 现在我们使用egret来起步开发一个名叫<成语大挑战>的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去 ...

  5. Html5 Egret游戏开发 成语大挑战(四)选关界面

    Html5 Egret游戏开发 成语大挑战(四)选关界面 通过前面的开始界面基本上了解了eui的使用方法,可以简单快速的制作一个UI界面,本篇使用第二界面选关界面展示更为难一点的代码控制,来展现关卡地 ...

  6. Html5 Egret游戏开发 成语大挑战(六)游戏界面构建和设计

    Html5 Egret游戏开发 成语大挑战(六)游戏界面构建和设计 本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用Eg ...

  7. Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理

    Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理 在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变 ...

  8. Html5 Egret游戏开发 成语大挑战(三)开始界面

    Html5 Egret游戏开发 成语大挑战(三)开始界面 本篇需要在前面的素材准备完毕,才可以开始,使用egret的eui结合代码编辑,快速完成基本的界面搭建,这里写的可能比较细,目的是减少大家对于其 ...

  9. 微信小游戏 腾讯课堂《白鹭教育 - 成语大挑战小游戏开发》学习笔记

    腾讯课堂<白鹭教育 - 成语大挑战小游戏开发>:https://ke.qq.com/course/287266 学习笔记 首先这个视频课程简单介绍了一个小游戏的制作,包括新建项目.适配模式 ...

最新文章

  1. 卷积神经网络理解及1*1卷积核的作用
  2. 独家 | 在Python中使用广义极端学生化偏差(GESD)进行异常检测(附链接)
  3. [ 一起学React系列 -- 6 ] 秘术之时间旅行-1
  4. linux java services_在 Linux 上创建第一个 Service Fabric Java 应用程序
  5. 进一步考察与UI相关的安全漏洞-下
  6. python和stata_在Python中实现Stata的stack功能
  7. Eming cup Problem D. Game of numbers
  8. 抢答网页PHP,[抢答]抢答环节已结束,相关答案已封箱 - 薅羊毛(Coupon)版 - 北大未名BBS...
  9. java 元素居中_如何在ColumnLayout中居中元素
  10. 通过binlog恢复mysql备份之前的数据
  11. 另一个串口verilog 代码
  12. jupyter notebook + 服务器中docker 使用配置
  13. 安装 3dsMax 2020 there is problem 错误
  14. 快速理解旋转运动公式
  15. Linux中文显示:解决Windows传到linux文件中文乱码
  16. CCF CSP 202009-3 点亮数字人生
  17. 关于用LM2596做的DC-DC数控电源
  18. 计算机键盘上fn键,键盘上的fn键有什么用?笔记本电脑键盘上的fn键作用大全
  19. 3. lambda 方法引用
  20. HelloChart框架动态加载数据

热门文章

  1. 在Linux服务器上解压rar压缩文件
  2. SM2算法加解密中的C1,C2,C3
  3. mysql自动备份工具_|Mysql自动备份工具(Auto MySQL Backup)下载v1.5 官方版 附教程 - 欧普软件下载...
  4. 0基础趣学SEO,引爆流量,让客户主动找上门的躺赚神技
  5. 伽罗华域(Galois Field,GF,有限域)
  6. ElasticSearch常用插件整理
  7. 2016,初入江湖,尚未见刀光剑影
  8. scrcpy - 手机无线投屏到电脑
  9. 计算机键盘无法使用的原因,电脑键盘失灵的原因及其解决方法
  10. 项目实战之信用卡数字识别