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 相关文章推荐
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
根德YB400的电路分析
2021/03/02 无线电
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
js日期时间补零的小例子
2013/03/05 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
初始Nodejs
2014/11/08 NodeJs
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
常用jQuery代码分享
2015/07/14 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
Python实现的读写json文件功能示例
2018/06/05 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
《赶海》教学反思
2014/04/20 职场文书
大气污染防治方案
2014/05/19 职场文书
学雷锋宣传标语
2014/06/25 职场文书
实名检举信范文
2015/03/02 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电