50行代码写的一个插件，破解一个H5小游戏

小游戏链接：测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline

废话不多说，先放代码：

window.onload = function () {
	console.log("点击开始测试-------");
	//点击开始按钮
	var play = document.getElementsByClassName('play-btn');
	play[0].click();
	//获取画布盒子
	// sleep(1);
	var box = document.getElementById('box');
	var num = box.children.length;
	console.log('共有'+ num + '个字元素');
	//把第一个元素定义为基础色
	var color = [];
	var basecolor = box.children[0].style.backgroundColor;
	console.log(basecolor);
	//循环

	function clickButton() {
		console.log('下一关');
		 box = document.getElementById('box');
		 num = box.children.length;
		 color = [];
		 basecolor = box.children[0].style.backgroundColor;
		// console.log('进入下一关');
		for (var i = 1; i < num ; i++) {
			color[i] = box.children[i].style.backgroundColor;
		}
		for (var i = num-1; i >0 ; i--) {
			if (color[i]!=basecolor && color[i-1] ==basecolor) {
				box.children[i].click();
				console.log("点击第"+(i+1)+'个元素');
			} else if (color[i]!=basecolor && color[i-1] !=basecolor) {
				box.children[0].click();
				console.log("点击第"+1+'个元素');
			}
		}

	}
	setInterval(clickButton,300);

}

游戏界面：

思路都在代码里了，就是取到全部的色块元素，拿CSS对比，找到不一样那个，JS点击，进入下一关。当然，代码写的很粗糙，还有改进的空间。轻喷。

说一下流程：

首先呢，我们要把JS代码注入到游戏页面中，这个我是通过把代码打包成浏览器插件实现的。我做的谷歌浏览器的插件，当然你也可以做360的，火狐的，等等。

具体不同浏览器的插件的方法，你可以通过百度，在CSDN上找到对应的文章。

如果有人想试一下的话，可以下载这个谷歌浏览器的插件：

链接: https://pan.baidu.com/s/1yASkGKcrz1pPt0vY6gxqeg 提取码: jvcu

插件安装方法：

解压文件到一个好找的文件夹，然后 谷歌浏览器-》设置-》更多工具-》拓展程序-》开发者模式打开-》加载已解压的插件。

插件使用：

打开游戏界面，，插件就会自动运行，如果出问题的话，就多刷新几次。

放在最后：

体验几次之后就把插件移除吧，代码写的不完善，插件会在每个页面都运行，而JS里有一个定时器，因而可能会拖累浏览器的速度。