微信小程序（头脑王者）

前言

仿照热门小游戏（头脑王者）制作一个简单的出题小程序，自动是比较自动，但没有数据，如果集全民之力，收集题库，那才完美。（最后有下载链接）

1，首页

---

js文件

---

var data_util = require('../../util/util.js')

//由ID获得一个题目

function change_question(that){

  let ques_id = Math.floor(Math.random()*5);

  let right_id = Math.floor(Math.random() * 4);

  let aques = data_util.get_question(ques_id, right_id);

  //设置题目显示

  that.setData({

    question: aques.question,

    answer_list: aques.answers,

    right_answer: right_id

  })

}

//计时计分

var tc;

var col_temp = [0,0,0,0];

function timing_count(that) {

  if(that.data.time_lost>=100){

    clearTimeout(tc);

    col_temp[that.data.right_answer]=2;

      that.setData({

        color_select:col_temp

      });

      //reset_now_state(this);

      first_start(that,1500);

    //答题错误

    return;

  }

  tc = setTimeout(function () {

    let ts = that.data.time_lost + 1;

    that.setData({

      time_lost:ts,

      score:100-ts

    });

    timing_count(that);

  },100)

}

//重置状态

function reset_now_state(that) {

  //clearTimeout(tc);

  col_temp = [0,0,0,0]

  that.setData({

    time_lost: 0,

    score:100,

    color_select:col_temp

  });

}

//题目设置间隙

function first_start(that,ts) {

  clearTimeout(tc);

  setTimeout(function () {

    reset_now_state(that);

    change_question(that);

    timing_count(that);

    that.setData({

      can_select:false

    });

  },ts);

}

Page({

  data: {

    //答题时间为10秒

    time_lost:0,

    //分数与流逝时间成反比

    score:100,

    //问题

    question:"blank",

    //答案表

    answer_list: ["a","b","c","d"],

    //选择后选项颜色变化

    color_select:[0,0,0,0],

    //正确答案

    right_answer:0,

    //选择的答案

    select_id:0,

    //总分

    totalscore:0,

    //是否可以开始答题

    can_select:true

  },

  onLoad: function () {

    first_start(this,2000);

  },

  //选择的答案

  select_answer:function(evt){

    if(this.data.can_select){

      return;

    }

    this.setData({

      can_select:true,

      select_id:evt.target.id

    });

    //选择正确

    if (evt.target.id == this.data.right_answer){

      console.log("right");

      //change_question(this);

      col_temp[evt.target.id]=2;

      this.setData({

        totalscore:this.data.totalscore+this.data.score,

        color_select:col_temp

      });

      //reset_now_state(this);

      first_start(this,1000);

    //答题错误

    }else{

      console.log("wrong");

      col_temp[this.data.right_answer]=2;

      col_temp[evt.target.id]=1;

      this.setData({

        color_select:col_temp

      });

      //reset_now_state(this);

      first_start(this,2000);

    }

  }

})

wxss文件

---

.score_txt{

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

}

.question_txt{

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 50rpx;

  color: #10c1f3;

}

.sp_box{

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  margin-top: -15rpx;

}

.score_position{

  width: 134rpx;

  height: 56rpx;

}

.answer_group{

  width: 100%;

  margin-top: 50rpx;

}

.back_bg{

  width: 750rpx;

  height: 338rpx;

}

.total_score_txt{

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  color: #ef463a;

  margin-top: 50rpx;

}

2，附件

---

下载地址：点击（百度网盘）

复制地址：https://pan.baidu.com/s/1qZfKGWk