色盲小遊戲
阿新 • • 發佈：2017-06-04
query 背景 true res exe n) class color 正則
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("你是色盲啊，，，少年");
}
}
})
色盲小遊戲