cocos 滑过选中

做扑克牌时碰到的需要按下滑过后选中所滑过的牌，

方法是记录按下的坐标，与滑动中的坐标进行计算，根据坐标，计算选中这两个坐标之间的牌

代码 如下：

cc.Class({
    extends: cc.Component,

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

    // // use this for initialization
    onLoad: function () {

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

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

        this.addTouchEvent();
    },

    start: function () {},

    resetTouchData: function () {

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

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

    },

    refreshCurPoker: function (porkerCards, isNeedAddEvent = 0) {
        //牌
        this.cards = porkerCards;
        //牌初始位置
        if (this.cards.length > 0)
            this.cardInitY = this.cards[0].y;
        isNeedAddEvent && this.addPokerTouchEvent();
        this.clearTouchedCards();
        console.info(this.cards);
    },

    /**
     * 添加事件
     */
    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.poker.convertToNodeSpaceAR(event.touch._startPoint);
            console.log('touch start Location:', 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, true);

        //父节点监听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.poker.convertToNodeSpaceAR(event.touch._point);
            console.log('touch nodeLocation:', nodeLocation);
            var x = nodeLocation.x;
            var y = nodeLocation.y;

            //找到当前选中的牌
            var currentCard = null;
            for (var i = 0, length = this.cards.length; i < 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 == (length - 1) ? card.width : 55;
                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, length = this.cards.length; i < 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;
                    // cardX = card.x - 70;
                } else {
                    min = nodeLocation.x;
                    max = startTouchLocation.x;
                    cardX = card.x + 55;
                }

                // console.log('min=' + min + ', max=' + max);

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


        }, this, true);

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

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

        this.addPokerTouchEvent();
    },

    addPokerTouchEvent: function () {
        //给所有的牌注册事件，会自动冒泡到poker节点
        if (!this.cards) return;
        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 poker = card.getComponent("PrePoker");
        var value = poker.data % 16;
        cc.log("select poker=", value);
        //构造牌对象
        var cardObj = {
            index: index,
            name: poker.data,
            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[card.childrenCount - 1]);
        }
        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.selectFun && this.selectFun(this.touchedCards);

        //重置
        this.clearTouchedCards();

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

    /**
     * 包含牌遮罩
     */
    addCardMask: function (card) {
        var cardMask = cc.instantiate(this.cardMask);
        cardMask.setPosition(cc.v2(73, 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));
    },


    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});