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

2019-04-04 H5案例分享 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，其他的都是一些开发辅助工具。关于这些的介绍，还是直接戳上方官网链接去看看吧。

了解下围住神经猫游戏

游戏界面

游戏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查看）：

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

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

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

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

实现结束场景

结束场景EndScene.ts

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

失败弹窗：

写在最后

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

作者：CodeBearsh
链接：https://juejin.im/post/5bda63125188257f8c45dd48
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（转自掘金的Egret白鹭H5开发-围住神经猫，链接是https://juejin.im/post/5bda63125188257f8c45dd48）

以上为“H5案例分享”团队转载文章，版权归原作者所有。

以上为“H5案例分享”团队原创文章，转载请注明出处！