js仿3366小游戏选字游戏

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

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

1、效果图：

原图：

模仿：

代码：

 
  
    
    
    
      .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;
 
      }

      .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;
      }
    
  
 
  
    
      
 时间:10s
 分数 :0
      
      
 蓝
 根据上面的字的颜色从下面选择正确的字,选择正确自动开始
      
      
 红
 绿
 黑
 蓝
 黄
      
    
  
  
 

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