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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
vue实现购物车选择功能
Jan 10 Javascript
详解vue组件之间的通信
Aug 30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php类自动加载器实现方法
2015/07/28 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
Python3实现购物车功能
2018/04/18 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python/golang 删除链表中的元素
2020/09/14 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
音乐专业自荐信
2014/02/07 职场文书
作风建设整改方案
2014/10/27 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
作弊检讨书范文
2015/05/06 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python import模块的缓存问题解决方案
2021/06/02 Python
Redis Stream类型的使用详解
2021/11/11 Redis