CVP认证学习笔记--(何小成)014--点击英雄

本节课没有新的知识点，主要是总结本周所学内容所做的一个小demo，作业要求实现点击数字文本，文本加10，为综合应用之前的知识点，我扩展为一个模拟攻击怪物的过程，点击攻击按钮，npc被攻击，当npc血量为0时，执行一个特效后死亡，过程如下：

首先自己实现一个Npc精灵类，其中包含血量属性，包含被攻击的方法

var NpcSprite = cc.Sprite.extend({
    hp:100,// 血量
    ctor:function(pic){
        this._super(pic);
    },
    // 被攻击方法  
    attacked:function(attack,layer){
        if(this.hp>0){
            this.hp -= attack*(1+Math.random());// 每次攻击，血量减少基础数值*随机的暴击数值
            var attackTxt = layer.getChildByTag(2);// 获取攻击按钮，传入死亡回调函数使用
            var hpTxt = layer.getChildByTag(3);
            this.hp = this.hp<0?0:this.hp;
            hpTxt.setString("血量:"+Math.round(this.hp));
            var scoreTxt = layer.getChildByTag(4);
            scoreTxt.setString("分数:"+Math.round((100-this.hp)*10));
            var act = new cc.sequence(cc.scaleTo(0.1,1.1),cc.scaleTo(0.1,0.9),cc.scaleTo(0.1,1),cc.callFunc(this.dead,this,attackTxt));
            this.runAction(act);
        }
    },
    dead:function(npc,attackTxt){// 死亡回调函数
        if(npc.hp>0){// 如果hp>0，则没有死，直接return
            return;
        }
        // npc执行一个死亡特效后，移除
        var act = new cc.spawn(
            new cc.sequence(cc.scaleTo(0.2,1.1),cc.scaleTo(0.3,0),cc.callFunc(function(npc,scoreTxt){
            npc.removeFromParent();
            attackTxt.setString("战斗胜利");// 把攻击按钮文字变成战斗胜利
            var overAct = new cc.sequence(cc.scaleTo(0.2,1.5),cc.scaleTo(0.1,0.8),cc.scaleTo(0.1,1.2));
            attackTxt.runAction(overAct);// 战斗胜利再来个特效
        },npc)),cc.rotateBy(0.5,360));
        npc.runAction(act);
    }
});

初始化场景中的精灵

ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        var size = cc.winSize;
        cc.log("构造");
        var npc=new NpcSprite(res.npc01_png);
        npc.setPosition(200,200);
        npc.setTag(110);
        var attack = new cc.LabelTTF("攻击","",25);
        attack.setPosition(npc.getPositionX()+npc.width/2+100,npc.getPositionY());
        var hp = new cc.LabelTTF("血量:"+npc.hp,"",25);
        hp.setPosition(hp.width/2,size.height-hp.height/2);
        var score = new cc.LabelTTF("分数:0","",25);
        score.setPosition(size.width-score.width/2-100,size.height-score.height/2);
        this.addChild(npc);
        this.addChild(attack);
        this.addChild(hp);
        this.addChild(score);
        npc.setTag(1);
        attack.setTag(2);
        hp.setTag(3);
        score.setTag(4);
        return true;
    },

添加触摸事件管理，点击攻击按钮，触摸区域判断，如果是攻击按钮所在区域，攻击按钮实现放大缩小的点击效果，怪物实现方法缩小的效果（看起来才像是被打了一下）

onEnter:function()
    {
        this._super();
        cc.log("初始化完成");
       //添加触屏事件
       cc.eventManager.addListener({
           event:cc.EventListener.TOUCH_ONE_BY_ONE,
           swallowTouches:true,//吞噬事件 不再传递
           onTouchBegan:this.touchbegan,
           onTouchMoved:this.touchmoved,
           onTouchEnded:this.touchended
       },this);

    },
    onExit:function()
    {
        this._super();
        cc.log("即将消失");
    },
    touchbegan:function(touch,event){
        cc.log("按下");
        var nownpc=event.getCurrentTarget().getChildByTag(1);
        var attack=event.getCurrentTarget().getChildByTag(2);
        var startHp = nownpc.hp;
        if(touch.getLocation().x>=attack.getPositionX()-attack.width&&touch.getLocation().x<=attack.getPositionX()+attack.width
        &&touch.getLocation().y>=attack.getPositionY()-attack.height&&touch.getLocation().y<=attack.getPositionY()+attack.height){
            // 点击在区域内，收到攻击
            nownpc.attacked(2,event.getCurrentTarget());
            // 飘出血量减少数字
            var reduceHp = nownpc.hp-startHp;
            var num = new cc.LabelTTF(""+Math.round(reduceHp),"",40);
            num.setColor(cc.color(255,0,0,255));
            num.setPosition(nownpc.getPositionX(),nownpc.getPositionY()+nownpc.height/2);
            event.getCurrentTarget().addChild(num);
            num.runAction(
                new cc.sequence(
                    new cc.spawn(
                        cc.moveBy(0.5,cc.p(0,50)),cc.fadeOut(0.5)
                    ),new cc.callFunc(function(num){
                        num.removeFromParent();
                    },num)
                )
            );
            // 攻击按钮也变化
            attack.runAction(new cc.sequence(cc.scaleTo(0.2,1.1),cc.scaleTo(0.1,0.9),cc.scaleTo(0.1,1)));
        }
        return true;
    },
    touchmoved:function(touch,event)
    {
        cc.log("移动");
    },
    touchend:function(touch,event)
    {
        cc.log("抬起");
    }

最后运行效果

http://www.cocoscvp.com/usercode/2016_04_20/026bc981b469e83ed488c783b4d0b0034233188a/