内容简介:官网链接:www.egret.com/ 简单地说,白鹭引擎就是一套H5游戏开发解决方案,拥有以下产品,其中最核心的就是点击屏幕上的白色格子,将神经猫围起来,别让猫跑到上下左右四个边界上,最后猫无路可走就玩家赢了,如果猫跑到了边界上,猫就赢了。下面是安装和项目创建步骤,具体可看官网教程 我用的是Mac osx系统,所以下面以mac软件安装为例。
官网链接:www.egret.com/ 简单地说,白鹭引擎就是一套H5游戏开发解决方案,拥有以下产品,其中最核心的就是 Egret Engine ,其他的都是一些开发辅助工具。关于这些的介绍,还是直接戳上方官网链接去看看吧。
了解下围住神经猫游戏
游戏界面
游戏gif动图
游戏玩法介绍
点击屏幕上的白色格子,将神经猫围起来,别让猫跑到上下左右四个边界上,最后猫无路可走就玩家赢了,如果猫跑到了边界上,猫就赢了。
新建一个项目
下面是安装和项目创建步骤,具体可看官网教程 我用的是Mac osx系统,所以下面以mac软件安装为例。
安装引擎库管理工具(Egret Launcher)
直接下载mac版安装包安装,安装完成后打开Egret Launcher.app,出现以下界面,可以选择引擎版本下载,我这里下载了最新的5.2.11版本。
接着点击工具,安装Egret Wing 3,这是一个Egret白鹭项目开发的IDE,项目开发,调试编译都可以使用这个来,比较方便。
创建项目
直接在Egret Launcher上面点击项目选项,创建项目
- 项目类型这里选择 Egret 游戏项目
- 缩放模式[官方文档] 这里我选择fixedWide,舞台宽高为屏幕宽高,背景图片需要处理一下,可能四周会被裁剪。
项目结构
上面选项选好填好后,点击创建,然后点击项目这里,就可以用Egret Wing 3打开项目
项目结构如下:
- bin-debug: 项目调试时,所产生的文件存放于此目录。
- libs: 库文件,包括 Egret 核心库和其他扩展库存放于此目录。
- resource: 项目资源文件存放于此目录,比如图片、音频等。
- scripts: 项目构建和发布时需要用到的脚本文件存放在此目录。
- src: 项目代码文件存放于此目录。
- template: 项目模板文件存放于此目录。
- egretProperties.json: 项目的配置文件。具体的配置说明可以参考:EgretProperties说明
- index.html: 入口文件。具体的配置说明可以参考:入口文件说明
- manifest.json: 网页清单文件。
- tsconfig.json: typescript 编译配置文件。
运行项目
用Egret Wing 3打开项目打开项目后,直接点击 工具 栏中的 编译 按钮:
编译完成后,点击右下角http server按钮,在弹窗中点击链接,就可以在浏览器查看效果了(或者编译完成后,点击项目-调试):
效果(白鹭项目默认的):
至此,项目算是 新建完成也跑成功了,接下来就开始实现自己的游戏。
开发神经猫游戏
项目架构
我有一个习惯,写项目总喜欢尽可能地提取共用代码封装起来,所以每次写新项目都会先想好如何架构。由于第一次自己用白鹭写一个完整的游戏项目,场景跳转等实在不知道如何控制,所以看了一下视频,觉得挺不错的,所以我的这个项目也是这样的架构:
- 游戏分为开始、游戏、结束三个场景
- 一个场景控制器类,用于控制显示哪些场景(全局可调用)
- 一个保存游戏数据(全局可用,方便各个场景直接使用)
- 一个工具类(获取宽高、图片等)
- ...
于是项目结构就是这样:
┗ src ┣ common // 存放一些共用的类 ┃ ┗ GameUtil.ts // 游戏工具类,获取图片、舞台宽高等 ┣ game // 游戏相关 ┃ ┣ bean // 一些bean,比如猫类、普通圆点 ┃ ┃ ┣ Cat.ts // 猫(有坐标,状态,搜索路径方法等) ┃ ┃ ┣ GridNode.ts // 格子节点(x,y,状态等) ┃ ┃ ┣ Point.ts // 圆点(x,y) ┃ ┣ scene // 游戏场景 ┃ ┃ ┣ BaseScene.ts // base场景,所有场景继承这个 ┃ ┃ ┣ EndScene.ts // 结束场景 ┃ ┃ ┣ PlayScene.ts // 游戏场景 ┃ ┃ ┗ StartScene.ts // 开始场景 ┃ ┣ GameData.ts // 存放游戏数据 ┃ ┗ SceneControlloer.ts // 场景控制器 ┣ LoadingUI.ts // 加载页 ┣ Main.ts // 游戏主类(入口,所有场景都放在这个上面显示) ┗ Platform.ts // 可用于定义一些window上的对象,接口(比如微信登录等),暂时用不到 复制代码
写游戏
建好目录
先按上面项目结构建好各个目录文件(内容暂时为空,完后再写)
修改Main.ts
删除Main.ts中createGameScene方法里面的内容、删除createBitmapByName方法(待会写到GameUtil类中)和startAnimation方法(不需要),删除之后的Main.ts是这样:
实现工具类
common/GameUtil.ts中写一个GameUtil类,添加getStageHeight(获取舞台高度)、getStageWidth(获取舞台宽度)、createBitmapByName(根据传入的名称创建Bitmap)、createMovieClipByName(根据传入的名称创建MovieClip)方法,实现如下:
修改LoadingUI.ts
修改LoadingUI.ts,让进度条居中显示
实现BaseScene类
实现BaseScene类,继承egret.DisplayObjectContainer类,拥有initView方法,之后的所有场景继承自该类,只需实现initView方法即可
添加背景图片
在Main.ts的createGameScene方法中添加背景图片,后面红色方框内两句是用于设置场景,初始化场景,暂时先不用理
实现游戏控制类SceneController.ts
写SceneController.ts类(场景控制),这是一个单例,有initGame(初始化游戏,显示开始游戏场景)、showPlayScene(显示游戏场景)、showLevelTip(开始游戏时提示关卡的动画)、showEndScene(显示结束场景)
实现开始场景1
首先写开始场景StartScene.ts,很简单,就一张图片和一个按钮,这里的GameUtil.bitmapToBtn()方法是给组件添加点击缩放效果(类似按钮),具体实现如下
实现开始场景2
在场景控制类中的initGame方法里面显示开始场景,代码和效果如下:
实现游戏场景
游戏场景PlayScene.ts,游戏场景有中间一些格子和一只猫,格子用二维数组存放,自己实现GridNode.ts继承自egret.Sprite表示格子节点并可添加到舞台上(有节点状态(可走、不可走、有猫)、在数组中的下标、在舞台上的坐标、格子的大小、格子的背景图片、游戏监听接口(PlayScene.ts实现这个接口,并在创建格子的时候传进来,用于通知用户点击哪个格子、猫走哪个格子、谁赢等等)),再来实现猫精灵Cat.ts继承egret.Sprite(有状态(有路可走、被围住但是还有空格可以走,只是走不出去了)、在数组中的下标、大小、背景、游戏监听接口、坐在的格子节点),同时猫还有寻找路径等方法(后面再说)。 在游戏控制类中,控制显示游戏场景
游戏开始前,有一个提示关卡的动画,也是在游戏控制类中控制提示(具体看项目代码) 初始化格子节点,偶数行需要缩进(就是加多个左边距)
初始化创建一些障碍物
创建猫节点(在数组中间)
此刻运行效果如下
GridNode.ts主要方法,监听触摸事件,判断是否可以点击
PlayScene.ts中实现一个playerRun方法表示玩家点击格子、catRun方法为猫走的格子、canRun方法返回当前猫是否走完(还在思考中那么玩家就不能点击格子)
实现猫搜索路径算法
到这里,游戏场景基本完成,现在就来写最重要的一点,猫搜索路径的算法,分析一下,猫要跑出去,第一步就是要选择最短路径,很简单,用bfs算法搜索(只贴主要代码,其他可以到github查看):
如果没有路径走出,那么得到的结果是一个空数组,那么此时需要判断是否有格子可以走,如果没有代表猫输了,如果有就随机走一个可以走的格子(反正走不出去了,那就随机走)
如果有路径走出,那么就随机选一条路径走。
优化算法上面的算法等找出左右最短路径,但随机走的话,可能走的还不是最优路径,因为可能某些路径只有一条路,这种情况很容易被堵掉,那么需要再实现一个算法筛选出有多个终点的路径,因为上一步存放了所有路径需要走的第一个格子,那么算法可以通过判断第一步格子相同的路径的数量来选择,可能得到的就剩下一条路径(如果还有多条,那就可以随机选择一条路径了)
这还不是最优算法!!!这个算法有一种死路也会被选择(多个路径需要再第二步之后才会出现,但是第一步走完可能就会被堵死,这种情况我没有判断,有兴趣的可以自己去实现),另外,如果有其它更好的算法,欢迎评论区推荐~
结束场景很简单,就根据GameData.ts中保存的全局游戏数据,判断显示成功弹窗还是失败弹窗 成功弹窗:失败弹窗:
以上所述就是小编给大家介绍的《Egret白鹭H5开发-围住神经猫》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 白鹭引擎 5.3.0 正式发布,支持 3D 游戏开发
- 白鹭引擎 5.1.11 发布,集中修复数个 Bug
- 白鹭引擎 5.2.8 发布,集中性修复多个 Bug
- 白鹭引擎 5.2.8 发布,集中性修复多个 Bug
- 白鹭引擎 5.2.9 发布,集中性修复多个 Bug
- 白鹭引擎 5.2.9 发布,集中性修复多个 Bug
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
jQuery in Action
Bear Bibeault、Yehuda Katz / Manning Publications / 2008-2-17 / USD 39.99
A good web development framework anticipates what you need to do and makes those tasks easier and more efficient; jQuery practically reads your mind. Developers of every stripe-hobbyists and professio......一起来看看 《jQuery in Action》 这本书的介绍吧!