js仿3366小游戲選字游戲

更新時間：2016年04月14日 14:53:44 投稿：lijiao

這篇文章主要為大家詳細介紹了js仿3366小游戲選字游戲

本文實例為大家分享了js仿3366小游戲中“你是色盲嗎”游戲，大家先來挑戰(zhàn)一下

游戲目標: 按畫面中出現(xiàn)的文字的顏色來選擇顏色，千萬不要被顏色的困局打擾，眼睛一定要放亮哦，游戲開始時會有10分，每答對一題得一分，總共有10分，時間用完游戲會結束。
操作說明: 鼠標點擊選擇顏色

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">時間:10s</div>
        <div class="score">分數(shù) :0</div>
      </div>
      <div class="middle">
        <div class="text">藍</div>
        <div class="alert">根據(jù)上面的字的顏色從下面選擇正確的字,選擇正確自動開始</div>
      </div>
      <div class="bottom">
        <div class="bottomText">紅</div>
        <div class="bottomText">綠</div>
        <div class="bottomText">黑</div>
        <div class="bottomText">藍</div>
        <div class="bottomText">黃</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    //變化的核心 獲得不重復的亂序數(shù)組(數(shù)組中下標值)
     
    function random(min, max) {
      return parseInt(Math.random() * (max - min + 1)) + min;
    }
    //不重復的數(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];
      //獲取亂序下標數(shù)組
      var textRandoms = randomArr();
      var colorRandoms = randomArr();
      for (var i = 0; i < bottomDivs.length; i++) {
        //通過亂序下標獲取文本,賦值給div
        bottomDivs[i].innerHTML = textArr[textRandoms[i]];
        bottomDivs[i].style.color = colorArr[colorRandoms[i]];
        //保存亂序下標
        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 = ["紅", "綠", "藍", "黃", "黑"];
    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;
          //分數(shù)增加
          fresh();
          scoreDiv.innerHTML = "分數(shù): "+score ;
          alertDiv.style.opacity = 0;
        }else if(colorIndex != this.index &&isplaying){
          //點錯時間減小
          countDown --;
          //更新時間變化
          timeDiv.innerHTML = "時間: " + countDown +"s";
          //判斷清理定時器
          if(countDown <= 0){
            clearInterval(timer);
            isplaying = false;
          }
        }
      }
    }
    //定時器,監(jiān)聽游戲進行
    timer = setInterval(function(){
      if(isplaying){
        countDown --;
        timeDiv.innerHTML = "時間: " + countDown +"s";
        if(countDown <= 0){
          clearInterval(timer);
          isplaying =false;
          alert("game over!!");
        }
        //停止游戲
      }else{
         
      }
    },1000);
  </script>
 
</html>

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

您可能感興趣的文章: