HTML5捉貓游戲

由Phaser 3支持的HTML5游戲“捉貓” 小游戲

• 官方演示： https://ganlvtech.github.io/phaser-catch-the-cat/
• Github： https://github.com/ganlvtech/phaser-catch-the-cat

本站下載：

[b2_file link="https://cdn.getimg.net/npc/2019/github/phaser-catch-the-cat-t20191127.zip" name="phaser-catch-the-cat-t20191127.zip" pass="" code=""]

游戲玩法

• 點擊小圓點，圍住小貓。
• 你點擊一次，小貓走一次。
• 直到你把小貓圍住（贏），或者小貓走到邊界并逃跑（輸）。

部署

首先引入游戲框架?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 2
0 * 3
 5 4

例如

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

即：一直向左走，直到撞墻。

說明

• 游戲的思路和小貓的圖片來源于?www.gamedesign.jp，原來的游戲名叫 Chat Noir，我只是嘗試用 javascript 重寫一遍。