信鸽网

js仿3366小游戏选字游戏

  作者：bea

本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏，大家先来挑战一下 游戏目标: 按画面中出现的文字的颜色来选择颜色，千万不要被颜色的困局打扰，眼睛一定要放亮哦，游戏开始时会有10分，每答对一题得一分，总共有10分，时间用完游戏会结束。 操作说明: 鼠标点击选择颜色 1、效果图： 原图： 模仿： 代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8

本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏，大家先来挑战一下


游戏目标: 按画面中出现的文字的颜色来选择颜色，千万不要被颜色的困局打扰，眼睛一定要放亮哦，游戏开始时会有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">分数 :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>


以上就是本文的全部内容，希望大家能够挑战成功。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: