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

第四节 打击得分和扣分显示、倒计时功能条制作

1. 实现游戏的倒计时
2. 显示游戏得分

代码及相关资源下载

实现游戏的倒计时

首先说明一点：

打开目录

复制粘贴增加的素材（3张 切片动画 进度条）

F5刷新资源

当value为0 进度条为0
当value为1 进度条为1
在这里 我们设置value=1 全局引用 var=timeBar
保存并导出（F12）

---

我个人操作：把路径修改（因为我导出的没有.json而是.altas的后缀）

---

Game.js 增加代码**

var Game=(function(_super){
   function Game(){
       this.moles=new Array;
       this.moleNum =9;
       Game.super(this);
       //设置进度条的初始值************
       this.timeBar.value=1;

       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.timeBar.value-=(1/90);
       if(this.timeBar.value<=0){
           this.gameOver();
           return;
       }
    // this.mole.show();
        this.index=Math.floor(Math.random()*this.moleNum);
        this.moles[this.index].show();
   }
   //***
   _proto.gameOver=function(){
       Laya.timer.clear(this,this.isShow);
       console.log("游戏结束");
   }
   return Game;
})(ui.GameUI);

成功显示进度条

显示游戏得分

拖入得分

设置clipX=10（分成10份）index为几就显示几

Ctrl+R

Ctrl+B 转换成容器 var=scroeNums

保存 导出发布F12
Game.js

var Game=(function(_super){
   function Game(){
       this.moles=new Array;
       this.moleNum =9;
       Game.super(this);
       //设置进度条的初始值
       this.timeBar.value=1;
       //存储得分
       this.score=0;
       this.hitCallBackHd=Laya.Handler.create(this,this.setScore,null,false);

       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.hitCallBackHd); 
           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.timeBar.value-=(1/90);
       if(this.timeBar.value<=0){
           this.gameOver();
           return;
       }
    // this.mole.show();
        this.index=Math.floor(Math.random()*this.moleNum);
        this.moles[this.index].show();
   }
   _proto.gameOver=function(){
       Laya.timer.clear(this,this.isShow);
       console.log("游戏结束");
   }
   _proto.setScore=function(type){
        this.score+=(type==1?-100:100);
        if(this.score<=0)this.score=0;
        this.updateScoreUI();
   }
   _proto.updateScoreUI=function(){
        this.data={};
        this.temp=this.score;
        for(var i=9;i>=0;i--){
            this.data["item"+i]={index:Math.floor(this.temp%10)};
            this.temp/=10;
        }
        this.scoreNums.dataSource=this.data;
   }
   return Game;
})(ui.GameUI);

Mole.js

var Mole = (function(){
    function Mole(normalState,hitState,downY,hitCallBackHd){
        this.normalState=normalState;
        this.hitState=hitState;
        this.downY=downY;
        this.upY=this.normalState.y;
        this.hitCallBackHd=hitCallBackHd;
        this.reset();
        this.normalState.on(Laya.Event.CLICK,this,this.hit);
    };
    var _proto=Mole.prototype;
    //重置
    _proto.reset=function(){
          this.normalState.visible=false;
          this.hitState.visible=false;
          this.isVctive=false;
          this.isShow=false;
          this.isHit=false;
    }
    //显示
    _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))
    }
    //停留
    _proto.showComplete=function(){
            if(this.isShow && !this.isHit){
                Laya.timer.once(2000,this,this.hide)
            }
    }
    //消失
    _proto.hide=function(){
        if(this.isShow && !this.isHit){
            this.isShow=false;
            Laya.Tween.to(this.normalState,{y:this.downY},300,Laya.Ease.backIn,Laya.Handler.create(this,this.reset))
        }
    }
    //受击
    _proto.hit=function(){
        if(this.isShow &&!this.isHit){
            this.isShow=false;
            this.isHit=true;
            Laya.timer.clear(this,this.hide);
            this.normalState.visible=false;
            this.hitState.visible=true;
            this.hitCallBackHd.runWith(this.type);
            Laya.timer.once(500,this,this.reset);
        }      
    }
    return Mole;
})();

运行 成功显示

Layabox引擎开发H5打地鼠游戏（三）编辑游戏界面、实现地鼠的随机出现