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