基于原生JavaScript的选字练习游戏

实现的效果图（GIF）：

为了层次清晰，我将HTML、CSS、JS三个部分分开来写：

Html代码部分:

<div id="wrap">
        <div id="time">剩余时间:0</div>
        <div id="count">数量:0</div>
        <div id="question">字</div>
        <ul id="answer">
           <li>红</li>
           <li>黄</li>
           <li>绿</li>
           <li>紫</li>
           <li>蓝</li>
        </ul>
</div>

Css代码部分：

*{
   margin: 0;
   padding: 0;
}

#wrap{
   width: 400px;
   height: 600px;
   border: 1px solid black;
   margin: 20px auto;
}

#time{
   font-size: 30px;
   float: left;
}

#count{
   font-size: 30px;
   float: right;
}

#question{
   /*清除浮动*/
   clear: both;
   font-size: 200px;
   text-align: center;
   margin-top: 100px;
}

#answer{
   /*border: 1px solid red;*/
   margin-top: 150px;
   list-style-type: none;
   display: flex;
   justify-content: space-around;
}

#answer li{
   font-size: 50px;
}

JS代码部分:

//创建数组，存储5个颜色文字
var texts = ["红","黄","蓝","紫","绿"];
//存储5个颜色的数组
var colors = ["red","yellow","blue","purple","green"];
function random(m,n){
    return Math.floor(Math.random() * (n - m + 1) + m);
}
//洗牌算法 --- 随机数组中的元素-不重复
function randomArr(arr){
    //遍历数组
    for (var i = 0;i < arr.length;i++) {
        //随机一个数组下标(位置)
        var ran = random(0,arr.length - 1);
        //如果随机出的下标和当前下标i不相等，则交换下标对应的元素的值
        if (ran != i) {
            var temp = 0;
            temp = arr[i];
            arr[i] = arr[ran];
            arr[ran] = temp;
         }

     }
}
//显示问题的div
var divQuestion = document.getElementById("question");
var answer;//存储答案
//随机问题的函数
function randomQuestion(){
   var color = colors[random(0,colors.length - 1)];
   //随机文字
   divQuestion.innerHTML = texts[random(0,texts.length - 1)];
   //随机颜色
   divQuestion.style.color = color;
   if (color == "red") {
      answer = "红";
   }else if(color == "yellow"){
      answer = "黄";
   }else if(color == "blue"){
      answer = "蓝";
   }else if(color == "green"){
      answer = "绿";
   }else if(color == "purple"){
      answer = "紫";
   }
}

//随机问题一次
randomQuestion();
var answerUl = document.getElementById("answer");
var lis = answerUl.getElementsByTagName("li");//存储五个随机答案的li
//随机答案的函数
function randomAnswer(){
   //随机打乱文字的顺序
   randomArr(texts);
   //随机打乱颜色顺序
   randomArr(colors);
   //为答案赋值
   for (var i = 0;i < lis.length;i++) {
      lis[i].innerHTML = texts[i];
      lis[i].style.color = colors[i];
   }
}

//随机一次答案
randomAnswer();
var timeDiv = document.getElementById("time");//剩余时间的div
var time = 30;//记录剩余时间
timeDiv.innerHTML = "剩余时间:" + time;
//定时器
var timer = setInterval(function (){
   time--;
   timeDiv.innerHTML = "剩余时间:" + time;
   if (time == 0) {
       // 关闭定时器
        clearInterval(timer);
        alert("game over");
        //清除li点击事件
        for (var i = 0;i < lis.length;i++) {
            lis[i].onclick = null;
        }
   }

},1000);


var countDiv = document.getElementById("count");//数量
var count = 0;//存储答对题的数量
for (var i = 0;i < lis.length;i++) {
   lis[i].onclick = function (){
      if (answer == this.innerHTML) {//答对了
        count++;
        countDiv.innerHTML = "数量:" + count;
        //随机问题一次
        randomQuestion();
        //随机一次答案
        randomAnswer();
      }
   }
}