大家好，我是若川。源码共读《1个月，200+人，一起读了4周源码》 活动进行到第五期了，欢迎点链接加我微信 ruochuan12 报名参加。
前言
前段时间群里分享了一个小游戏，多次怀疑自己的眼睛以后，尝试去写个外挂。中间的过程算是一个典型的分析网页源码的步骤，于是整理这篇文章分享出来。
游戏传送门：找方块
具体工作
1 打开资源面板
通过 f12/ctrl + shift + i/cmd + shift + i 打开检查，点击 sources 标签打开资源面板。
2 了解系统结构
展开 res 文件夹，可以看到，整个小游戏的资源文件很少，主要就是相关图片以及一个负责主要逻辑的 game.min.js 文件。
3.定位判断逻辑
有群友想通过自动获取颜色不同的区域并点击来实现外挂程序，一开始我的思路也是这样，后来变了，如果我能找到游戏结束的判断逻辑，并让它一直保持成功，即可实现“无敌”。
于是我就通过以下几个步骤来定位游戏结束的判断部分。
3.1 格式化源文件
在资源面板中点开 game.min.js 文件，通过图中所示，点击 Pretty print 格式化源代码，得到如下效果。
为了更好的查找代码，点击代码区域 cmd + a/ctrl + a 全选所有代码，拷贝至 vs code 中。vsc 里 cmd + n/ctrl + n 随便新建一个文件粘贴就行，无需保存。然后 cmd + k, m/ctrl + k, m 选择 javascript 格式，高亮一下代码。也可以点击图中右下角的 plain text 进行切换。
3.2 查找资源链接
通过 cmd + f/ctrl + f 在源文件中搜索游戏结束的资源文件，可以得到如下结果。
通过这个变量定位出 gameEndAction 方法。
通过上面的方法，定位到判断逻辑处。
分析一下 judgeIsBlockTouch 即可发现这里便是判断逻辑的关键处。
4 拦截游戏
在 judgeIsBlockTouch 方法中增加一个断点，并任意点击一次游戏区域，这时我们就已经走到了这个方法中了。
分析该方法我们可以知道，方法逻辑是通过判断点击位置是否在矩形区域中，来决定玩家是否过关，我们把成功的后执行的代码拿出来，并在 console 中运行一次。
中断 debugger 你会发现，即使我们点击的不是正确位置，我们依旧进入了下一关。此时，我们便已经“无敌”了。
5 重写判断逻辑
到上一步，我们还只能每次点击以后，通过在 console 中执行一次成功逻辑来绕过判断，这样的外挂又怎么行呢，所以我们要想办法修改游戏内部运行逻辑，也就是 judgeIsBlockTouch 方法。
而想要修改它，我们得知道它定义在哪个对象里的。
一开始我是找到控制整个游戏的对象，也就是 cc 上，可是发现里面的逻辑需要花时间进行梳理。然后我决定从 judgeIsBlockTouch 定义上进行分析。沿着代码一直上滑，可以看到它是定义在 GameLayer 上的。
我们在控制台中打印这个对象，发现是个方法，那么即使我们不知道 cc.Layer.extend 里做了什么，我们也知道 GameLayer 是个类方法了。
我们现在有两种方式来修改 judgeIsBlockTouch 方法。第一种是修改 cc 上的实例对象，这个不好拿，得逐步分析。第二种，直接修改 GameLayer 这个类。尝试一下获取这个方法。
拿到了就好办，执行下面的代码，然后验证。
OK，至此，在游戏里任意点击都能过关了。
总结
写这篇文章，只是为了分享这个外挂实现过程中的分析过程，里面的原理放到其他系统中也是通用的。这个分析方式，也是我遇到一些比较难复现的 bug 时，在生产中使用的分析方法，各位不要乱用哦，造成的后果作者概不负责。
最近组建了一个江西人的前端交流群，如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
················· 若川简介 ·················
你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，活跃在知乎@若川，掘金@若川。致力于分享前端开发经验，愿景：帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
