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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
初识Node.js
Mar 20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
js实现小球在页面规定的区域运动
Jun 16 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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
全文搜索和替换
2006/10/09 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
浅析python 字典嵌套
2020/09/29 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
建筑学推荐信
2013/11/03 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
合伙购房协议样本
2014/10/06 职场文书
房屋所有权证明
2014/10/20 职场文书
校友回访母校寄语
2015/02/26 职场文书
英语辞职信怎么写
2015/02/28 职场文书
水电施工员岗位职责
2015/04/11 职场文书
管辖权异议上诉状
2015/05/23 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫