cocos creator 多选节点,高亮显示

转自:https://www.cnblogs.com/hdwang/p/7498858.html

可用于斗地主选牌
监听是基于父节点的监听

预制资源,高亮显示

代码块

cc.Class({
    extends: cc.Component,

    properties: {
        poker:{
            default:null,
            type:cc.Node
        },
        cardMask:{
            default:null,
            type: cc.Prefab
        }
    },

        onLoad: function () {
            //牌
            this.cards = this.poker.children;

            //牌初始位置
            this.cardInitY = this.cards[0].y;

            //触摸选择到的牌
            this.touchedCards = [];

            //选中的牌
            this.selectedCards = [];

            console.info(this.cards);
        },

        start: function () {
            // this.cards = this.poker.children;
            // console.info(this.cards);

            this.addTouchEvent();
        },

        /**
         * 添加事件
         */
        addTouchEvent:function(){

            //父节点监听touch事件(直接子节点必须注册同样的事件方能触发)
            this.poker.on(cc.Node.EventType.TOUCH_START, function (event) {
                console.log('poker TOUCH_START');

                //牌
                var card = event.target;

                //起始触摸位置(和第一张card一样,相对于poker的位置)
                this.touchStartLocation = this.cards[0].convertTouchToNodeSpace(event);
                console.log('touch start Location:'+ JSON.stringify(this.touchStartLocation));

                //计算牌位置
                var index = 0;
                for(var i=0;i<this.cards.length;i++){
                    var c = this.cards[i];
                    if(c.name == card.name){
                        index = i;
                        break;
                    }
                }

                //暂存第一次触摸到的牌
                var touchedCard = {
                    index:index,
                    card:card
                };
                this.firstTouchedCard = touchedCard;
                //暂存
                this.pushTouchedCards(touchedCard.index,touchedCard.card);

            }, this);

            //父节点监听touch事件(直接子节点必须注册同样的事件方能触发)
            this.poker.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
                console.log('poker TOUCH_MOVE');
                //先清除原先触摸到的牌
                this.clearTouchedCards();
                //保存第一张牌
                this.pushTouchedCards(this.firstTouchedCard.index,this.firstTouchedCard.card);

                //触摸点转换为card节点坐标
                var nodeLocation = this.cards[0].convertTouchToNodeSpace(event);
                console.log('touch nodeLocation:'+ JSON.stringify(nodeLocation));
                var x = nodeLocation.x;
                var y = nodeLocation.y; 

                //找到当前选中的牌
                var currentCard = null;
                for(var i=0;i< this.cards.length;i++){
                    var card = this.cards[i];
                    var cardX = card.x;
                    var cardY = card.y;
                    console.log('card x='+cardX+',y='+cardY);


                    //某张牌范围包括了鼠标位置,选中此牌与触摸开头的所有牌
                    var cardWidth = i==5 ? card.width:19;
                    var cardHeight = card.height;
                    if(cardX<=x && x <= cardX+cardWidth && cardY<=y && y<= cardY+cardHeight){
                        currentCard = card;

                        //暂存触摸到的牌
                        this.pushTouchedCards(i,card);

                        break;
                    }
                }

                //添加开头与此牌直接的所有牌
                var startTouchLocation = this.touchStartLocation;
                for(var i=0;i< this.cards.length;i++){
                    var card = this.cards[i];
                    var cardX = card.x;
                    //框选的范围包括了的牌
                    var min,max;
                    if(startTouchLocation.x < nodeLocation.x){
                        min = startTouchLocation.x;
                        max = nodeLocation.x;
                    }else{
                        min = nodeLocation.x;
                        max = startTouchLocation.x;
                    }
                    console.log('min='+min+', max='+max);

                    if(min <= cardX && cardX <= max){
                        //暂存触摸到的牌
                        this.pushTouchedCards(i,card);
                    }
                }


            }, this);

        //父节点监听touch事件(直接子节点必须注册同样的事件方能触发)
        this.poker.on(cc.Node.EventType.TOUCH_END, function (event) {
            console.log('poker TOUCH_END');
            this.doSelectCard();
        }, this);

        //父节点监听touch事件(直接子节点必须注册同样的事件方能触发)
        this.poker.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
            console.log('poker TOUCH_CANCEL');
            this.doSelectCard();
        }, this);

        //给所有的牌注册事件,会自动冒泡到poker节点
        for(var i=0;i< this.cards.length;i++){
            var cards = this.cards;
            //闭包传递i值
            (function(i){
                var card = cards[i];
                card.on(cc.Node.EventType.TOUCH_START, function (event) {
                    console.log('card TOUCH_START');
                }, card);

                card.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
                    console.log('card TOUCH_MOVE');
                }, card);

                card.on(cc.Node.EventType.TOUCH_END, function (event) {
                    console.log('card TOUCH_END');
                }, card);

                card.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
                    console.log('card TOUCH_CANCEL');
                }, card);


            })(i)

        }

    },

    /**
     * 暂存触摸到的牌
     */
    pushTouchedCards:function(index,card){
        //构造牌对象
        var cardObj = {
            index:index,
            name:card.name,
            isSelected:card.y==this.cardInitY?false:true //高度不一样,表示选中
        };

        //防止重复添加
        var existCard = this.touchedCards.find(function(obj){
            if(obj.name == card.name){
                return obj;
            }else{
                return null;
            }
        });
        if(!existCard){
            //添加暂存
            this.touchedCards.push(cardObj);

            //包含提示
            this.addCardMask(card);
        }
    },

    /**
     * 清除原先暂存的触摸到的牌
     */
    clearTouchedCards:function(){
        for(var i=0;i<this.touchedCards.length;i++){
            var cardIndex = this.touchedCards[i].index;
            var card = this.cards[cardIndex];
            card.removeChild(card.children[0]);
        }
        this.touchedCards = [];
    },

    /**
     * 选择牌
     */
    doSelectCard:function(){
        this.selectedCards = [];

        console.log(this.touchedCards);

        //改变牌状态
        for(var i = 0; i< this.touchedCards.length;i++){
            var cardObj = this.touchedCards[i];
            var card = this.cards[cardObj.index];
            if(cardObj.isSelected){ //如果是选中改为不选中
                card.y = card.y - 30;
            }else{ //不选中改为选中状态
                card.y = card.y + 30;
            }
        }

        //重置
        this.clearTouchedCards();

        //显示选中的牌
        this.showSelectedCards();
    },

    /**
     * 包含牌遮罩
     */
    addCardMask:function(card){
        var cardMask = cc.instantiate(this.cardMask);
        cardMask.setPosition(cc.p(0, 0));
        card.addChild(cardMask);
     },

    /**
    * 显示选中的牌
    */
    showSelectedCards:function(){
        this.selectedCards = [];
        for(var i=0;i< this.cards.length;i++){
            var card = this.cards[i];
            var isSelected = card.y==this.cardInitY?false:true;
            if(isSelected){
                this.selectedCards.push(card.name);
            }
        }
        //输出
        console.info("selected cards is: "+ JSON.stringify(this.selectedCards));
    },
});
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值