大家好,我是若川。源码共读《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 私信 江西 拉你进群。
推荐阅读
1个月,200+人,一起读了4周源码
我读源码的经历
老姚浅谈:怎么学JavaScript?
我在阿里招前端,该怎么帮你(可进面试群)
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~