首页 > 代码库 > 色盲小游戏
色盲小游戏
html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>色盲游戏</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="JiChuShiJian.js"></script> <link href="JiChuShiJian.css" rel="stylesheet" type="text/css"/></head><body> <center> <h1>检测色盲小游戏，只有把颜色全部拼成一样才可以取得胜利哦！！！刚把得。。。</h1> <hr> <div id="box" style="width: 660px;height: 660px;background: black"> <div class="divone red" style="width: 200px;height:200px; margin: 10px;float:left;"></div> <div class="divtwo green" style="width: 200px;height:200px; margin: 10px;float:left;"></div> <div class="divthree blue" style="width: 200px;height:200px; margin: 10px; float:left;"></div> <div class="divfour gainsboro" style="width: 200px;height:200px; margin: 10px; float:left;"></div> <div class="divfive pink" style="width: 200px;height:200px; margin: 10px; float:left;"></div> <div class="divsix cornflowerblue" style="width: 200px;height:200px; margin: 10px;float:left;"></div> <div class="divseven blueviolet" style="width: 200px;height:200px; margin: 10px;float:left;"></div> <div class="diveight greenyellow" style="width: 200px;height:200px; margin: 10px;float:left;"></div> <div class="divnine plum" style="width: 200px;height:200px; margin: 10px;float:left;"></div> </div> <hr> <button class="but" style="width: 100px;height: 60px;background: limegreen">验证一下</button> </center></body></html>
css
/*定义的9种颜色*/.red{ background:red;}.green{ background: green;}.blue{ background: blue;}.gainsboro{ background: gainsboro;}.pink{ background:deeppink;}.cornflowerblue{ background: cornflowerblue;}.blueviolet{ background: blueviolet;}.greenyellow{ background:greenyellow;}.plum{ background: plum;}/*标题背景色*/h1{ background: lightskyblue;}js
$(function () { //为每一个div设置单击事件 //var flag=1; $(‘.divone‘).bind(‘click‘,fn);//fn如果直接加上括号 即fn() 就相当于直接调用 刷新页面还没有单击就会执行fn里边的过程 $(‘.divtwo‘).bind(‘click‘,fn); $(‘.divthree‘).bind(‘click‘,fn); $(‘.divfour‘).bind(‘click‘,fn); $(‘.divfive‘).bind(‘click‘,fn); $(‘.divsix‘).bind(‘click‘,fn); $(‘.divseven‘).bind(‘click‘,fn); $(‘.diveight‘).bind(‘click‘,fn); $(‘.divnine‘).bind(‘click‘,fn); //为but验证按钮添加一个单机事件的监听 监听用户点击的时候验证所有的颜色是否一致 $(‘.but‘).bind(‘click‘,checkcolor); function fn(){//这个函数完成的功能：实现单机div div颜色改变 class属性值变更为 divXXX color 的形式 ////这里边先判断出 点击的是哪一个div 然后设置flag的值 //alert($(‘.divone‘)[0].nodeName); //虽然每次 class的值都在改变 但是在获取的时候只能通过最初设置的class为准 前提是在下面不能使用removeClass() //removeClass(‘XXX‘)只能这样使用 这样能够保证在调试窗口中class动态变化 但是最初设置的class属性并不会被清除 [divone red , divone green ] // 而且通过class获取的时候也是根据最初设置的值来获取的 //获取当前div的class全部名称 然后使用正则表达式进行拆分 解析出class中空格后的颜色内容的内容 //alert($(this)[0].nodeName); //alert($(this).attr(‘class‘));//这里已经能够正确打印出每次单击时 产生的class属性值divone red, divtwo green var classstring=$(this).attr(‘class‘); //alert(classstring); //接下来就要使用正则表达式进行拆分 var pattern=/\s([a-z]+)/; var result=pattern.exec(classstring);//取得divXXX后的颜色值 red green 不要忘记这里的字符串是带着空格的 var removekongge=RegExp.$1;//使用的分组 所以$1就是第一个分组中返回的数据 这样就了去除空格； //alert(typeof removekongge); /* //下面进行逐个判断 然后动态设置flag的值 让颜色的变化按照一定顺序进行 即对应颜色div在变化的时候直接从css样式表中对应颜色的下一个颜色开始 if(removekongge=="red"){ flag=1; }else if(removekongge=="green"){ flag=2; } else if(removekongge=="blue"){ flag=3; }else if(removekongge=="gainsboro"){ flag=4; }else if(removekongge=="pink"){ flag=5; }else if(removekongge=="cornflowerblue"){ flag=6; }else if(removekongge=="blueviolet"){ flag=7; }else if(removekongge=="greenyellow"){ flag=8; }else if(removekongge=="plum"){ flag=9; } if(flag==1){ $(this).removeClass(‘red‘).addClass(‘green‘); flag=2; }else if(flag==2){ $(this).removeClass(‘green‘).addClass(‘blue‘); flag=3; }else if(flag==3){ $(this).removeClass(‘blue‘).addClass(‘gainsboro‘); flag=4; }else if(flag==4){ $(this).removeClass(‘gainsboro‘).addClass(‘pink‘); flag=5; }else if(flag==5){ $(this).removeClass(‘pink‘).addClass(‘cornflowerblue‘); flag=6; }else if(flag==6){ $(this).removeClass(‘cornflowerblue‘).addClass(‘blueviolet‘); flag=7; }else if(flag==7){ $(this).removeClass(‘blueviolet‘).addClass(‘greenyellow‘); flag=8; }else if(flag==8){ $(this).removeClass(‘greenyellow‘).addClass(‘plum‘); flag=9; }else if(flag==9){ $(this).removeClass(‘plum‘).addClass(‘red‘); flag=1; } */ //简化写法 if(removekongge=="red"){ $(this).removeClass(‘red‘).addClass(‘green‘); }else if(removekongge=="green"){ $(this).removeClass(‘green‘).addClass(‘blue‘); } else if(removekongge=="blue"){ $(this).removeClass(‘blue‘).addClass(‘gainsboro‘); }else if(removekongge=="gainsboro"){ $(this).removeClass(‘gainsboro‘).addClass(‘pink‘); }else if(removekongge=="pink"){ $(this).removeClass(‘pink‘).addClass(‘cornflowerblue‘); }else if(removekongge=="cornflowerblue"){ $(this).removeClass(‘cornflowerblue‘).addClass(‘blueviolet‘); }else if(removekongge=="blueviolet"){ $(this).removeClass(‘blueviolet‘).addClass(‘greenyellow‘); }else if(removekongge=="greenyellow"){ $(this).removeClass(‘greenyellow‘).addClass(‘plum‘); }else if(removekongge=="plum"){ $(this).removeClass(‘plum‘).addClass(‘red‘); } } function checkcolor(){//这个函数完成的功能就是：获取目前页面上所有div的class值 并且得到 divXXX color中的color值 比较他们的color是否一样 如果一样 则游戏过关 var divall=$(‘#box div‘);//获取了9个div颜色块 //下面进行遍历 var flag=null; var result=true; divall.each(function (index,element) { //alert($(element).attr(‘class‘));//可以打印出9个div的class属性值 //var str=$(element).attr(‘class‘); var pattern=/\s([a-z]+)/;//创建正则表达式 使用分组 //pattern.test($(element).attr(‘class‘));//使用RegExp方法之前需要先执行以下test 或者exec方法 var removekongge=pattern.exec($(element).attr(‘class‘))[1];//去除了空格 这里得到的就是 color数值 if(flag==null){ flag=removekongge; //alert("第一次为空啊"); }else{ //如果不为空 那么就进行颜色的比较 如果不相等 就直接跳出返回false 说明颜色不一致 否则 判断到最后 返回true //alert("判断吧"); if(flag!=removekongge){//不相等 返回false result=false; } } }); //遍历完毕 下面判断result的值 if(result){ alert("看来你不是色盲。。。"); }else{ alert("你是色盲啊，，，少年"); } }})
色盲小游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。