微信小游戲的前端攻城獅玩法

habren 發(fā)布于2019-08-22 17:12 / 2614人閱讀

摘要：轉(zhuǎn)自自己在開(kāi)源中國(guó)上的博客前言公司群里經(jīng)常有人會(huì)發(fā)一些微信小游戲，每次下面都會(huì)跟好多曬分截圖。因?yàn)榍岸斯コ仟{有前端攻城獅的玩法。取消斷點(diǎn)繼續(xù)游戲。這時(shí)在手機(jī)微信里訪問(wèn)游戲的鏈接，在端里就可以看到手機(jī)發(fā)出的請(qǐng)求。

轉(zhuǎn)自自己在開(kāi)源中國(guó)上的博客：https://my.oschina.net/u/7247...

前言

公司群里經(jīng)常有人會(huì)發(fā)一些微信小游戲，每次下面都會(huì)跟好多曬分截圖。比如這個(gè)《看你有多色》的考察眼力的（瞎眼）小游戲。

別人的截圖都是25分左右，還有30分以上的。自己玩了兩把，20分都沒(méi)上，于是只能悻悻的悶聲當(dāng)沒(méi)看見(jiàn)。但如果你是一名前端攻城獅，并且還有一臺(tái)電腦在手邊，那就大不一樣了。因?yàn)椋呵岸斯コ仟{有前端攻城獅的玩法。

準(zhǔn)備材料

手機(jī)一個(gè)（廢話）

電腦一臺(tái)

手機(jī)和電腦都可以連的WIFI

研究源碼

首先當(dāng)然得知道游戲本身是怎樣的玩啦。用瀏覽器打開(kāi)游戲頁(yè)面，打開(kāi) F12。

可以看到這個(gè)頁(yè)面內(nèi)嵌了一個(gè) iframe，真正的游戲頁(yè)面其實(shí)是這個(gè) http://9g.game6.cn/ssssds/gam...，打開(kāi)之。

DOM 結(jié)構(gòu)并不是很復(fù)雜。下面引入了一個(gè) main.min.js，估計(jì)就是控制游戲的主代碼了。但也不著急看代碼內(nèi)容，先點(diǎn)擊開(kāi)始游戲。

游戲開(kāi)始倒計(jì)時(shí)。不如先把這個(gè)時(shí)間改長(zhǎng)點(diǎn)吧。因?yàn)槊看螘r(shí)間刷新這個(gè) DOM 元素都會(huì)刷新，那么檢測(cè)這個(gè) DOM 元素的更改肯定能找到控制時(shí)間相關(guān)的代碼。審查元素，打開(kāi)右鍵菜單，Break on -> subtree modifications

斷點(diǎn)斷到了 libs.min.js 里。代碼是被壓縮過(guò)的，名字是 libs 那應(yīng)該是個(gè)第三方庫(kù)。

所以具體什么意思不用管，直接在調(diào)試工具的右側(cè)調(diào)用棧（Call stack）列表里找到最上層的用戶(hù)代碼（main.min.js）打開(kāi)。

文件名雖然以 min.js 結(jié)尾，但是縮進(jìn)還在。當(dāng)然我們也可以點(diǎn)擊左下角的 {} 按鈕進(jìn)一步美化代碼。

可以看到 DOM 操作用的是類(lèi)似 jQuery 的庫(kù)。代碼邏輯也很簡(jiǎn)單，如果當(dāng)前游戲暫停什么都不做。如果沒(méi)有暫停，時(shí)間減一。如果時(shí)間小于 0，游戲結(jié)束，否則輸出當(dāng)前時(shí)間。

那么要做的時(shí)間很簡(jiǎn)單，回到 main.min.js，在函數(shù)頭部加上一句

this.time = 60;

保存，把 DOM 斷點(diǎn)取消，繼續(xù)游戲。可以看到時(shí)間固定在了 59 不再減少。

當(dāng)然這樣做只是固定游戲時(shí)間，不如直接改分簡(jiǎn)單暴力。

每次點(diǎn)擊正確方格。左上角的得分會(huì)被改變。如上類(lèi)似操作可以容易的找到控制分?jǐn)?shù)的代碼。

檢查 得分： X 這個(gè) DOM 元素，右鍵，選擇 Break on -> subtree modifications。點(diǎn)擊一個(gè)正確的方格，斷點(diǎn)會(huì)斷到被壓縮過(guò)的 jQuery 代碼內(nèi)部。右側(cè)調(diào)用棧列表里選擇第一個(gè) main.min.js 所對(duì)應(yīng)的函數(shù) renderInfo。

很顯然這個(gè) this.lv 就是當(dāng)前的得分。那么要做的事情也很簡(jiǎn)單，直接在 Console 里把 this.lv 的值改為你想要的值。

取消斷點(diǎn)繼續(xù)游戲。得分沒(méi)有變化。別著急，那是因?yàn)槟阒皇歉牧送饷娴闹担鴮?xiě)入 DOM 元素中的值已經(jīng)傳入了 jQuery 庫(kù)內(nèi)部了。當(dāng)你再次得分時(shí)，分?jǐn)?shù)就會(huì)變?yōu)槟阆胍闹怠?/p>

分?jǐn)?shù)被改掉了，圖還是一樣的瞎眼。有沒(méi)有什么辦法能直接標(biāo)識(shí)出正確的方格呢？這時(shí)我們就必須看游戲的內(nèi)部實(shí)現(xiàn)邏輯了，需要看看這些方格是怎么被畫(huà)出來(lái)的。

于是這次直接對(duì)大方格（#box）打斷點(diǎn)，點(diǎn)擊正確的方格。

斷點(diǎn)依舊是斷到了 jQuery 里面。調(diào)用棧列表回到最后用戶(hù)代碼 renderMap 里。

可以看到這里是在用多個(gè) span 標(biāo)簽畫(huà)方格區(qū)域。所有的 span 標(biāo)簽都是相同的。然而這些方格至少得有 background-color 或者一個(gè)特別的 class 才對(duì)。

單步進(jìn)入下面的 this.api.render 方法。

可以看到這個(gè)方法就是在給 span 標(biāo)簽添加背景色了。可以看到這些 span 分為兩種 data("type", "a") 和 data("type", "b")。其中 type: b 的背景色用的是隨機(jī)生成的顏色，而 type: a 的背景色是基于 type: b 的顏色基礎(chǔ)生成的。那這個(gè) type: a 是不是就代表正確方格的意思呢？

我們?nèi)タ纯闯绦蚓烤故窃鯓优袛帱c(diǎn)擊的方格是否正確的。直接審查正確方格的元素，檢查他們綁定的 click 事件。

事件名右側(cè)有綁定事件的源代碼位置，點(diǎn)擊進(jìn)入。

對(duì)于使用第三方庫(kù)綁定的事件，代碼經(jīng)常會(huì)跳轉(zhuǎn)到第三方庫(kù)內(nèi)部代碼里，不過(guò)這次我們運(yùn)氣不錯(cuò)。可以看到：代碼首先拿出了設(shè)置在元素上的 data("type")，如果為 a 則調(diào)用 e.nextLv。我們猜的沒(méi)錯(cuò)。

那么事情就好辦了。看看原本這些 span 標(biāo)簽就有個(gè) 5px 的 border。給這個(gè) border 改個(gè)顏色好了呀。

回到之前的 render 函數(shù)里，給 type: a 的 span 標(biāo)簽的邊框改個(gè)顏色：

span.css("border-color", "black")

繼續(xù)游戲，正確的方格有了顯眼的邊框，這下不會(huì)再瞎眼了。

實(shí)行魔改

這下萬(wàn)事俱備，就差把我們的改動(dòng)放到手機(jī)端了。這時(shí)我們要請(qǐng)出移動(dòng)端調(diào)試神器 Charles。

如圖所言，Charles 是一個(gè)跨平臺(tái)的網(wǎng)頁(yè)調(diào)試代理工具。Windows 上有免費(fèi)的 Fiddler，然而 Fiddler 是用 .NET 寫(xiě)的，在 macOS 上不太玩的轉(zhuǎn)。跨平臺(tái)（Java 寫(xiě)）的 Charles 卻是收費(fèi)軟件，有錢(qián)的可以支持一下原作者開(kāi)發(fā)，沒(méi)錢(qián)的也可以簡(jiǎn)單的用你懂的方式搞定。

我們要做的事情就是啟用手機(jī)代理到你的電腦上。首先查看電腦 IP。macOS 有個(gè)簡(jiǎn)單的查看本機(jī)內(nèi)網(wǎng) IP 的方法：按住 Option 鍵點(diǎn)擊系統(tǒng)菜單欄上的 WiFi 圖標(biāo)（當(dāng)然你非要 ifconfig 也不是不可以）

保證 Charles 為打開(kāi)狀態(tài)。在手機(jī)上，打開(kāi)系統(tǒng)設(shè)置，將 WiFi 的代理設(shè)置為你電腦的 IP，端口號(hào) 8888

手機(jī)上隨便進(jìn)行一個(gè)需要網(wǎng)絡(luò)請(qǐng)求的操作，Charles 會(huì)要求你確認(rèn)是否允許接入代理請(qǐng)求，點(diǎn)擊 Allow 允許此操作。

這時(shí)在手機(jī)微信里訪問(wèn)游戲的鏈接，在 PC 端 Charles 里就可以看到手機(jī)發(fā)出的 HTTP 請(qǐng)求。

注意，手機(jī)端瀏覽器自己的緩存經(jīng)常讓服務(wù)器返回 204 或者根本不發(fā)出請(qǐng)求。這時(shí)可以嘗試開(kāi)啟 Charles 的 Tools -> No Caching 并多刷新頁(yè)面解決，實(shí)在不行就得清除對(duì)應(yīng) APP 的數(shù)據(jù)。

找到需要修改的文件 main.min.js，右鍵，選擇 Breakpoints

這時(shí)就給這個(gè)文件 URL 的請(qǐng)求打了斷點(diǎn)。手機(jī)上刷新頁(yè)面。首先會(huì)收到 Request，點(diǎn)擊 Execute 放行。

然后會(huì)受到 Response。這時(shí)點(diǎn)擊右側(cè)的 Edit Response，然后點(diǎn)擊下面的 JavaScript，善用查找功能把代碼改掉

點(diǎn)擊 Execute，爽去吧

截圖跟同事顯擺一下。如果他問(wèn)你圖是不是 P 的，那你可以詛咒發(fā)誓絕對(duì)沒(méi)有。本來(lái)就是純手點(diǎn)的嘛~~~

全文完