大家好，我是若川。源碼共讀《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年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~