本案例开发智力测试游戏，当用户进入游戏后自动出现题目和选项（如图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.js
var 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版相关推荐

浅谈我对微信小程序云开发的认识与见解
一.微信小程序云开发的优点 1.无需自建服务器 2.项目快速上线 3.轻轻松松获取用户凭证二.微信小程序云开发的坑 1.基础版CDN流量太少 2.云数据库限制多 (1)小程序端读取限制 (2)云数据 ...
python小程序贪吃蛇_微信小程序实现的贪吃蛇游戏【附源码下载】
本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: snake 得分 ...
微信小程序—跳一跳，Android游戏助手(外挂)使用教程
作为一名有着丰富实战经验的Android开发人员,作为一个有着一定基础和实战的逆向新司机,第一次面对github上的这个项目自己也是懵的,即使看完了README,也还是不知道从何下手.在此之前玩游戏从 ...
小程序源码：喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...
喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...
c语言代码游戏跳一跳,微信小程序《跳一跳》游戏里的编程小知识，你知道吗？...
微信小程序<跳一跳>游戏里的编程小知识,你知道吗? 今日你跳了吗? 玩过的朋友都知道,跳一跳里的游戏操作非常简单,就用手指按住屏幕按住施放进行跳跃,整个游戏是个人都可以很轻松玩起来! 游戏 ...
微信小程序--云开发学习
这两周因为没有布置任务,主要进行微信小程序云开发的学习 ················· 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生 ...
个人微信小程序云开发总结心得
文章之前: 先附上通过微信小程序云开发做出的两个小程序,有兴趣的朋友可以微信扫码进去看看,欢迎登录学习 . 框架采用移动端常用UI: Vant 微信云开发官方文档:微信开发文档相关的npm包导入方法 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...

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