微信小游戏的前端攻城狮玩法

前言

公司群里常常有人会发一些微信小游戏，每次下面都会跟好多晒分截图。好比这个《看你有多色》的考察眼力的（瞎眼）小游戏。

别人的截图都是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