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

前言

       今年9月份跳槽从Android转向前端H5网页和H5小游戏开发,一开始自己学习用Canvas做了拼图、贪吃蛇大作战等小游戏,在公司边学习边用phaser写了个手势识别的小游戏,现在公司想尝试转型Egret白鹭引擎来开发H5,碰巧最近有个类似围住神经猫的H5小游戏项目,所以我就拿围住神经猫来学习学习练练手。

       其实几个月前,微信小游戏出现的时候,我就用自己学过一点点Egret,就照着官方的简单的demo下了一遍,大概了解了下,所以这次开发起来也是挺轻松的。

       可能是我自己学习能力比较好,所以入门比较快,加上Egret用TypeScript来开发,写法上有点类似于java和kotlin,而我以前就是做Android开发的,所以相对来说上手很快,学习成本降低了很多。

       这个游戏的开发,前前后后共花了一天多的时间,图片素材和音频素材是在网上找的(有几个按钮还是我自己用photoshop做的),仅用来学习。上午了解下,下午就直接上手开发,游戏中有什么写得不好的,还望大神指点指点~

用Egret白鹭引擎写的围住神经猫H5游戏

demo以及源码地址

在线demo

(pc端看的话,打开开发者模式,切换手机模式) game.codebear.cn/nervecat

源码地址

github.com/CB-ysx/game…

原文链接(我的博客)

codebear.cn/article?id=…

Egret白鹭引擎

官网链接: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. 一个工具类(获取宽高、图片等)

于是项目结构就是这样:

《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开发-围住神经猫》

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

实现结束场景

结束场景EndScene.ts

《Egret白鹭H5开发-围住神经猫》 结束场景很简单,就根据GameData.ts中保存的全局游戏数据,判断显示成功弹窗还是失败弹窗 成功弹窗:
《Egret白鹭H5开发-围住神经猫》 失败弹窗:
《Egret白鹭H5开发-围住神经猫》

写在最后

以上写了游戏实现的步骤和部分代码,具体代码可前往github查看:github.com/CB-ysx/game… 这是我用egret写的第一个项目,可能某些地方写的不够好,希望大家能指点指点~

    原文作者:算法小白
    原文地址: https://juejin.im/post/5bda63125188257f8c45dd48
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞