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