教你巧妙过关吾爱沙雕游戏《圈小猫》
本帖最后由 TLHorse 于 2020-3-28 19:53 编辑# 前言
> www.52pojie.cn
> @TLHorse 原创首发，禁止转载
> 注：如果发错板块，恳请管理移动
我刚结识吾爱破解网站，就认识了网站的隐藏游戏《圈小猫》。我把《圈小猫》这个游戏吹爆——这个游戏确实好玩，但这是只有**像我一样聪明的人**才能玩得起的游戏。
因此，这篇文章将会教你如何篡改这个游戏，实现任何人，局局都能赢（如果说逆向这个游戏，未免有些太夸张了）。如果，你以前玩游戏的时候，小猫局局都逃掉，那么这一次你就可以痛打它了。
# 游戏介绍
如果你已经是《圈小猫》的忠实玩家，可以忽略这部分。
## 打开方式
这个游戏的打开方式都知道了吧！你只要在主站的URL后面随便输入一些可以让吾爱404的东西，就可以打开这个游戏。就像这样：
- https://www.52pojie.cn/1234567890
- https://www.52pojie.cn/awdihgfbnkd
- https://www.52pojie.cn/helloworld
- ...
## 游戏规则
- 点击小圆点，围住小猫；
- 你点击一次，小猫走一次；
- 直到你把小猫围住（赢），或者小猫走到边界并逃跑（输），游戏结束。
# 了解源码
你或许不知道，这个游戏不是吾爱破解编写的，而是GitHub上的一个开源项目：(https://github.com/ganlvtech/phaser-catch-the-cat)，作者是(https://github.com/ganlvtech)。游戏的思路和小猫的图片来源于 (https://www.gamedesign.jp/)，原来的游戏名叫 Chat Noir，原作者只是尝试用 JavaScript 重写一遍。
## README
我们先进入仓库，看一下README（下文是节选）：
### 部署
首先引入游戏框架 `phaser.min.js`：
```html
<script src="phaser.min.js"></script>
```
然后引入游戏代码 `catch-the-cat.js`：
```html
<script src="catch-the-cat.js"></script>
```
然后在指定的 `div` 中新建一个游戏的 `canvas`，并开始游戏：
```html
<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/`](https://github.com/ganlvtech/phaser-catch-the-cat/tree/master/src/solvers)中提供的例子编写算法，并使用下列代码替换。
```js
window.game.solver = yourSolver;
```
这个 `solver` 的返回值即为猫要往哪个方向走一步，如果撞墙，则算玩家获胜。
| 值 | 说明 |
| :-- | :-- |
| -1 | 猫主动弃权 |
| 0 | 左 |
| 1 | 左上 |
| 2 | 右上 |
| 3 | 右 |
| 4 | 右下 |
| 5 | 左下 |
如果猫站在星号的位置，那么数字代表每个方向的编号：
```plain
1 2
0 * 3
5 4
```
下面的例子可以让猫的每一步都向左走，直到撞墙：
```js
window.game.solver = function (blocksIsWall, i, j) {
return 0;
};
```
# 编写代码
既然知道了《圈小猫》的代码结构与自定义算法的编写，那我们就可以上代码了！
首先，我们要引入游戏脚本。获取脚本有如下方式：
- 你可以在项目的(https://github.com/ganlvtech/phaser-catch-the-cat/releases)下载；
- 你也可以引用吾爱的脚本链接：(https://down.52pojie.cn/.fancyindex/js/phaser.min.js)、(https://down.52pojie.cn/.fancyindex/js/catch-the-cat.js)。不过吾爱可能开启了防盗链，在我的`html`里无法引用。
然后在文件中引入并且设置编码`utf-8`：
```html
<head>
<meta charset="utf-8">
<script src="phaser.min.js"></script>
<script src="catch-the-cat.js"></script>
</head>
```
其次，写一个`body`，里面添加一个`div`和一组`script`标签：
```html
<body>
<div id="catch-the-cat"></div>
<script>
</script>
</body>
```
在`script`里仿照吾爱源码的设置编写`JavaScript`：
```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，这样一上来猫会主动弃权：
```javascript
window.game.solver = function (blocksIsWall, i, j) {
return -1;
};
```
总的来说，你的代码应该长这样（注`script`引用有能力的也可替换为网址，我这不知为何引用不了网址）：
```html
<!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>
```
之后，用浏览器打开，预览感受一下，猫咪不管身处何处，只要我在地图上随便点一个墙，猫咪就自动放弃了：
# 修改浏览器代码
我们先复制刚才编写的这段代码：
```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，将我们刚刚复制的代码粘贴进去。之后，就享受痛打猫咪的感觉吧——
……怎么突然感觉游戏没意思了！？
本帖最后由 五年级一班很好 于 2020-3-28 21:07 编辑
玩过英雄联盟剑圣就明白了，你手短想要打人就要超过对方，回头去砍。这游戏一个道理，划大圈，观察猫的走向，然后你的点要超过猫。知道猫的大概走向如果外边线太长可以用二分法。 我曾经见过有人发真正的过关方式技术贴，那时候好像还是flash？
说实话我感觉这个小猫还是比较好玩虽然一次都没有赢我想问一下这个游戏能不能离线下来
手动过关{:301_997:}从远处下点就能圈住它 诛心 发表于 2020-3-28 19:46
说实话我感觉这个小猫还是比较好玩虽然一次都没有赢我想问一下这个游戏能不能离线下来
可以呀，本身就是离线的，你看看readme 我一次也没赢过555555 TLHorse 发表于 2020-3-28 19:48
可以呀，本身就是离线的，你看看readme
好的谢谢我想问一下你自己去玩通关过吗不借助工具 诛心 发表于 2020-3-28 19:49
好的谢谢我想问一下你自己去玩通关过吗不借助工具
说实话，一次都没有;www{:301_1001:} 感谢分享~ TLHorse 发表于 2020-3-28 19:51
说实话，一次都没有
我就知道太难玩了 大佬直接改谢谢大佬分享 这游戏被你这一弄倒是变复杂了。{:301_985:} Ziyuno 发表于 2020-3-28 19:54
这游戏被你这一弄倒是变复杂了。
哈哈哈……如果觉得复杂，你也可以写个snippet，然后只要你一打开游戏，就会自动执行我编写的作弊脚本{:301_1000:}