本页目录
由 Phaser 3 支持的 HTML5 游戏“捉猫” 小游戏
- 官方演示： https://ganlvtech.GitHub.io/phaser-catch-the-cat/
- GitHub： https://GitHub.com/ganlvtech/phaser-catch-the-cat
游戏玩法
- 点击小圆点，围住小猫。
- 你点击一次，小猫走一次。
- 直到你把小猫围住（赢），或者小猫走到边界并逃跑（输）。
部署
首先引入游戏框架 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>参数列表：
| 参数 | 值 | 说明 |
|---|---|---|
| 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 20 * 3 5 4例如
window.game.solver = function (blocksIsWall, i, j) { return 0;};即：一直向左走，直到撞墙。
说明
- 游戏的思路和小猫的图片来源于 www.gamedesign.jp，原来的游戏名叫 Chat Noir，我只是尝试用 JavaScript 重写一遍。