cari

Rumah  >  Artikel  >  hujung hadapan web  >  js tiruan 3366 permainan mini kemahiran pemilihan kata permainan_javascript

js tiruan 3366 permainan mini kemahiran pemilihan kata permainan_javascript

WBOY
WBOYasal
2016-05-16 15:05:301580semak imbas

Contoh artikel ini adalah untuk berkongsi dengan anda permainan "Adakah anda buta warna" dalam permainan mini js tiruan 3366 Mari mencabarnya dahulu

Matlamat permainan: Pilih warna mengikut warna teks yang muncul pada skrin Jangan terganggu dengan dilema warna mata pada permulaan permainan Setiap kali Setiap jawapan yang betul bernilai satu mata, berjumlah 10 mata Permainan akan tamat apabila masa tamat.
Arahan Operasi: Klik tetikus untuk memilih warna

1. Rendering:

Gambar asal:

Tiruan:

Kod: 

<!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">分数 :0</div>
      </div>
      <div class="middle">
        <div class="text">蓝</div>
        <div class="alert">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</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">
    //变化的核心 获得不重复的乱序数组(数组中下标值)
     
    function random(min, max) {
      return parseInt(Math.random() * (max - min + 1)) + min;
    }
    //不重复的数组
    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];
      //获取乱序下标数组
      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;
          //分数增加
          fresh();
          scoreDiv.innerHTML = "分数: "+score ;
          alertDiv.style.opacity = 0;
        }else if(colorIndex != this.index &&isplaying){
          //点错时间减小
          countDown --;
          //更新时间变化
          timeDiv.innerHTML = "时间: " + countDown +"s";
          //判断清理定时器
          if(countDown <= 0){
            clearInterval(timer);
            isplaying = false;
          }
        }
      }
    }
    //定时器,监听游戏进行
    timer = setInterval(function(){
      if(isplaying){
        countDown --;
        timeDiv.innerHTML = "时间: " + countDown +"s";
        if(countDown <= 0){
          clearInterval(timer);
          isplaying =false;
          alert("game over!!");
        }
        //停止游戏
      }else{
         
      }
    },1000);
  </script>
 
</html>

Di atas adalah keseluruhan kandungan artikel ini saya harap semua orang boleh berjaya dalam cabaran.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci kaedah penapis() jQuery merentasi nod DOM operations_jqueryArtikel seterusnya：Penjelasan terperinci kaedah penapis() jQuery merentasi nod DOM operations_jquery

Artikel berkaitan

Lihat lagi