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

时间 2019-11-07

标签 egret 白鹭 h5 开发围住神经繁體版

原文原文链接

前言

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

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

多是我本身学习能力比较好，因此入门比较快，加上Egret用TypeScript来开发，写法上有点相似于java和kotlin，而我之前就是作Android开发的，因此相对来讲上手很快，学习成本下降了不少。java

这个游戏的开发，前先后后共花了一天多的时间，图片素材和音频素材是在网上找的（有几个按钮仍是我本身用photoshop作的），仅用来学习。上午了解下，下午就直接上手开发，游戏中有什么写得很差的，还望大神指点指点~git

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

demo以及源码地址

在线demo

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

源码地址

github.com/CB-ysx/game…typescript

原文连接(个人博客)

codebear.cn/article?id=…json

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写的第一个项目，可能某些地方写的不够好，但愿你们能指点指点~