游戲目標(biāo): 按畫(huà)面中出現(xiàn)的文字的顏色來(lái)選擇顏色，千萬(wàn)不要被顏色的困局打擾，眼睛一定要放亮哦，游戲開(kāi)始時(shí)會(huì)有10分，每答對(duì)一題得一分，總共有10分，時(shí)間用完游戲會(huì)結(jié)束。
操作說(shuō)明: 鼠標(biāo)點(diǎn)擊選擇顏色

1、效果圖：

原圖：

模仿：

代碼：

<!DOCTYPE html>
<html>
 
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .wrap {
        width: 400px;
        height: 600px;
        border: 1px solid black;
        margin: 0 auto;
      }
       
      .head {
        width: 100%;
        height: 50px;
        overflow: hidden;
      }
       
      .time {
        float: left;
        width: 150px;
        height: 100%;
        line-height: 50px;
        font-size: 20px;
        text-align: center;
      }
       
      .score {
        width: 150px;
        height: 100%;
        float: right;
        line-height: 50px;
        font-size: 20px;
        /*text-align: center;*/
      }
       
      .middle {
        width: 100%;
        height: 450px;
      }
       
      .text {
        width: 100%;
        height: 300px;
        font-size: 200px;
        text-align: center;
        line-height: 300px;
      }
       
      .alert {
        width: 80%;
        height: 150px;
        margin: 0 auto;
        text-indent: 2em;
        font-size: 25px;
      }
       
      .bottom {
        width: 100%;
        height: 100px;
        overflow: hidden;
      }
       
      .bottomText {
        width: 20%;
        height: 100px;
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 70px;
        cursor: pointer;
      }
    </style>
  </head>
 
  <body>
    <div class="wrap">
      <div class="head">
        <div class="time">時(shí)間:10s</div>
        <div class="score">分?jǐn)?shù) :0</div>
      </div>
      <div class="middle">
        <div class="text">藍(lán)</div>
        <div class="alert">根據(jù)上面的字的顏色從下面選擇正確的字,選擇正確自動(dòng)開(kāi)始</div>
      </div>
      <div class="bottom">
        <div class="bottomText">紅</div>
        <div class="bottomText">綠</div>
        <div class="bottomText">黑</div>
        <div class="bottomText">藍(lán)</div>
        <div class="bottomText">黃</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    //變化的核心 獲得不重復(fù)的亂序數(shù)組(數(shù)組中下標(biāo)值)
     
    function random(min, max) {
      return parseInt(Math.random() * (max - min + 1)) + min;
    }
    //不重復(fù)的數(shù)組
    function randomArr() {
      var arr = [];
      while (arr.length < 5) {
        var temp = random(0, 4);
        if (arr.indexOf(temp) == -1) {
          arr.push(temp);
        }
      }
      return arr;
    }
    function fresh() {
      //中間字 變化
      var textIndex = random(0, 4);
       colorIndex = random(0, 4);
      textDiv.innerHTML = textArr[textIndex];
      textDiv.style.color = colorArr[colorIndex];
      //獲取亂序下標(biāo)數(shù)組
      var textRandoms = randomArr();
      var colorRandoms = randomArr();
      for (var i = 0; i < bottomDivs.length; i++) {
        //通過(guò)亂序下標(biāo)獲取文本,賦值給div
        bottomDivs[i].innerHTML = textArr[textRandoms[i]];
        bottomDivs[i].style.color = colorArr[colorRandoms[i]];
        //保存亂序下標(biāo)
        bottomDivs[i].index = textRandoms[i];
      }
    }
    var textDiv = document.querySelector(".text");
    var bottomDivs = document.querySelectorAll(".bottomText");
    var timeDiv = document.querySelector(".time");
    var scoreDiv = document.querySelector(".score");
    var alertDiv = document.querySelector(".alert");
    var textArr = ["紅", "綠", "藍(lán)", "黃", "黑"];
    var colorArr = ["red", "green", "blue", "yellow", "black"];
     var colorIndex=0;
     var timer = null;
     var isplaying = false;
     var countDown = 10;
     var score = 0;
     fresh();
    for (var i = 0; i < bottomDivs.length; i++) {
      bottomDivs[i].onclick = function(){
        //判斷
        if(colorIndex == this.index &&countDown!=0 ){
          //刷新
          score ++;
          isplaying =true;
          //分?jǐn)?shù)增加
          fresh();
          scoreDiv.innerHTML = "分?jǐn)?shù): "+score ;
          alertDiv.style.opacity = 0;
        }else if(colorIndex != this.index &&isplaying){
          //點(diǎn)錯(cuò)時(shí)間減小
          countDown --;
          //更新時(shí)間變化
          timeDiv.innerHTML = "時(shí)間: " + countDown +"s";
          //判斷清理定時(shí)器
          if(countDown <= 0){
            clearInterval(timer);
            isplaying = false;
          }
        }
      }
    }
    //定時(shí)器,監(jiān)聽(tīng)游戲進(jìn)行
    timer = setInterval(function(){
      if(isplaying){
        countDown --;
        timeDiv.innerHTML = "時(shí)間: " + countDown +"s";
        if(countDown <= 0){
          clearInterval(timer);
          isplaying =false;
          alert("game over!!");
        }
        //停止游戲
      }else{
         
      }
    },1000);
  </script>
 
</html>

以上就是本文的全部?jī)?nèi)容，希望大家能夠挑戰(zhàn)成功。

您可能感興趣的文章: