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

前言

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

別人的截圖都是25分左右，還有30分以上的。本身玩了兩把，20分都沒上，因而只能悻悻的悶聲當沒看見。但若是你是一名前端攻城獅，而且還有一臺電腦在手邊，那就大不同了。由於：前端攻城獅有前端攻城獅的玩法。

準備材料

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

研究源碼

首先固然得知道遊戲自己是怎樣的玩啦。用瀏覽器打開遊戲頁面，打開 F12。

能夠看到這個頁面內嵌了一個 iframe，真正的遊戲頁面實際上是這個 http://9g.game6.cn/ssssds/game.html，打開之。

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 的，那你能夠詛咒發誓絕對沒有。原本就是純手點的嘛~~~

全文完

本文同時發佈在SF：https://segmentfault.com/a/1190000014841787