前言
www.52pojie.cn
@TLHorse 原创首发，禁止转载
注：如果发错板块，恳请管理移动
我刚结识吾爱破解网站，就认识了网站的隐藏游戏《圈小猫》。我把《圈小猫》这个游戏吹爆——这个游戏确实好玩，但这是只有像我一样聪明的人才能玩得起的游戏。
因此，这篇文章将会教你如何篡改这个游戏，实现任何人，局局都能赢（如果说逆向这个游戏，未免有些太夸张了）。如果，你以前玩游戏的时候，小猫局局都逃掉，那么这一次你就可以痛打它了。
游戏介绍
如果你已经是《圈小猫》的忠实玩家，可以忽略这部分。
打开方式
这个游戏的打开方式都知道了吧！你只要在主站的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;
};
编写代码
既然知道了《圈小猫》的代码结构与自定义算法的编写，那我们就可以上代码了！
首先，我们要引入游戏脚本。获取脚本有如下方式：
然后在文件中引入并且设置编码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打开网页审查元素（就是所谓的控制台），然后定位到图中的位置：
[复制链接]
发表于 2020-3-28 20:15
|
发表于 2020-3-28 19:48
|楼主
收藏
淘帖
有用
分享到朋友圈
从远处下点就能圈住它
