设计《找色差小游戏》 自动化脚本

今天在B站看到某UP主用 Python 写了一个《找色差小游戏》自动化脚本，看着挺意思的，自己玩了下这个游戏，最多到25关就不行了，我想着我干嘛不用JavaScript写个自动化脚本，let`s do it

游戏网址： http://www.cuishuai.cc/game/

---

---

这位UP主 做的脚本相对较复杂，咱们就做个相对简单的。

---

准备工具：

• 浏览器： 火狐或者Google
• 支持运行js脚本的浏览器插件：Tampermonkey
  

---

设计思路：

1. 先F12打开小游戏网页代码查看器
   
2. 可以很快看出只要找出并点击span标签颜色与其他span标签颜色不同的即可进入下一关。
3. 把这些span标签看成一个数组，其实就是找出数组中的唯一值，可看出一个经典算法 – 查找重复元素的反向思考。（好简单呀~ 😎😎）

---

代码实现：

有了思路，写代码那岂不是 So easy ~~

var btn = document.getElementsByTagName("button"); // 获取开始游戏按钮集合

// 添加监听事件
btn[2].addEventListener('click',runScript()) // 开始游戏

// 脚本函数
function runScript() {
    var time =  prompt("请输入答题速度：(s)") // 自定义速度
    if (!time||time==0) time = 1; // 默认一秒
    setInterval(() => {
        var box = document.getElementById("box").children;
            for (let i = 0; i < box.length; i++) {
                var index = 0; 
    
                // 经典算法，查找重复算法反向思考
                Object.entries(box).forEach(item => {
                    item[1].attributes.style.value === box[i].attributes.style.value ? index++ : index // 字符串比较，相同则index++
                });
                if (index == 1){
                    box[i].click()
                    break // 找到目标并点击完立刻结束循环，等待进入下一关
                }
          }
    }, time*1000)
}

1. 一开始我是想直接 document.getElementById("btn"） 获取 开始游戏按钮 button 节点，但是始终获取不到，一直为null ，所以我换个思路用 document.getElementsByTagName("button") 获取所有标签名为 button 的节点集合，这下就好了，需要用哪个节点，直接以数组索引来找。
   
2. attributes.style.value 通过查看获取节点有哪些api得到的，如下查看
   

---

代码导入 Tampermonkey 插件中， ctrl + s 保存

---

脚本启动效果：