網頁顏色分辨測試小游戲的js化辨別及優化

　　相信大家都玩過一種網頁游戲，通俗的可以叫顏色分辨測試游戲(這個名字對不對我也不知道，不要在意這些細節)，也就是下面截圖這個玩意，一看就明白；細細把玩過一段時間，作為一個一百米開外男女不分的弱視青年，每每過不了幾關就掛了，對這個結局我也是異常無語，都怪當初學習太用功了(呵呵)，想挑戰的點擊這里

　　這個游戲的流程就是頁面上會出現不同顏色的格子，也就是div啦，點擊顏色唯一的格子就算過關，然后格子變多(max后不再變多)，顏色變的相近，難度也就變大了，直到點錯了或者倒計時結束了，很簡單的樣子，作為前端人員后不猶豫的F12之，如下：

　　就是這個結構啦，#box中一串span，其中有個span的style:background是唯一的，點擊這個唯一的就OK啦，於是我就順其自然的想用腳本代替我逐個點擊，沒辦法視力不行啊，還想省力，於是直接碼之如下：

//取到所有background
var stylelist = new Array();

$("#box span").each(function() {
    for(var i = 0; i < $("#box span").length; i++) {
        stylelist[i] = $(this).attr("style");
    }
});
//分割數組
var s = stylelist.join(",") + ",",
    copy;
for(var i = 0; i < stylelist.length; i++) {
    //取出唯一style
    if(s.replace(stylelist[i] + ",", "").indexOf(stylelist[i] + ",") > -1) {
        copy = stylelist[i];
    }
}
//不解釋了吧
$("#box span").each(function() {
    if($(this).attr("style") != copy) 
    $(this).click(); 
    return;
});

　　然后上面的代碼就可以代替手動點擊了，很方便有木有，下面是我實測運行的結果：(如果有純手點的記錄超過我這個的，請收下我的膝蓋)

 

　　168關，你沒有看錯，就是168，一分鍾時間通過168關，而且中間有瀏覽器反應的緩慢時間，所以真實的應該比這個還要高(開始有點理解游戲外掛了啊喂)，但是這段代碼太粗糙了(span少可以秒)，效率很低，這個后面會繼續說；

　　如果有人問，橋豆麻袋~你是怎么運行的，瀏覽器上運行？這就說明你很少用瀏覽器調試啊，方法如下：

　　簡單粗暴直接運行就行了，當然這也不是最優的選擇，因為每次到新關卡(新頁面)都要手動去運行，也着實累手(回車鍵一臉委屈)，可以考慮封裝成瀏覽器插件，頁面進來就自動運行了，省心省力~~

　　接着上面所的效率說，來優化這段代碼，之所以說這段代碼粗糙，是因為它是遍歷所有span,這里是不多所以幾乎是秒過，如果是span很多或者性能要求極致的大廠，這段代碼是通不過的，優化的方案就是遍歷所有的span的style的時候，第一次遇到唯一style就操作了，比如有10000個格子，第十個就是不同的格子，所以只要遍歷到這里就結束了，而不是遍歷10000，不然瀏覽器君表示扛不住啊。。。話不多說碼之如下：

 

var stylelist = new Array(),
    copy; 
$("#box span").each(function() {
    for(var i = 0; i < $("#box span").length; i++) {
        stylelist[i] = $(this).attr("style");
        //初始格子數大於2
        for(var j=0;j<stylelist.length;j++){
            if(stylelist.toString().replace(stylelist[j],"").indexOf(stylelist[j])>-1){ 
                copy = stylelist[j];
            }
            return;
        }
    }
});
//這里不知道還能不能優化，先mark一下
$("#box span").each(function() {
    if($(this).attr("style") != copy) 
    $(this).click(); 
    return;
});

 　　好吧，其實順起來看很簡單，然而實現容易，最優不易，極致的優化要求對於編寫者是個十足的考驗，畢竟寫的都是經驗積累啊，今天先碼到這里吧，文中如有紕漏或更好的方法歡迎小伙伴們指出。

 

-------------------------------------腦袋被門夾后的華麗分割線------------------------------------------------

 　　果然手動操作是個愚蠢至極的方式啊，一直懷疑click那里有問題，沒有注意到頁面沒刷新(以頁面刷新的角度思考的，所以才提到瀏覽器插件 汗)，剛剛一位小伙伴從頭_再來給出這個思路，使用setTimeout自動循環，解決了這個問題，贊啊，厲害了word哥，受教，下面是跑分，完爆168

　　

　　代碼如下，小伙伴們共同鑒賞：

(function findSpan(){
var spanList=document.getElementById("box").children,
spanLen=spanList.length;

if(spanLen==0){
return;
}

function getColor(index){
return spanList[index].style.backgroundColor;
}

function isDiffSpan(index){
return getColor(index)!=getColor((index+1)%spanLen) 
&& getColor(index)!=getColor((index+2)%spanLen);
}

for(var i=0;i<spanList.length;i++){
if(isDiffSpan(i)){
spanList[i].click();
break;
}
}

setTimeout(findSpan,10);
})();

　　

　　最后根據小伙伴的提示稍稍改動了下我的代碼，可以跑7000左右，暴力了(跑的網頁秒表都動不了。。。)，不過隱隱感覺click那里還有問題，先放出這一版修改：

　　

(function autoFind() {
    var stylelist = new Array(),
        copy;
    $("#box span").each(function() {
        for(var i = 0; i < $("#box span").length; i++) {
            stylelist[i] = $(this).attr("style"); 
            for(var j = 0; j < stylelist.length; j++) {
                if(stylelist.toString().replace(stylelist[j], "").indexOf(stylelist[j]) > -1) {
                    copy = stylelist[j];
                }
                return;
            }
        }
    }); 
    $("#box span").each(function() {
        if($(this).attr("style") != copy)
            $(this).click();
        return;
    });
    setInterval(autoFind, 10);
})()

　　有想繼續挑戰的小伙伴可以嘗試破了這個記錄。