轉自自己在開源中國上的博客：https://my.oschina.net/u/7247...

前言

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

別人的截圖都是25分左右，還有30分以上的。自己玩了兩把，20分都沒上，于是只能悻悻的悶聲當沒看見。但如果你是一名前端攻城獅，并且還有一臺電腦在手邊，那就大不一樣了。因為：前端攻城獅有前端攻城獅的玩法。

準備材料

• 手機一個（廢話）
• 電腦一臺
• 手機和電腦都可以連的WIFI

研究源碼

首先當然得知道游戲本身是怎樣的玩啦。用瀏覽器打開游戲頁面，打開 F12。

可以看到這個頁面內嵌了一個 iframe，真正的游戲頁面其實是這個 http://9g.game6.cn/ssssds/gam...，打開之。

DOM 結構并不是很復雜。下面引入了一個 main.min.js，估計就是控制游戲的主代碼了。但也不著急看代碼內容，先點擊開始游戲。

游戲開始倒計時。不如先把這個時間改長點吧。因為每次時間刷新這個 DOM 元素都會刷新，那么檢測這個 DOM 元素的更改肯定能找到控制時間相關的代碼。審查元素，打開右鍵菜單，Break on -> subtree modifications

斷點斷到了 libs.min.js 里。代碼是被壓縮過的，名字是 libs 那應該是個第三方庫。

所以具體什么意思不用管，直接在調試工具的右側調用棧（Call stack）列表里找到最上層的用戶代碼（main.min.js）打開。

文件名雖然以 min.js 結尾，但是縮進還在。當然我們也可以點擊左下角的 {} 按鈕進一步美化代碼。

可以看到 DOM 操作用的是類似 jQuery 的庫。代碼邏輯也很簡單，如果當前游戲暫停什么都不做。如果沒有暫停，時間減一。如果時間小于 0，游戲結束，否則輸出當前時間。

那么要做的時間很簡單，回到 main.min.js，在函數頭部加上一句

this.time = 60;

保存，把 DOM 斷點取消，繼續游戲。可以看到時間固定在了 59 不再減少。

當然這樣做只是固定游戲時間，不如直接改分簡單暴力。

每次點擊正確方格。左上角的得分會被改變。如上類似操作可以容易的找到控制分數的代碼。

檢查 得分： X 這個 DOM 元素，右鍵，選擇 Break on -> subtree modifications。點擊一個正確的方格，斷點會斷到被壓縮過的 jQuery 代碼內部。右側調用棧列表里選擇第一個 main.min.js 所對應的函數 renderInfo。

很顯然這個 this.lv 就是當前的得分。那么要做的事情也很簡單，直接在 Console 里把 this.lv 的值改為你想要的值。

取消斷點繼續游戲。得分沒有變化。別著急，那是因為你只是改了外面的值，而寫入 DOM 元素中的值已經傳入了 jQuery 庫內部了。當你再次得分時，分數就會變為你想要的值。

分數被改掉了，圖還是一樣的瞎眼。有沒有什么辦法能直接標識出正確的方格呢？這時我們就必須看游戲的內部實現邏輯了，需要看看這些方格是怎么被畫出來的。

于是這次直接對大方格（#box）打斷點，點擊正確的方格。

斷點依舊是斷到了 jQuery 里面。調用棧列表回到最后用戶代碼 renderMap 里。

可以看到這里是在用多個 span 標簽畫方格區域。所有的 span 標簽都是相同的。然而這些方格至少得有 background-color 或者一個特別的 class 才對。

單步進入下面的 this.api.render 方法。

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

我們去看看程序究竟是怎樣判斷點擊的方格是否正確的。直接審查正確方格的元素，檢查他們綁定的 click 事件。

事件名右側有綁定事件的源代碼位置，點擊進入。

對于使用第三方庫綁定的事件，代碼經常會跳轉到第三方庫內部代碼里，不過這次我們運氣不錯。可以看到：代碼首先拿出了設置在元素上的 data('type')，如果為 a 則調用 e.nextLv。我們猜的沒錯。

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

回到之前的 render 函數里，給 type: a 的 span 標簽的邊框改個顏色：

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

繼續游戲，正確的方格有了顯眼的邊框，這下不會再瞎眼了。

實行魔改

這下萬事俱備，就差把我們的改動放到手機端了。這時我們要請出移動端調試神器 Charles。

如圖所言，Charles 是一個跨平臺的網頁調試代理工具。Windows 上有免費的 Fiddler，然而 Fiddler 是用 .NET 寫的，在 macOS 上不太玩的轉。跨平臺（Java 寫）的 Charles 卻是收費軟件，有錢的可以支持一下原作者開發，沒錢的也可以簡單的用你懂的方式搞定。

我們要做的事情就是啟用手機代理到你的電腦上。首先查看電腦 IP。macOS 有個簡單的查看本機內網 IP 的方法：按住 Option 鍵點擊系統菜單欄上的 WiFi 圖標（當然你非要 ifconfig 也不是不可以）

保證 Charles 為打開狀態。在手機上，打開系統設置，將 WiFi 的代理設置為你電腦的 IP，端口號 8888

手機上隨便進行一個需要網絡請求的操作，Charles 會要求你確認是否允許接入代理請求，點擊 Allow 允許此操作。

這時在手機微信里訪問游戲的鏈接，在 PC 端 Charles 里就可以看到手機發出的 HTTP 請求。

注意，手機端瀏覽器自己的緩存經常讓服務器返回 204 或者根本不發出請求。這時可以嘗試開啟 Charles 的 Tools -> No Caching 并多刷新頁面解決，實在不行就得清除對應 APP 的數據。

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

這時就給這個文件 URL 的請求打了斷點。手機上刷新頁面。首先會收到 Request，點擊 Execute 放行。

然后會受到 Response。這時點擊右側的 Edit Response，然后點擊下面的 JavaScript，善用查找功能把代碼改掉

點擊 Execute，爽去吧

截圖跟同事顯擺一下。如果他問你圖是不是 P 的，那你可以詛咒發誓絕對沒有。本來就是純手點的嘛~~~

全文完

總結

以上是生活随笔為你收集整理的微信小游戏的前端攻城狮玩法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。