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