HTML5游戏 围住神经猫 开发
所有文章搬运自我的个人主页:sheilasun.me
去年风靡微信朋友圈的小游戏“围住神经猫”,我也试着做了一下,可以戳这里试玩→围住神经猫。游戏是用Egret引擎开发的,因为Egret是用Typescript语言构建的,因此这里游戏也是用Typescript来开发的。
完整的代码可以戳我的Github→sheila1227/HTML5-GAME-shenjingcat
游戏规则:
点击画面上的灰色格子,慢慢将神经猫围起来抓住。如果猫到达游戏区边缘则游戏失败。
准备素材
在网上搜索“围住神经猫”游戏,打开一个,并打开调试界面,从network中或者resource中把猫、灰色圆圈、橙色圆圈等图片扒下来保存到本地。
需要注意的是,Egret新的MovieCilp架构设计以及MovieClip数据格式标准都与早期有些不同,我从网上扒下来的已经不适用了,根据新的数据格式标准做修改后mc的json文件如下:
{"mc":{"stay":{"frameRate":20,"labels":[],"frames":[{"res":"stay0000","x":0,"y":0},{"res":"stay0001","x":0,"y":0},{"res":"stay0002","x":0,"y":0},{"res":"stay0003","x":0,"y":0},{"res":"stay0004","x":0,"y":0},{"res":"stay0005","x":0,"y":0},{"res":"stay0006","x":0,"y":0},{"res":"stay0007","x":0,"y":0},{"res":"stay0008","x":0,"y":0},{"res":"stay0009","x":0,"y":0},{"res":"stay0010","x":0,"y":0},{"res":"stay0011","x":0,"y":0},{"res":"stay0012","x":0,"y":0},{"res":"stay0013","x":0,"y":0},{"res":"stay0014","x":0,"y":0},{"res":"stay0015","x":0,"y":0}]}},"res":{"stay0000": {"x":0,"y":0,"w":61,"h":93},"stay0001": {"x":61,"y":0,"w":61,"h":93},"stay0002": {"x":122,"y":0,"w":61,"h":93},"stay0003": {"x":183,"y":0,"w":61,"h":93},"stay0004": {"x":0,"y":93,"w":61,"h":93},"stay0005": {"x":61,"y":93,"w":61,"h":93},"stay0006": {"x":122,"y":93,"w":61,"h":93},"stay0007": {"x":183,"y":93,"w":61,"h":93},"stay0008": {"x":0,"y":186,"w":61,"h":93},"stay0009": {"x":61,"y":186,"w":61,"h":93},"stay0010": {"x":122,"y":186,"w":61,"h":93},"stay0011": {"x":183,"y":186,"w":61,"h":93},"stay0012": {"x":0,"y":279,"w":61,"h":93},"stay0013": {"x":61,"y":279,"w":61,"h":93},"stay0014": {"x":122,"y":279,"w":61,"h":93},"stay0015": {"x":183,"y":279,"w":61,"h":93}}}
编写代码
主要总结下我在开发过程中遇到的主要的两个难题。
问题一,猫该如何逃跑?
在这个游戏中,每个圆圈都可能有三种状态
- 可通行,灰色圆圈表示
- 有路障,不可行,橙色圆圈表示
- 被猫占领,灰色圆圈,猫的动画叠置于其上
每当点击了灰色圆圈,就会将其变成橙色圆圈即路障状态,同时猫会紧跟着点击的动作也向周边走一步。
行走方向
游戏区由9*9个圆圈组成,偶数行缩进圆圈半径大小的宽度,这样的布局导致,猫理论上可以有6个行走方向(每次只能走一步),分别是左,左上,右上,右,右下,左下,如这些位置上的圆圈为路障状态,则相应方向不可通行。
如果这六个方向的邻居有五个都为路障,那当然很好选择线路,剩下的那个就是唯一的出路了,但是显然情况不可能如此简单。我们遇到的更多的情况是,六个方向的邻居上,有直接为路障状态的(那自然绝对不走这一步),有是可通行状态的,但是彼此向边缘的可达性不同。
比如上图中,目前,猫的左方向走三步即可到达边缘,右上、右下向走四步可达,左上、右方向上可走一步但即遇路障,左下方向走三步遇路障。这时候我们当然应该为这六个方向的优先级排个序。
优先级
我是这样设定优先级顺序的:
- 一路通行的方向>会出现路障的方向,如此图中左、右上、右下>左上、右、左下
- 一路通行的方向中,离边缘越近优先级越高,如此图中左>右上、右下
- 会出现路障的方向中,可走的步数越多优先级越高,如此图中左下>右、左上
下面将这些约定的可达性用数值来体现以便比较,设这个值为accessibility,值越大优先级越高。
一路通行的方向
accessibility = 1/stepToEdge; //stepToEdge表示离边缘还有几步
会出现路障的方向
accessibility = (-1)/stepToBlock;//stepToBlock表示离路障的距离
接下来考虑分母如果为0怎么办,在第一种情况中,分母为0,表示猫当前已经在边缘了,那么也不用判断优先级了,游戏已经失败了。第二种情况中,分母为0表示出门即遇路障,这个方向不用考虑了是绝对走不通的,那么它的优先级就定为-1。
这样一轮算下来,六个方向上的accessibility值分别为:
- 左:1/3
- 左上:-1
- 右上:1/4
- 右:-1
- 右下:1/4
- 左下:-1/3
这样比较下来优先级应该是左>右上>右下>左下>左上>右。
为什么左上与右,右上与右下,这两组内部的值明明一样,我们依然是排出了顺序呢?只是因为我们计算是从左方向开始顺时针旋转的。如果值一样,那就看出现的顺序了。
所以在上图中这种情况下,猫会向左走一步。
问题二,如何判断猫被围住了?
在网上玩这个游戏的时候,我发现当猫被围住的时候会换成一种“被围住”的动作,那么该如何判断猫被围住了,然后改变它的动作动画?
“被围住”与“被抓住”不一样,它早于“被抓住”的状态。当猫无路可走的时候,它就“被抓住”了,游戏获胜。而“被围住”指的是猫暂时还有路可走,但是已经被包围住了,垂死挣扎而已,如下图。
我的思路是这样的:
从猫当前的位置找六个方向中可通行的邻居,然后从这些邻居出发,再找它们各自的可通行邻居,一直这样找下去,一边找的过程中,一边判断当前已经找到的邻居中有没有处在游戏区边缘的,如果有,那么寻找过程提前结束,判断结果是:猫没有被围住。如果直到所有的可通行邻居都找到了,里面都没有处在游戏区边缘的,那么判断结果是:猫被围住了。
接下来用代码实现这个判断过程。
首先,需要准备一个方法,判断圆圈是否已经处在圆圈边缘了,假设这个方法名及参数如下,内部实现比较简单这里就不贴了。
/*
判断传入的circle是否在边界上*/
private isCircleAtEdge(circle:Circle):boolean {...
}
再准备一个方法,获取某圆圈周围某方向的邻居。
private getCircleNeighbor(circle:Circle,direction:Direction):Circle{...
}
最后,是判断的核心方法。
/*
能否在circle位置出发找到路线到达边缘
*/
private canExitAt(circle:Circle):boolean{var ignoreArr=[];//不用再处理的circle集合var toDealWithArr=[circle];//还需进行判断的circle集合while(true){if(toDealWithArr.length<1){return false;}else{var _first=toDealWithArr.shift();ignoreArr.push(_first);if(_first.getStatus()!==CircleStatus.Blocked&&this.isCircleAtEdge(_first)){return true;}else{for(var i=Direction.LEFT;i<=Direction.BOTTOM_LEFT;i++){var nbr=this.getCircleNeighbor(_first,i);if(!(ignoreArr.indexOf(nbr)>-1||toDealWithArr.indexOf(nbr)>-1))if(nbr.getStatus()!==CircleStatus.Available){ignoreArr.push(nbr);}else{toDealWithArr.push(nbr);}}}}}}
在方法体的最开始,准备好两个数组,一个用来存储不用再处理的圆圈集合ignoreArr,另一个用来存储还需要进行判断的圆圈集合toDealWithArr。每找到一个可通行的邻居,首先要判断它是不是第一次出现(因为几个圆圈可能会有共同的邻居,所以一个圆圈可能因为它是多个圆圈的邻居而被找到多次),判断的标准就是它有没有出现在ignoreArr或toDealWithArr里,如果没有那么就是第一次出现,如果它是路障,那么塞到ignoreArr,如果不是路障,那么推入toDealWithArr尾部等待判断。
每次循环开始时,我们会从toDealWithArr头部弹出一个圆圈对象,对它是否在边缘做判断,如果是,那么返回true跳出循环,猫没有被围住,它可以通过某条路线到达边缘。如果toDealWithArr全部判断完了都不在边缘,那么返回false,猫被围住了,它的直接邻居及众多间接邻居中没有一个是在边缘的。
完整的代码可以戳我的Github→sheila1227/HTML5-GAME-shenjingcat
在线试玩可以戳→围住神经猫
有任何不妥之处或错误欢迎各位指出,不胜感激~
转载于:https://www.cnblogs.com/SheilaSun/p/4747484.html
HTML5游戏 围住神经猫 开发相关推荐
- js开发html5游戏,JS开发HTML5游戏《神奇的六边形》(五)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击这里可进入游戏体验) 因内容 ...
- html5游戏sdk开发,自用游戏HTML5 sdk技术设计手册
1.概述 1.1.目的 指导合作伙伴的HTML5工程师开发集成sgt平台开放能力. 2.准备 2.1.技术架构 使用jQuery库 2.2.引用jQuery和jsonrpc2.0 2.2.定义变量 v ...
- HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
- html5游戏开发的五个最佳实践
HTML5是伟大的,因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上. 就凭HTML5 ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
- 是寒冬还是风口?2015年HTML5游戏完整产业链报告
策划/采访:尚言 编辑:徐乙榛 文案:李菁 制图:华丽胖子 目录 一.HTML5游戏产业链之研发篇 1-1 开发成本 1-2 开发瓶颈 二.HTML5游戏产业链之渠道篇 2-1 渠道商业模式 2-2 ...
- 腾讯X5联手白鹭Egret Runtime 合作共推HTML5游戏发展
早在去年的9月23日,腾讯召开的X5浏览服务发布会上,腾讯即宣布X5内核将与白鹭时代展开合作,重点应用白鹭Egret Runtime组件,以进一步提升HTML5游戏在移动设备的用户体验.与此同时,白鹭 ...
- 开源免费的HTML5游戏引擎
青瓷引擎的成长 青瓷引擎自2015年4月项目启动开始,7月首次亮相2015年ChinaJoy,便得到业界的极大关注,随后开启限量测试,收到数百个开发者团队的试用申请及反馈,期间经历了18个内测版本,完 ...
- html5游戏制作总结
QQ空间Android版4.2和4.5上线的玩吧游戏"空间疯狂套牛"是一款使用HTML5开发出的手机游戏,虽然还有很多不足,但其中使用的一些技术与技巧还是很有必要为大家分享出来,方 ...
最新文章
- Smart-linkmonitor-link配置注意事项
- 提取点的dn值_干货在线 | DEM数据如何生成高程点
- Loadrunner性能测试结果分析
- {转}maven+continuum安装与配置
- 怎么在c语言里输入数组元素,如何在不输入n的情况下输入数组中的元素? (C )...
- html生成pdf表格线加粗,iText 用 HTMLWorker 转换 HTML 为 PDF 时可设置表格列宽度
- 数据库流行度8月排行榜:Oracle 飙升 和 PostgreSQL 绝尘领跑第二梯队
- 计算机桌面待机屏怎么取消,电脑待机锁屏怎么设置
- 橱柜衣柜 sketchup草图大师设计全屋定制家具意义?谈单拆单生产一起做了?-有屋软件
- 被宋美龄封杀的民国绝色女星
- perl执行环境安装(Windows)
- Java-学校项目3---类与对象
- 双月报8.24-10.23
- IP地址的划分及其范围
- 基于51,人体红外感应和RC522的门禁系统
- W3school导航条实现的两种方法
- #超全#行人重识别数据集整理,附下载链接和介绍
- Txt文档数据的写入与读取
- 双模控制器很耗电_电动车双电双核控制系统是在说什么?这个部件的发展一日千里!...
- python_day11(笔记及练习)