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操作数据库的实例代码
Oct 17 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
PHP提取中文首字母
2008/04/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
jQuery事件对象总结
2016/10/17 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[00:11]战神迅矛
2019/03/06 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
使用requests库制作Python爬虫
2018/03/25 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python列表推导式入门学习解析
2019/12/02 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
联强国际笔试题面试题
2013/07/10 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
出纳的岗位职责
2013/11/09 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
常务副总经理任命书
2014/06/05 职场文书
员工加薪申请报告
2015/05/15 职场文书
2016大一新生军训感言
2015/12/08 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫