网页颜色分辨测试小游戏的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);
})()

　　有想继续挑战的小伙伴能够尝试破了这个记录。