網頁顏色分辨測試小遊戲的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);
})()

　　有想繼續挑戰的小夥伴能夠嘗試破了這個記錄。