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

转自自己在开源中国上的博客：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 事件。