egret 菜鸟教程| 密室逃生游戏实战

这次给大家带来的是通过Egret实现密室逃生小游戏的教程。该游戏包括人物状态机、MVC设计模式和单例模式，该游戏在1.5s内通过玩家点击操作寻找安全点，方可进入下一关，关卡无限，分数无限。下面是具体的模块介绍和代码实现。

该游戏主要内容包括

• 开始游戏场景

• 游戏场景

• 游戏结束结算场景

• 全局常量类

• 人物状态机类

游戏源码素材下载：https://github.com/shenysun/RoomRun

创建全局常量类

在所有舞台搭建之前先写一个全局的静态方法类，取名为GameConst。这个类里面的方法和常量可以供全局使用，例如舞台宽高、通过名字获取位图、通过名字获取纹理集精灵等等。这个类可以大大减少后期的代码量，降低整体的耦合度。

/**常用常量类 */
classGameConst{
   /**舞台宽度 */
publicstaticStageW:number;
   /**舞台高度 */
publicstaticStageH:number;
​
/**根据名字创建位图 */
publicstaticCreateBitmapByName(name:string):egret.Bitmap{
lettexture:egret.Texture=RES.getRes(name);
letbitmap:egret.Bitmap=newegret.Bitmap(texture);
returnbitmap;
}
/**
    * 根据name关键字创建一个Bitmap对象。此name 是根据TexturePacker 组合成的一张位图
    */
   publicstaticcreateBitmapFromSheet(name:string, sheetName:string):egret.Bitmap{
       lettexture:egret.Texture=RES.getRes(`${sheetName}_json.${name}`);
       letresult:egret.Bitmap=newegret.Bitmap(texture);
       returnresult;
  }
​
   publicstaticgetTextureFromSheet(name:string, sheetName:string):egret.Texture{
       letresult:egret.Texture=RES.getRes(`${sheetName}_json.${name}`);
       returnresult;
  }
   /**移除子类方法 */
   publicstaticremoveChild(child:egret.DisplayObject) {
       if(child&&child.parent) {
           if((<any>child.parent).removeElement) {
              (<any>child.parent).removeElement(<any>(child));
          }
           else{
               child.parent.removeChild(child);
          }
      }
  }
}

如果游戏中设置图片锚点较多也可以在这个类里面加一个设置锚点的方法，传入对象，横轴锚点和纵轴锚点坐标三个参数。

开始场景

开始页面比较简洁，有一个LOGO和两个按钮分别是开始游戏，更多游戏。

/**游戏开始场景 */
classStartGameLayerextendsegret.Sprite{
   /**开始按钮 */
   privatestartBtn:MyButton;
   /**更多按钮 */
   privatemoreBtn:MyButton;
   /**LOGO */
   privatetitleImage:egret.Bitmap;
   publicconstructor() {
       super();
       this.init();
  }
   privateinit():void{
       /**添加游戏LOGO */
       this.titleImage=GameConst.createBitmapFromSheet("logo_mishitaosheng", "ui");
       this.titleImage.x=51;
       this.titleImage.y=161;
       this.addChild(this.titleImage);
       //开始按钮设置
       this.startBtn=newMyButton("btn_y", "btn_kaishi");
       this.addChild(this.startBtn);
       this.startBtn.x=(GameConst.StageW-this.startBtn.width) /2;
       this.startBtn.y=GameConst.StageH/2-75;
       this.startBtn.setClick(this.onStartGameClick);
       //更多按钮设置
       this.moreBtn=newMyButton("btn_b", "btn_gengduo");
       this.moreBtn.x=(GameConst.StageW-this.startBtn.width) /2;
       this.moreBtn.y=GameConst.StageH/2+75;
       this.addChild(this.moreBtn);
       this.moreBtn.setClick(this.onMoreBtnClick);
       //文本
       lettex:egret.TextField=newegret.TextField();
       tex.width=GameConst.StageW;
       tex.textAlign=egret.HorizontalAlign.CENTER;
       tex.strokeColor=0x403e3e;
       tex.stroke=1;
       tex.bold=true;
       tex.y=GameConst.StageH/2+250;
       tex.text="Powered By ShenYSun";
       this.addChild(tex);
  }
   privateonStartGameClick() {
       GameControl.Instance.onGameScenesHandler();
  }
   privateonMoreBtnClick() {
       console.log("更多游戏");
       platform.GetInfo();
  }
}

点击startBtn按钮执行GameControl类的切换场景方法。

场景控制类

/**游戏管理 */
classGameControlextendsegret.Sprite{
privatestatic_instance:GameControl;
publicstaticgetInstance() {
if(!GameControl._instance) {
GameControl._instance=newGameControl();
}
returnGameControl._instance;
}
/**当前场景 */
privatecurrentStage:egret.DisplayObjectContainer;
//开始游戏
privatestartGame:StartGameLayer;
/**游戏场景 */
privategameScenes:GameScenesLayer;
/**结束场景 */
privateoverScenes:GameOverLayer;
/**背景 */
privatebgImg:egret.Bitmap;
publicconstructor() {
super();
this.startGame=newStartGameLayer();
this.gameScenes=newGameSc