这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战
介绍
刚刚掘金沸点发起的春节小游戏结束了，大家玩的还开心么，不知道你的成绩达标了没，反正我是认真玩过每一款游戏的达标后发出截图的，但有些游戏确实挺杀时间的，那有没有什么手段让你快乐的迅速通关呢。有的，因为是web前端的游戏，有那样一句话，但凡是前端传的数据默认都是不可信的。接下来就带大家用前端程序员的方式打开这几款小游戏。当然，你要提前看懂他们的源码逻辑和游戏规则才好进行下去。当然，本期我们的最终目的还是学习如何通过谷歌浏览器控制台太来调试页面，应对不同问题的方案。这些小游戏大家还是通过自己努力来完成的才有意义，这样才是尊重游戏开发者。
正文
布老虎
这款作品是我发布在codepen上，在codepen上玩过的小伙伴应该知道，codepen没有什么秘密，单纯分享创意的一个平台，都可以查看源码然后可以修改都行，控制台都用不到，而且我没把它弄成闭包，打开控制台也可以随意输出调试，因为这个作品创造之初其实没按照游戏去做的，就是单纯的想画一个css卡通造型，又因为感觉有点单调就加了一点互动。
这里activeIndex就代表了哪颗是坏牙。直接打开控制台输入activeIndex，就可以看到了。
如果你看懂了逻辑，那么恭喜你连点击鼠标触发牙齿都不用了，可以等加载完页面再在打开控制台输入这些：
document.querySelectorAll(".tooth span").forEach((item,index)=>{
if(index!=activeIndex) item.click()
})
document.querySelectorAll(".tooth span")[activeIndex].click()
那么，你连点鼠标的操作都省了，但是这一切都是要建立在阅读源码学习之后进行的。
扫雷
玩过扫雷的都知道，非常杀时间和脑细胞，有时候还要考验运气，本作是在vue上开发构建的，发布后源码自动做了混淆压缩处理，但还是可以看的眉目的，我们打开控制台，探索他的主逻辑就可以找到他的初始化方法，给予断点。
我们看到s是这数组，里面存放着雷点的标记，0是无，1是有，那么就简单了，我们右键把这个参数放到控制台当全局变量，然后我们就变量每个格子，让他自动判断触发便是。
代码如下：
let nodes = document.querySelectorAll(".mine-sweeper-item")
temp1.forEach((item,index)=>{
if(item==0) nodes[index].click()
})
再或者，再把断点往上加，让它生成数组之前改变雷点的个数e，这里改成1。那么我们点击一下就在16x16的区域里，就剩下一颗雷了。
如下图：
抢票
这是一个用vue做的打字机小游戏，如果用控制台调试跟扫雷是差不多的。下面我们打断点，把vue实例提取到全局里，看懂源码就可以为所欲为了。直接调取成功页面，或者把单词数目改成1都可以。
另外，如果不想通过打断点来实现的话也容易，我们要读取每次单词出现的节点，然后赋值给要输入的文本框就可以了。
for(let i = 0;i<30;++i){
(function(i){
setTimeout(()=>{
const event = document.createEvent('HTMLEvents')
event.initEvent('input', false, true)
document.querySelector(".word-input").value = document.querySelector(".word").innerText
document.querySelector(".word-input").dispatchEvent(event)
},50*i)
})(i)
}
因为vue要激活input绑定事件所以要通过用过document.createEvent('HTMLEvents')做出一个input事件来触发vue的input这样才算有效。又因为一共有30道题，我们就遍历处理就行了。
打年兽
这也是一个用vue做的类似于·打飞机的小游戏，无非是这个年兽血量太厚了，不管怎么打，最少也要一分钟而且要保持高度集中，一旦被领导发现就gg了，别问我怎么会说这些，因为我第一次玩打到1分09秒，然后被领导发现了。算了，言归正传，其实调试起来跟上面的机会一样，我还是打断点在控制台把血量改少，子弹威力加强，射速变快都可以实现。
当然如果有只想答题的朋友可以让子弹自动跟踪年兽，如下：
function run(){
window.requestAnimationFrame(()=>{
document.querySelectorAll(".bullet").forEach(b=>{
b.style.left = parseInt(document.querySelector(".nianshou").style.marginLeft,10) + 100 + "px";
})
console.log('step')
run()
})
}
run()
我们这里用window.requestAnimationFrame不断循环把子弹位置直接和年兽位置去绑定便可实现。
结语
最后，还是希望认真对待每一个人的作品，看看针对不同问题的处理逻辑，对自己也是一种提高。以上涉及到的一些调试方法可以用到自己的线上的项目去实测调试问题，而且不同问题不同分析去调试。当然最重要的是，需要绷着一根弦不要过分相信自己的前端数据，很多时候也是要提醒后端同学验证下数据的，不要懒惰。
好了，祝大家玩的开心，虎年大吉~
