js仿3366小游戏选字游戏


Posted in Javascript onApril 14, 2016

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

游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束。
操作说明: 鼠标点击选择颜色

1、效果图:

原图:

js仿3366小游戏选字游戏

js仿3366小游戏选字游戏

模仿:

js仿3366小游戏选字游戏

代码:

<!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>

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

Javascript 相关文章推荐
JS的反射问题
Apr 07 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
jquery实现拖动效果
Aug 10 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 #Javascript
Node.js实现数据推送
Apr 14 #Javascript
node.js实现端口转发
Apr 14 #Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 #Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 #Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现泊松图像融合
2018/07/26 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
如何将json数据转换为python数据
2020/09/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
专业实习自我鉴定
2013/10/29 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
让世界充满爱观后感
2015/06/10 职场文书