教你过关吾爱破解游戏《圈小猫》

发布于 2020年3月29日

前言

我刚结识吾爱破解网站，就认识了网站的隐藏游戏《圈小猫》。我把《圈小猫》这个游戏吹爆——这个游戏确实好玩，但这是只有像我一样聪明的人才能玩得起的游戏。

因此，这篇文章将会教你如何篡改这个游戏，实现任何人，局局都能赢（如果说逆向这个游戏，未免有些太夸张了）。如果，你以前玩游戏的时候，小猫局局都逃掉，那么这一次你就可以痛打它了。

游戏介绍

如果你已经是《圈小猫》的忠实玩家，可以忽略这部分。

打开方式

这个游戏的打开方式都知道了吧！你只要在主站的URL后面随便输入一些可以让吾爱404的东西，就可以打开这个游戏。就像这样：

游戏规则

点击小圆点，围住小猫；
你点击一次，小猫走一次；
直到你把小猫围住（赢），或者小猫走到边界并逃跑（输），游戏结束。

了解源码

你或许不知道，这个游戏不是吾爱破解编写的，而是GitHub上的一个开源项目：phaser-catch-the-cat，作者是glanvtech。游戏的思路和小猫的图片来源于 GameDesign，原来的游戏名叫 Chat Noir，原作者只是尝试用 JavaScript 重写一遍。

README

我们先进入仓库，看一下README（下文是节选）：

部署

首先引入游戏框架 phaser.min.js：

<script src="phaser.min.js"></script>

然后引入游戏代码 catch-the-cat.js：

<script src="catch-the-cat.js"></script>

然后在指定的 div 中新建一个游戏的 canvas，并开始游戏：

<div id="catch-the-cat"></div>
<script>
    window.game = new CatchTheCatGame({
        w: 11,
        h: 11,
        r: 20,
        backgroundColor: 0xeeeeee,
        parent: 'catch-the-cat',
        statusBarAlign: 'center',
        credit: 'github.com/ganlvtech'
    });
</script>

CatchTheCatGame的参数列表如下：

参数	值	说明
`w`	11	横向格子数
`h`	11	竖向格子数
`r`	20	圆半径像素

非必选参数如下：

参数	默认值	说明
`backgroundColor`	`0xeeeeee`	背景颜色
`parent`	`catch-the-cat`	父元素的 `id` 或 `DOM` 对象
`statusBarAlign`	`center`	状态栏左对齐 `left` 或居中 `center`
`credit`	`github.com/ganlvtech`	右下角的备注信息

自定义算法

参考src/solvers/中提供的例子编写算法，并使用下列代码替换。

window.game.solver = yourSolver;

这个 solver 的返回值即为猫要往哪个方向走一步，如果撞墙，则算玩家获胜。

值	说明
-1	猫主动弃权
0	左
1	左上
2	右上
3	右
4	右下
5	左下

如果猫站在星号的位置，那么数字代表每个方向的编号：

1 2
0 * 3
5 4

下面的例子可以让猫的每一步都向左走，直到撞墙：

window.game.solver = function (blocksIsWall, i, j) {
    return 0;
};

编写代码

既然知道了《圈小猫》的代码结构与自定义算法的编写，那我们就可以上代码了！

首先，我们要引入游戏脚本。获取脚本有如下方式：

你可以在项目的Release 界面下载；
你也可以引用吾爱的脚本链接：phaser.min.js、catch-the-cat.js。不过吾爱可能开启了防盗链，在我的html里无法引用。

然后在文件中引入并且设置编码utf-8：

<head>
         <meta charset="utf-8">
    <script src="phaser.min.js"></script>
    <script src="catch-the-cat.js"></script>
</head>

其次，写一个body，里面添加一个div和一组script标签：

<body>
    <div id="catch-the-cat"></div>
    <script>
       
    </script>
</body>

在script里仿照吾爱源码的设置编写JavaScript：

window.game = new CatchTheCatGame({
            w: 11,
            h: 11,
            r: 20,
            backgroundColor: 16777215,
            parent: 'catch-the-cat',
            statusBarAlign: 'center',
            credit: 'www.52pojie.cn'
});

最后，仿照README文件编写自定义走步算法。我把游戏的solver属性设置为-1，这样一上来猫会主动弃权：

window.game.solver = function (blocksIsWall, i, j) {
            return -1;
};

总的来说，你的代码应该长这样（注script引用有能力的也可替换为网址，我这不知为何引用不了网址）：

<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
    <script src="phaser.min.js"></script>
    <script src="catch-the-cat.js"></script>
</head>
<body>
    <div id="catch-the-cat"></div>
    <script>
        window.game = new CatchTheCatGame({
            w: 11,
            h: 11,
            r: 20,
            backgroundColor: 16777215,
            parent: 'catch-the-cat',
            statusBarAlign: 'center',
            credit: 'www.52pojie.cn'
        });
        window.game.solver = function (blocksIsWall, i, j) {
            return -1;
        };
    </script>
</body>
</html>

之后，用浏览器打开，预览感受一下，猫咪不管身处何处，只要我在地图上随便点一个墙，猫咪就自动放弃了：

修改浏览器代码

我们先复制刚才编写的这段代码：

<script>
        window.game = new CatchTheCatGame({
            w: 11,
            h: 11,
            r: 20,
            backgroundColor: 16777215,
            parent: 'catch-the-cat',
            statusBarAlign: 'center',
            credit: 'www.52pojie.cn'
        });
        window.game.solver = function (blocksIsWall, i, j) {
            return -1;
        };
</script>

我们进入浏览器，开一局《圈小猫》，之后我们按下F12、Ctrl + Shift + I或Cmd + Option + I打开网页审查元素（就是所谓的控制台），然后定位到图中的位置：

然后双击这行代码，或者右键 > 编辑 HTML，将我们刚刚复制的代码粘贴进去。之后，就享受痛打猫咪的感觉吧——

……怎么突然感觉游戏没意思了！？

教你过关吾爱破解游戏《圈小猫》_

前言