WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 生活趣事
    • 生活日记
    • 防骗指南
  • 编程教学
    • API日记
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
    • 严选源码
  • 专题
  • 基友
  • 隐私
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君
首页 初创 HTML5捉猫游戏

HTML5捉猫游戏

夏柔 6月 8, 2020

有趣的HTML小游戏 

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

H5
官方演示
下载
跳转
类型: H5

资源下载

HTML5捉猫游戏
官方下载
HTML5捉猫游戏
本站下载

游戏玩法

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

部署

首先引入游戏框架 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 重写一遍。
#chatnoir#html5#小猫#捉猫#框架#游戏
1
等 1 人赞过
J2dcg1.png
猜你喜欢
  • 最近三个月没更新,总结一下
  • 绿联NAS搭建ubantu虚拟机安装宝塔面板保姆级教程
  • 阿里云用了管家备案感觉效率提高了
  • 自动化更新资源站系统上线
  • WP资源下载数据根据SQL语句导出
  • 三年腾讯云服务器到期了
  • 宝塔设置自动重启停止运行的Mysql数据库
  • 融合怪脚本:一键测试linux服务器性能、网络、IP质量等
  • 免费ssl数字证书申请-freegetssl
  • 朋友当兵去了
04 6月, 2020
美国休斯敦抗议示威活动持续200余人被捕
夏柔
站长
夏山如碧 - 怀柔天下
1724
文章
25
评论
58145K
获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门33
WordPress技术教程267
前沿技术情报所22
城市创新——新消费11
最近有哪些不可错过的热文23
程序员的养生之道0
节
春
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2025 WordPress极简博客. Designed by 夏柔. 辽公网安备21010502000474号 辽ICP备19017037号-2