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

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 人赞过
分享
夏柔 站长
文章 712评论 23
赞赏
夏柔
相关文章
  • 骚老板之日主题系列美化及整站数据大派送
  • 2021年好
  • 宝塔linux面板一键工具箱
  • 通过裸聊软件实施诈骗原理
  • 1024 福利来袭
  • 阿里限量版盲盒公仔
  • 看视频-读感悟
  • WordPress5.5版本正式发布
  • 坚持 - 使我动力更强!
  • 新增栏目:Linux安全运维分类目录
28 3月, 2020
一张图弄明白:从零维到十维空间
夏柔
站长
夏山如碧 - 怀柔天下
712文章
23评论
58144K获赞
版权声明

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

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

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
31省新增12例确诊 均为境外输入
2月 24, 2021
31省新增10例确诊 均为境外输入
2月 23, 2021
31省新增11例确诊 均为境外输入
2月 22, 2021
更多
每日快讯
一幅从未面世的梵高画作将拍卖
2月 26, 2021
邓亚萍喊王一博参加奥运会街舞比赛
2月 26, 2021
王毅:中印边境事态是非曲直很清楚
2月 26, 2021
元宵节最佳赏月时间
2月 26, 2021
人社部正研究延迟退休改革方案
2月 26, 2021
惠若琪宣布怀孕
2月 25, 2021
上海发现低龄自闭症患儿新药
2月 25, 2021
25岁女孩欠二十万外债抑郁失联
2月 25, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号