• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

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

jQuery/JavaScript 薛 陈磊 458次浏览 0个评论 扫描二维码

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

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

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

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

就是这个结构啦,#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];
	}
}  
$(this).click();
return;
});

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

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

 

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

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

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

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

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

//取到所有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];
	}
}  
$(this).click();
return;
});

 好吧,其实顺起来看很简单,然而实现容易,最优不易,极致的优化要求对于编写者是个十足的考验,毕竟写的都是经验积累啊,今天先码到这里吧,文中如有纰漏或更好的方法欢迎小伙伴们指出。

 

————————————-脑袋被门夹后的华丽分割线————————————————

 果然手动操作是个愚蠢至极的方式啊,一直怀疑click那里有问题,没有注意到页面没刷新(以页面刷新的角度思考的,所以才提到浏览器插件 汗),刚刚一位小伙伴从头_再来给出这个思路,使用setTimeout自动循环,解决了这个问题,赞啊,厉害了word哥,受教,下面是跑分,完爆168网页颜色分辨测试小游戏的JS化辨别及优化

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

代码如下,小伙伴们共同鉴赏:

(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);
})()

有想继续挑战的小伙伴可以尝试破了这个记录网页颜色分辨测试小游戏的JS化辨别及优化


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明网页颜色分辨测试小游戏的JS化辨别及优化
喜欢 (1)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址