HTML5捉猫游戏

有趣的HTML小游戏

由Phaser 3支持的HTML5游戏“捉猫” 小游戏

本站下载:

隐藏内容,您需要满足以下条件方可查看
End
HTML5捉猫游戏-Npcink

游戏玩法

  • 点击小圆点,围住小猫。
  • 你点击一次,小猫走一次。
  • 直到你把小猫围住(赢),或者小猫走到边界并逃跑(输)。

部署

首先引入游戏框架 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>

参数列表:

参数说明
w11横向格子数
h11竖向格子数
r20圆半径像素

非必选参数:

参数说明
backgroundColor0xeeeeee背景颜色
parentcatch-the-cat父元素的 id 或 DOM 对象
statusBarAligncenter状态栏左对齐 left 或居中 center
creditgithub.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 重写一遍。
资源

Pngquant - 有损PNG压缩器

2019-11-27 19:04:46

资源

Yzmcms - 内容管理系统

2019-11-28 0:45:13

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索