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

本案例开发智力测试游戏，当用户进入游戏后自动出现题目和选项（如图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）。

扫描二维码关注公众号，回复： 14471700 查看本文章

nextQuestion: function () { //下一题
    if (this.data.index < local_database.length - 1) {//不是最后一题
      this.setData({
          index: this.data.index + 1,
          ny: true  //是否显示正确答案，true是隐藏答案
        })
      this.setButtonColor() ;
    }
    else
      this.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文件的数据，从而获取题目和答案信息。也可以将题目数据文本存储到云端，这样更新云端题目数据文本，达到更新题库目的。