Egret白鹭H5开发-围住神经猫

栏目: 后端 · 发布时间: 6年前

内容简介:官网链接:www.egret.com/ 简单地说,白鹭引擎就是一套H5游戏开发解决方案,拥有以下产品,其中最核心的就是点击屏幕上的白色格子,将神经猫围起来,别让猫跑到上下左右四个边界上,最后猫无路可走就玩家赢了,如果猫跑到了边界上,猫就赢了。下面是安装和项目创建步骤,具体可看官网教程 我用的是Mac osx系统,所以下面以mac软件安装为例。

官网链接:www.egret.com/ 简单地说,白鹭引擎就是一套H5游戏开发解决方案,拥有以下产品,其中最核心的就是 Egret Engine ,其他的都是一些开发辅助工具。关于这些的介绍,还是直接戳上方官网链接去看看吧。

Egret白鹭H5开发-围住神经猫

了解下围住神经猫游戏

游戏界面

Egret白鹭H5开发-围住神经猫 Egret白鹭H5开发-围住神经猫 Egret白鹭H5开发-围住神经猫 Egret白鹭H5开发-围住神经猫

游戏gif动图

Egret白鹭H5开发-围住神经猫

游戏玩法介绍

点击屏幕上的白色格子,将神经猫围起来,别让猫跑到上下左右四个边界上,最后猫无路可走就玩家赢了,如果猫跑到了边界上,猫就赢了。

新建一个项目

下面是安装和项目创建步骤,具体可看官网教程 我用的是Mac osx系统,所以下面以mac软件安装为例。

安装引擎库管理工具(Egret Launcher)

直接下载mac版安装包安装,安装完成后打开Egret Launcher.app,出现以下界面,可以选择引擎版本下载,我这里下载了最新的5.2.11版本。

Egret白鹭H5开发-围住神经猫

接着点击工具,安装Egret Wing 3,这是一个Egret白鹭项目开发的IDE,项目开发,调试编译都可以使用这个来,比较方便。

Egret白鹭H5开发-围住神经猫

创建项目

直接在Egret Launcher上面点击项目选项,创建项目

Egret白鹭H5开发-围住神经猫
Egret白鹭H5开发-围住神经猫
  • 项目类型这里选择 Egret 游戏项目
  • 缩放模式[官方文档] 这里我选择fixedWide,舞台宽高为屏幕宽高,背景图片需要处理一下,可能四周会被裁剪。

项目结构

上面选项选好填好后,点击创建,然后点击项目这里,就可以用Egret Wing 3打开项目

Egret白鹭H5开发-围住神经猫

项目结构如下:

Egret白鹭H5开发-围住神经猫
  • bin-debug: 项目调试时,所产生的文件存放于此目录。
  • libs: 库文件,包括 Egret 核心库和其他扩展库存放于此目录。
  • resource: 项目资源文件存放于此目录,比如图片、音频等。
  • scripts: 项目构建和发布时需要用到的脚本文件存放在此目录。
  • src: 项目代码文件存放于此目录。
  • template: 项目模板文件存放于此目录。
  • egretProperties.json: 项目的配置文件。具体的配置说明可以参考:EgretProperties说明
  • index.html: 入口文件。具体的配置说明可以参考:入口文件说明
  • manifest.json: 网页清单文件。
  • tsconfig.json: typescript 编译配置文件。

运行项目

用Egret Wing 3打开项目打开项目后,直接点击 工具 栏中的 编译 按钮:

Egret白鹭H5开发-围住神经猫

编译完成后,点击右下角http server按钮,在弹窗中点击链接,就可以在浏览器查看效果了(或者编译完成后,点击项目-调试):

Egret白鹭H5开发-围住神经猫

效果(白鹭项目默认的):

Egret白鹭H5开发-围住神经猫

至此,项目算是 新建完成也跑成功了,接下来就开始实现自己的游戏。

开发神经猫游戏

项目架构

我有一个习惯,写项目总喜欢尽可能地提取共用代码封装起来,所以每次写新项目都会先想好如何架构。由于第一次自己用白鹭写一个完整的游戏项目,场景跳转等实在不知道如何控制,所以看了一下视频,觉得挺不错的,所以我的这个项目也是这样的架构:

  1. 游戏分为开始、游戏、结束三个场景
  2. 一个场景控制器类,用于控制显示哪些场景(全局可调用)
  3. 一个保存游戏数据(全局可用,方便各个场景直接使用)
  4. 一个工具类(获取宽高、图片等)
  5. ...

于是项目结构就是这样:

Egret白鹭H5开发-围住神经猫
┗ 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是这样:

Egret白鹭H5开发-围住神经猫

实现工具类

common/GameUtil.ts中写一个GameUtil类,添加getStageHeight(获取舞台高度)、getStageWidth(获取舞台宽度)、createBitmapByName(根据传入的名称创建Bitmap)、createMovieClipByName(根据传入的名称创建MovieClip)方法,实现如下:

Egret白鹭H5开发-围住神经猫

修改LoadingUI.ts

修改LoadingUI.ts,让进度条居中显示

Egret白鹭H5开发-围住神经猫

实现BaseScene类

实现BaseScene类,继承egret.DisplayObjectContainer类,拥有initView方法,之后的所有场景继承自该类,只需实现initView方法即可

Egret白鹭H5开发-围住神经猫

添加背景图片

在Main.ts的createGameScene方法中添加背景图片,后面红色方框内两句是用于设置场景,初始化场景,暂时先不用理

Egret白鹭H5开发-围住神经猫

实现游戏控制类SceneController.ts

写SceneController.ts类(场景控制),这是一个单例,有initGame(初始化游戏,显示开始游戏场景)、showPlayScene(显示游戏场景)、showLevelTip(开始游戏时提示关卡的动画)、showEndScene(显示结束场景)

实现开始场景1

首先写开始场景StartScene.ts,很简单,就一张图片和一个按钮,这里的GameUtil.bitmapToBtn()方法是给组件添加点击缩放效果(类似按钮),具体实现如下

Egret白鹭H5开发-围住神经猫
Egret白鹭H5开发-围住神经猫

实现开始场景2

在场景控制类中的initGame方法里面显示开始场景,代码和效果如下:

Egret白鹭H5开发-围住神经猫
Egret白鹭H5开发-围住神经猫

实现游戏场景

游戏场景PlayScene.ts,游戏场景有中间一些格子和一只猫,格子用二维数组存放,自己实现GridNode.ts继承自egret.Sprite表示格子节点并可添加到舞台上(有节点状态(可走、不可走、有猫)、在数组中的下标、在舞台上的坐标、格子的大小、格子的背景图片、游戏监听接口(PlayScene.ts实现这个接口,并在创建格子的时候传进来,用于通知用户点击哪个格子、猫走哪个格子、谁赢等等)),再来实现猫精灵Cat.ts继承egret.Sprite(有状态(有路可走、被围住但是还有空格可以走,只是走不出去了)、在数组中的下标、大小、背景、游戏监听接口、坐在的格子节点),同时猫还有寻找路径等方法(后面再说)。 在游戏控制类中,控制显示游戏场景

Egret白鹭H5开发-围住神经猫

游戏开始前,有一个提示关卡的动画,也是在游戏控制类中控制提示(具体看项目代码) 初始化格子节点,偶数行需要缩进(就是加多个左边距)

Egret白鹭H5开发-围住神经猫

初始化创建一些障碍物

Egret白鹭H5开发-围住神经猫

创建猫节点(在数组中间)

Egret白鹭H5开发-围住神经猫

此刻运行效果如下

Egret白鹭H5开发-围住神经猫

GridNode.ts主要方法,监听触摸事件,判断是否可以点击

Egret白鹭H5开发-围住神经猫

PlayScene.ts中实现一个playerRun方法表示玩家点击格子、catRun方法为猫走的格子、canRun方法返回当前猫是否走完(还在思考中那么玩家就不能点击格子)

Egret白鹭H5开发-围住神经猫

实现猫搜索路径算法

到这里,游戏场景基本完成,现在就来写最重要的一点,猫搜索路径的算法,分析一下,猫要跑出去,第一步就是要选择最短路径,很简单,用bfs算法搜索(只贴主要代码,其他可以到github查看):

Egret白鹭H5开发-围住神经猫

如果没有路径走出,那么得到的结果是一个空数组,那么此时需要判断是否有格子可以走,如果没有代表猫输了,如果有就随机走一个可以走的格子(反正走不出去了,那就随机走)

Egret白鹭H5开发-围住神经猫

如果有路径走出,那么就随机选一条路径走。

优化算法上面的算法等找出左右最短路径,但随机走的话,可能走的还不是最优路径,因为可能某些路径只有一条路,这种情况很容易被堵掉,那么需要再实现一个算法筛选出有多个终点的路径,因为上一步存放了所有路径需要走的第一个格子,那么算法可以通过判断第一步格子相同的路径的数量来选择,可能得到的就剩下一条路径(如果还有多条,那就可以随机选择一条路径了)

Egret白鹭H5开发-围住神经猫
Egret白鹭H5开发-围住神经猫

这还不是最优算法!!!这个算法有一种死路也会被选择(多个路径需要再第二步之后才会出现,但是第一步走完可能就会被堵死,这种情况我没有判断,有兴趣的可以自己去实现),另外,如果有其它更好的算法,欢迎评论区推荐~

结束场景很简单,就根据GameData.ts中保存的全局游戏数据,判断显示成功弹窗还是失败弹窗 成功弹窗:

失败弹窗:


以上所述就是小编给大家介绍的《Egret白鹭H5开发-围住神经猫》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

jQuery in Action

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》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具