网页颜色分辨测试小游戏的JS化辨别及优化

always_fly

相信大家都玩过一种网页游戏，通俗的可以叫颜色分辨测试游戏(这个名字对不对我也不知道，不要在意这
些细节)，也就是下面截图这个玩意，一看就明白；细细把玩过一段时间，作为一个一百米开外男女不分的
弱视青年，每每过不了几关就挂了，对这个结局我也是异常无语，都怪当初学习太用功了(呵呵)，


　　这个游戏的流程就是页面上会出现不同颜色的格子，也就是div啦，点击颜色唯一的格子就算过关，然
后格子变多(max后不再变多)，颜色变的相近，难度也就变大了，直到点错了或者倒计时结束了，很简单的
样子，作为前端人员后不犹豫的F12之，如下：



　　就是这个结构啦，#box中一串span，其中有个span的style:background是唯一的，点击这个唯一的就
OK啦，于是我就顺其自然的想用脚本代替我逐个点击，没办法视力不行啊，还想省力，于是直接码之如下：

复制代码

1. //取到所有background
   
2. var stylelist = new Array();
   
3. 
   
4. $("#box span").each(function() {
   
5.     for(var i = 0; i < $("#box span").length; i++) {
   
6.         stylelist[i] = $(this).attr("style");
   
7.     }
   
8. });
   
9. //分割数组
   
10. var s = stylelist.join(",") + ",",
    
11.     copy;
    
12. for(var i = 0; i < stylelist.length; i++) {
    
13.     //取出唯一style
    
14.     if(s.replace(stylelist[i] + ",", "").indexOf(stylelist[i] + ",") > -1) {
    
15.         copy = stylelist[i];
    
16.     }
    
17. }
    
18. //不解释了吧
    
19. $("#box span").each(function() {
    
20.     if($(this).attr("style") != copy)
    
21.     $(this).click();
    
22.     return;
    
23. });

复制代码

复制代码
　　然后上面的代码就可以代替手动点击了，很方便有木有，下面是我实测运行的结果：(如果有纯手点的
记录超过我这个的，请收下我的膝盖)





　　168关，你没有看错，就是168，一分钟时间通过168关，而且中间有浏览器反应的缓慢时间，所以真实
的应该比这个还要高(开始有点理解游戏外挂了啊喂)，但是这段代码太粗糙了(span少可以秒)，效率很低，
这个后面会继续说；

　　如果有人问，桥豆麻袋~你是怎么运行的，浏览器上运行？这就说明你很少用浏览器调试啊，方法如下：



　　简单粗暴直接运行就行了，当然这也不是最优的选择，因为每次到新关卡(新页面)都要手动去运行，也
着实累手(回车键一脸委屈)，可以考虑封装成浏览器插件，页面进来就自动运行了，省心省力~~

　　接着上面所的效率说，来优化这段代码，之所以说这段代码粗糙，是因为它是遍历所有span,这里是不
多所以几乎是秒过，如果是span很多或者性能要求极致的大厂，这段代码是通不过的，优化的方案就是遍
历所有的span的style的时候，第一次遇到唯一style就操作了，比如有10000个格子，第十个就是不同的格
子，所以只要遍历到这里就结束了，而不是遍历10000，不然浏览器君表示扛不住啊。。。话不多说码之
如下：



复制代码

1. var stylelist = new Array(),
   
2.     copy;
   
3. $("#box span").each(function() {
   
4.     for(var i = 0; i < $("#box span").length; i++) {
   
5.         stylelist[i] = $(this).attr("style");
   
6.         //初始格子数大于2
   
7.         for(var j=0;j<stylelist.length;j++){
   
8.             if(stylelist.toString().replace(stylelist[j],"").indexOf(stylelist[j])>-1){
   
9.                 copy = stylelist[j];
   
10.             }
    
11.             return;
    
12.         }
    
13.     }
    
14. });
    
15. //这里不知道还能不能优化，先mark一下
    
16. $("#box span").each(function() {
    
17.     if($(this).attr("style") != copy)
    
18.     $(this).click();
    
19.     return;
    
20. });

复制代码

复制代码

jiazurongyu

这个文章还是不错的