Cocos Creator游戏之橡皮怪（二）

1.创建计分板

（1）添加计分板bg

 （2）创建倒计时时间和分数Label

（3）创建进度条

 2.创建粒子特效（相当于装饰）

（1）创建粒子

 （2）修改粒子组件：

 

修改前：

修改后：

3.创建橡皮怪并添加碰撞盒

ps:这里我用的是图片没有用到预制件，初始位置也是自己定的。也可以使用代码进行预制件生成

4.创建地刺的预制件并添加BoxCollider

 

5.让player能够跳跃和隔岸跳

 onLoad () {
        this.ismoving=false;//触摸事件禁用标志
        //开始触摸
        this.node.on("touchstart",this.setInputControl.bind(this));
    },

  //释放触摸
    onDestroy(){
        this.node.off("touchstart",this.setInputControl.bind(this));
    },

  setInputControl(touch,event){
        if(this.ismoving) return;
        this.ismoving = true;
        //convertToNodeSpaceAR 将触摸的位置转化为该节点下的坐标
        //touch.getLocation() 获取当前触点位置。
        let location = this.node.convertToNodeSpaceAR(touch.getLocation());
        //得到主角的位置
        let point = this.player.getPosition();
        this.jump(point.x*location.x>=0); //决定原地跳还是跨岸跳    
    },

    jump(JumpInPlace){
        let place = this.player.getPosition();
        let callback = cc.callFunc(function(){
            this.ismoving = false;
        }.bind(this));
        //原地跳
        let isRigth = (this.player.x>0)?-1:1;//这里对主角的左右方向跳判断
        let action0 = cc.moveBy(0.1,cc.v2(100*isRigth,0));
        let action1 = action0.reverse();//执行与原动作相反的动作
        let seq0 = cc.sequence(action0,action1,callback);
        
        //隔岸跳
        let action2 = cc.moveTo(0.2,cc.v2(-place.x,place.y));
        let action3 = cc.rotateBy(0,0,180,0);
        let seq1 = cc.sequence(action2,action3,callback);
        //判断跳
        this.player.runAction(JumpInPlace?seq0 : seq1);
    },

这里代码涉及到api还是有几个的：

（1）convertToNodeSpaceAR ：

         官方API：https://docs.cocos.com/creator/api/zh/classes/Node.html#converttonodespacear

         简书：https://www.jianshu.com/p/350a488f4802

（2）touch.getLocation() ：https://docs.cocos.com/creator/api/zh/classes/Touch.html#getlocation

（3）cc.callFunc ： https://docs.cocos.com/creator/api/zh/modules/cc.html#callfunc

（4）cc.moveBy ：

         来源于csdn ： https://blog.csdn.net/agsgh/article/details/79447090

（5）触摸事件：

官方API：https://docs.cocos.com/creator/manual/zh/scripting/internal-events.html

ps:请注意适配！！！刚在运行时发现bg拉伸和logo及字体严重变形！！！

给logo添加widget和对Canvas修改

 将脚本挂在bg节点处，并拖动player

        ​​​​​​效果图：尴尬的是由于图片的原因会出现下方的拉伸

 6.生成地刺

   properties: {
        //地刺预制件
        diCiPre : cc.Prefab
    },

 onLoad () {
  
        //开启碰撞检测
        cc.director.getCollisionManager().enabled =true;
         //创建对象池
        this.count =0;
        this.myPool =new cc.NodePool();
        for(let i=0;i<8;i++)
        {
            this.createDici();
        }
    }

    //生成地刺
    createDici()
    {
        let dici;
        this.count++;
        if(this.myPool.size()>0) //通过 size 接口判断对象池中是否有空闲的对象
        {
            dici =this.myPool.get();
        }else // 如果没有空闲对象，也就是对象池中备用对象不够时，我们就用 cc.instantiate 重新创建
        {
            dici =cc.instantiate(this.diCiPre);
        }
        let random =(Math.random()>0.5)? -1:1;
        let pos =this.calPosition(random);
        this.node.addChild(dici);
        dici.zIndex =-1;
        dici.setPosition(pos);
        dici.scaleX =random; //s生成左右边地刺方向
    },  

7.地刺移动

创建diCiObj脚本并挂在地刺预制件上

 

编写地刺移动

    onLoad (){
        this.isMoving=false;
        this.node.parent.on("touchstart",this.diciMove.bind(this));
    },
    diciMove()
    {
        if(!this.isMoving && this.node.parent &&this.node.parent.getComponent("game").ismoving){
            this.isMoving =true;
            let callback =cc.callFunc(function(){
                if(this.node.y>this.node.parent.height/2){
                    //调用game脚本中的地刺生成方法
                    this.node.parent.getComponent("game").createDici();
                    //将地刺添加进对象池中
                    this.node.parent.getComponent("game").myPool.put(this.node);
                }
                this.isMoving =false;
            }.bind(this));
            this.node.runAction(cc.sequence(cc.moveBy(0.2,cc.v2(0,140)),callback));
        }
    },

8.添加分数和倒计时

 在触摸事件中添加分数

    properties: {
    //声明计分板
    scoreLab:cc.Label,
    //声明倒计时时间
    timeLab:cc.Label,
    //声明进度条
    timeprogress:cc.ProgressBar,
    },

onLoad () {
    this.score = 0;
    cc.director.getCollisionManager().enabled =true;
    this.time =10;//运行时间
    this.alltime=this.time;//总时间
    this.timeset();//显示时间
},

  timeset()//计时板
    {
        var mytime=setInterval(() => {
            this.time--;
            this.timeprogress.progress=this.time/this.alltime;
            this.timeLab.string ="time:"+this.time;  
            if(this.time ===0)
            {
                clearInterval(mytime);//清除计时器
            }
        }, 1000);
    },

  // update (dt) {},
    setInputControl(touch,event){
        if(this.ismoving) return;
        this.ismoving = true;
        //convertToNodeSpaceAR 将触摸的位置转化为该节点下的坐标
        //touch.getLocation() 获取当前触点位置。
        let location = this.node.convertToNodeSpaceAR(touch.getLocation());
        //得到主角的位置
        let point = this.player.getPosition();
        this.jump(point.x*location.x>=0); //决定原地跳还是跨岸跳   
        this.score++;
        this.scoreLab.string = "score:"+this.score; 
    },

 运行之后效果：

9.添加结束UI并绑定

 properties: {
         //提示界面
        hintUI : cc.Node,
    },

onLoad () {
        this.hintUI.active = false; //初始化隐藏
}

  //提示中的确定按钮
    onConfirmClickBut(){
        cc.director.loadScene("game");
    },

    //提示中退出按钮
    onQuitClickBut(){
        cc.director.end();
    }

在倒计时为0显示

 timeset()//计时板
    {
        var mytime=setInterval(() => {
            this.time--;
            this.timeprogress.progress=this.time/this.alltime;
            this.timeLab.string ="time:"+this.time;  
            if(this.time ===0)
            {
                this.hintUI.active = true;
                clearInterval(mytime);//清除计时器
            }
        }, 1000);
    },

 

 至此游戏结束

之后会带来微信打飞机游戏、中级捕鱼达人