有趣的HTML小游戲
由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=""]
游戲玩法
- 點(diǎn)擊小圓點(diǎn)，圍住小貓。
- 你點(diǎn)擊一次，小貓走一次。
- 直到你把小貓圍住（贏），或者小貓走到邊界并逃跑（輸）。
部署
首先引入游戲框架?phaser.min.js
<script src="phaser.min.js"></script>
然后引入游戲代碼?catch-the-cat.js
<script src="catch-the-cat.js"></script>
然后在指定的 div 中新建一個(gè)游戲的 canvas，并開(kāi)始游戲
<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>
參數(shù)列表：
| 參數(shù) | 值 | 說(shuō)明 |
|---|---|---|
| w | 11 | 橫向格子數(shù) |
| h | 11 | 豎向格子數(shù) |
| r | 20 | 圓半徑像素 |
非必選參數(shù)：
| 參數(shù) | 值 | 說(shuō)明 |
|---|---|---|
| backgroundColor | 0xeeeeee | 背景顏色 |
| parent | catch-the-cat | 父元素的 id 或 DOM 對(duì)象 |
| statusBarAlign | center | 狀態(tài)欄左對(duì)齊?left?或居中?center |
| credit | github.com/ganlvtech | 右下角的備注信息 |
自己編寫算法
參考?src/solvers/?中提供的例子編寫算法，并使用下列代碼替換。
window.game.solver = yourSolver;
這個(gè) solver 的返回值即為貓要往哪個(gè)方向走一步，如果撞墻則算玩家獲勝
| 值 | 說(shuō)明 |
|---|---|
| -1 | 貓主動(dòng)棄權(quán) |
| 0 | 左 |
| 1 | 左上 |
| 2 | 右上 |
| 3 | 右 |
| 4 | 右下 |
| 5 | 左下 |
貓站在星號(hào)的位置，數(shù)字代表每個(gè)方向的編號(hào)
1 2
0 * 3
5 4
例如
window.game.solver = function (blocksIsWall, i, j) {
return 0;
};
即：一直向左走，直到撞墻。
說(shuō)明
- 游戲的思路和小貓的圖片來(lái)源于?www.gamedesign.jp，原來(lái)的游戲名叫 Chat Noir，我只是嘗試用 javascript 重寫一遍。