Layabox引擎开发H5打地鼠游戏（三）

第三节 编辑游戏界面、实现地鼠的随机出现

1. 编辑UI界面，给每个树洞添加地鼠
2. 随机从某个树洞中出现地鼠

3. 随机不同类型的地鼠

   代码及相关资源下载

编辑UI界面，给每个树洞添加地鼠

将var的值移动到name的值
即

选中box，再点击重复复制


点击确定，再将图片拉到合适的位置，并进行地图每个洞的草坪的图片替换

---

替换方法：1、直接将图片拖动到对应的位置

2、根据图片的名字手动修改

---

完成

记得完成后导出（F12）

随机从某个树洞中出现地鼠

Game.js

var Game=(function(_super){
   function Game(){
       this.moles=new Array;
       this.moleNum =9;
       Game.super(this);
       for(var i=0;i<this.moleNum;i++){
           this.box=this.getChildByName("item"+i);
           this.mole=new Mole(this.box.getChildByName("normal"),this.box.getChildByName("hit"),22);
           this.moles.push(this.mole);
       }
      // this.mole=new Mole(this.normal,this.hit,22);

       Laya.timer.loop(1000,this,this.isShow);
   }
   //注册类
   Laya.class(Game,"Game",_super);
   var _proto=Game.prototype;
   _proto.isShow=function(){
    // this.mole.show();
        this.index=Math.floor(Math.random()*this.moleNum);
        this.moles[this.index].show();
   }
   return Game;
})(ui.GameUI);

运行

成功

随机不同类型的地鼠

在Mole.js的_proto.show修改代码如下：

_proto.show=function(){
          if(this.isVctive) return;
          this.isVctive=true;
          this.isShow=true;
          this.type=Math.random()<0.3?1:2;
          this.normalState.skin="comp/mouse_normal_"+this.type+".png";
          this.hitState.skin="comp/mouse_hit_"+this.type+".png";
          this.normalState.y=this.downY;
          this.normalState.visible=true;
        //  this.hitState.visible=false;
          Laya.Tween.to(this.normalState,{y:this.upY},500,Laya.Ease.backOut,Laya.Handler.create(this,this.showComplete))
    }

注意这里的图片路径文件名是这个：

运行 成功显示

Layabox引擎开发H5打地鼠游戏（二）地鼠的显示、停留、消失、受击