小游戏链接：测测你的眼睛对色差的辨识度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里有一个定时器，因而可能会拖累浏览器的速度。