微信小程序（頭腦王者）
前言
仿照熱門小游戲（頭腦王者）制作一個簡單的出題小程序，自動是比較自動，但沒有數(shù)據(jù)，如果集全民之力，收集題庫，那才完美。（最后有下載鏈接）
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)
}
//重置狀態(tài)
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,
? ? //分數(shù)與流逝時間成反比
? ? 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，附件
下載地址：點擊（百度網(wǎng)盤）
復制地址：https://pan.baidu.com/s/1qZfKGWk
