抑郁症健康,内容丰富有趣,生活中的好帮手!
抑郁症健康 > 微信小程序游戏开发│智力测试游戏——button版

微信小程序游戏开发│智力测试游戏——button版

时间:2019-08-24 14:50:53

相关推荐

本案例开发智力测试游戏,当用户进入游戏后自动出现题目和选项(如图1)。用户选择答案后如果正确自动进入下一题,也可以单击“上一题”“下一题”按钮进入到上一题目或下一题目。用户如果本题目不会解答,可以单击“显示答案”。本测试提供5道试题,如果答对一题得20分。

■图1 游戏界面

01、程序设计的思路

游戏中题目的显示使用View组件,4个选项使用button组件(按钮组件),在WXML文件中对每个按钮进行tap事件绑定,tap就是单击事件。作为选项答案的Button组件当用户单击后,触发其tap事件,在其事件处理函数btnOpClick中判断对错,统计得分。用户选对则此按钮的颜色改成绿色(#98FB98);用户选错则此按钮的颜色改成红色(#FF99B4);进入下一题的时候把ABCD 4个选项的按钮颜色改回正常颜色(#FBFBFB)。如图1所示。用户单击“上一题”“下一题”按钮后,则更新下标索引index(题目号),从而从题目数组postList读取“上一题”“下一题”题目数据,更新view组件和4个button组件上显示的题目信息,从而开始新的题目测试。

正确答案采用view组件,通过hidden属性设置成隐藏。为了控制hidden属性值,wxml文件中hidden属性值使用变量ny。如果显示正确答案则ny: "false",隐藏则ny: "true"。

02、程序设计的步骤

1. exam.wxml文件

视图文件中<view class="timu">组件显示题目,4个<button>按钮显示4个选项,并绑定tap事件处理函数btnOpClick,处理用户选择的答案。由于这些组件显示postList[index]中信息,只要index发生改变,则页面题目信息就会跟随改变。

<!--pages/exam/exam.wxml--><scroll-view><view class="timu">{{postList[index].name}}</view><view class="timu" hidden="{{ny}}">{{postList[index].daan}}</view></scroll-view><scroll-view style='width:100%'><button id='A' class="anniu" bindtap="btnOpClick" style="background-color: {{bcA}};">A.{{postList[index].content[0]}}</button><button id='B' class="anniu" bindtap="btnOpClick" style="background-color: {{bcB}};">B.{{postList[index].content[1]}}</button><button id='C' class="anniu" bindtap="btnOpClick" style="background-color: {{bcC}};">C.{{postList[index].content[2]}}</button><button id='D' class="anniu" bindtap="btnOpClick" style="background-color: {{bcD}};">D.{{postList[index].content[3]}}</button></scroll-view><view class="huanti"><button bindtap="lastQuestion" class="next">上一题</button><button bindtap="nextQuestion" class="next">下一题</button><button bindtap="xianshi" class="next">显示答案</button></view><text class="jifen">积分:每答对一题积20分,目前得分{{defen}}</text>

2. exam.js页面文件

采用对象数组local_database存储题目信息。每道题是一个对象,由题目name,正确答案daan,ABCD 4个选项内容content组成。

// pages/exam/exam.jsvar local_database = [{"name": "哈雷慧星的平均周期为?","daan": "C","content": ["54年", "56年", "73年", "83年"]},{"name": "夜郎自大中“夜郎”指的是现在哪个地方?","daan": "A","content": ["贵州", "云南", "广西", "福建"]},{"name": "感时花溅泪下句是什么?","daan": "C","content": ["也无风雨也无晴", "明月几时有", "恨别鸟惊心", "老夫聊发少年狂"]},{"name": "在中国历史上是谁发明了麻药","daan": "B","content": ["孙思邈", "华佗", "张仲景", "扁鹊"]},{"name": "京剧中花旦是指?","daan": "B","content": ["年轻男子", "年轻女子", "年长男子", "年长女子"]}]

userAnswer数组存储用户每题选择的答案。

var userAnswer = []; // ["A", " ", "C", " ", " "];用户的答案Page({data: {postList: local_database ,index: 0, //当前题目号bc_default: '#FBFBFB', //默认颜色bc_right: '#98FB98', //正确时颜色bc_wrong: '#FF99B4', //错误时颜色bcA: '', //4个选项内容bcB: '',bcC: '',bcD: '',ny: true, //是否显示正确答案,true是隐藏答案defen: 0 //得分},

nextQuestion ()实现显示下一题信息。由于页面组件显示postList[index]中信息,index增加1,则页面题目信息就会跟随改变成下一题。进入下一题的时候把ABCD 4个选项的按钮颜色改回正常颜色(#FBFBFB)。

nextQuestion: function () { //下一题if (this.data.index < local_database.length - 1) {//不是最后一题this.setData({index: this.data.index + 1,ny: true //是否显示正确答案,true是隐藏答案})this.setButtonColor() ;}elsethis.gotoOver(); //跳转测试结束页面},

lastQuestino()实现显示上一题信息。由于页面组件显示postList[index]中信息,index减少1,则页面题目信息就会跟随改变成上一题。

lastQuestion: function () { //上一题if (this.data.index > 0) {this.setData({index: this.data.index - 1,ny: true //是否显示正确答案,true是隐藏答案})this.setButtonColor() ;}},

上一题和下一题按钮中都调用this.setButtonColor()实现按钮颜色变化。如果本题没有做过,所有按钮为正常颜色(#FBFBFB,未选择中状态)。如果选择过答案,则根据答案是否正确对应按钮显示不同颜色。用户选对则此按钮的颜色改成绿色(#98FB98);用户选错把此按钮的颜色改成红色(#FF99B4)。

setButtonColor: function () {//设置按钮正常颜色(未选择中状态)this.setData({bcA: this.data.bc_default,bcB: this.data.bc_default,bcC: this.data.bc_default,bcD: this.data.bc_default});var n = this.data.index;var jieg = local_database[n].daan;var select = userAnswer[n]if (select == undefined) return; //本题没有做过直接返回if (select == jieg)this.setButtonRightColor(select) //答案选择正确,所选按钮为绿色else this.setButtonErrorColor(select) //答案选择错误,所选按钮为红色},//设置正确选择按钮颜色setButtonRightColor: function (select) {if (select == 'A') {this.setData({ bcA: this.data.bc_right }); //正确时颜色}else if (select == 'B') {this.setData({ bcB: this.data.bc_right }); //正确时颜色}else if (select == 'C') {this.setData({ bcC: this.data.bc_right }); //正确时颜色}else if (select == 'D') {this.setData({ bcD: this.data.bc_right }); //正确时颜色}},//设置错误选择按钮颜色setButtonErrorColor: function (select) {if (select == 'A') {this.setData({ bcA: this.data.bc_wrong }); //错误时颜色}else if (select == 'B') {this.setData({ bcB: this.data.bc_wrong }); //错误时颜色}else if (select == 'C') {this.setData({ bcC: this.data.bc_wrong }); //错误时颜色}else if (select == 'D') {this.setData({ bcD: this.data.bc_wrong }); //错误时颜色}},

自定义事件函数btnOpClick(e)响应按钮的单击事件,如果单击事件发生,参数e.currentTarget.id获取单击对象的id,这个id在exam.wxml中设置过。

<button id='A' class="anniu" bindtap="btnOpClick" style="background-color: {{bcA}};">A.{{postList[index].content[0]}}</button><button id='B' class="anniu" bindtap="btnOpClick" style="background-color: {{bcB}};">B.{{postList[index].content[1]}}</button><button id='C' class="anniu" bindtap="btnOpClick" style="background-color: {{bcC}};">C.{{postList[index].content[2]}}</button><button id='D' class="anniu" bindtap="btnOpClick" style="background-color: {{bcD}};">D.{{postList[index].content[3]}}</button>

id就是上面'A','B','C','D'。从id可以得知用户的选择答案,与正确答案对比从而判断出对错。如果用户选择正确同时计算得分,并根据对错修改按钮的颜色。选择答案正确时按钮显示绿色,错误时按钮显示红色。

//ABCD选项按钮事件函数btnOpClick: function (e) {var select = e.currentTarget.id; //点击对象的id,这个id在index.wxml中设置了var jieg = local_database[this.data.index].daan;userAnswer[this.data.index] = select //保存用户答案if (select == jieg) { //答案选择正确this.setData({defen: this.data.defen + 20})}this.setButtonColor(); //根据对错修改按钮的颜色,正确时绿色错误时红色},

gotoOver()跳转测试结束页面。

gotoOver: function () {wx.navigateTo({url: 'over', //跳转测试结束页面})},

xianshi()显示本题的正确答案。

//显示答案xianshi: function () {this.setData({ny: false })}})

3. exam.wxss样式文件

/* pages/exam/exam.wxss */button.next {width: 250rpx;color: #fff;background: #369;margin: 5rpx ;font-size: 30rpx;}.timu{text-align: left;margin-top: 40rpx;line-height: 60rpx;font-size: 40rpx;}.anniu{min-height: 100rpx;text-align: left;margin-bottom: 20rpx;line-height: 90rpx;font-size: 40rpx;width: 100%;}.huanti{width: 100%;display: flex;}.jifen{margin-left:10%;position: fixed;bottom: 15rpx;}

4. 简单的结束页面

<!--pages/exam/over.wxml--><text>测试结束</text><image src="over.png"></image>

images里面的over.png是撒花小女孩的图片。运行效果如图2。

■图2 游戏结束界面

智力测试游戏这种游戏需要存储大量的题目数据,这些数据可以直接存储到数组中处理,但是想改变题目数据就会不太方便,所以这些题目数据最好存储到外部文件中,在游戏中能动态地倒入进来。

微信小程序可以读取本地TXT文本、XML文件的数据。对于智力测试游戏最好的方法是将数据存入本地TXT文本、XML文件,在游戏开始时读取本地TXT文本、XML文件的数据,从而获取题目和答案信息。也可以将题目数据文本存储到云端,这样更新云端题目数据文本,达到更新题库目的。

如果觉得《微信小程序游戏开发│智力测试游戏——button版》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。