cocos 触摸多选牌 高仿欢乐斗地主选牌操作效果

一直关注cocos2dx  使用cocosCreator  支持typescript/js  做了一个触摸多选牌仿操作类似欢乐斗地主选牌操作 选出要出的多张牌上一张图片效果

提供给有需要的同志们 喜欢的左边栏赞点起来吧 *-* 代码是typescript 可以转成js 注释部分是单张牌进行设置拖动一张牌拖动效果暂时没用注释了 

主要实现思路是 从获取触摸点开始位置 到移动触摸位置进行计算出相应区域中的牌   

1>牌在世界坐标的范围值大小 可以直接使用引擎获取到 如果获取不到可以根据坐标点在父类位置 并获取到牌的大小进行计算得出

2>选择的时候进行标色 到停止选牌进行 设置y值弹出恢复颜色值

    private initPokerTouch() {
        // 设置多选牌
        let n = this.mHold[0];
        n.on(cc.Node.EventType.TOUCH_CANCEL, e => { this.pokerParentTouch(e, n); }, this);
        n.on(cc.Node.EventType.TOUCH_START, e => { this.pokerParentTouch(e, n); }, this);
        n.on(cc.Node.EventType.TOUCH_MOVE, e => { this.pokerParentTouch(e, n); }, this);
        n.on(cc.Node.EventType.TOUCH_END, e => { this.pokerParentTouch(e, n); }, this);
    }

    private mTouchStart = cc.Vec2.ZERO; // 记录 第一次触摸点
    private mSelectCardColor = cc.Color.WHITE.fromHEX("#D3D3D3");
    private sCardY = 30;
    private pokerParentTouch(e, n: cc.Node = null) {
        switch (e.type) {
            // this.btnTouchTime = new Date().getTime();
            case cc.Node.EventType.TOUCH_END:
            case cc.Node.EventType.TOUCH_CANCEL:
                // console.log("cardid:", n.getComponent(PokerCard).mPoker.id);
                // this.btnTouchTime = new Date().getTime();
                // if (this.mDragBtnObj) {
                //     let a = new cc.Rect(this.mDragBtnObj.position.x, this.mDragBtnObj.position.y, this.mDragBtnObj.width, this.mDragBtnObj.height);
                //     let b = new cc.Rect(n.position.x, n.position.y, n.width, n.height);
                //     this.node.removeChild(this.mDragBtnObj);
                //     this.mDragBtnObj = null;
                //     if (!cc.Intersection.rectRect(a, b)) {
                //         // console.log("无交集") // 进行出牌
                //         if (this.isDeal) this.doClick(n.getComponent(cc.Button));
                //         else console.log("不是出牌玩家");
                //     }
                // }
                {
                    let touches = e.getTouches();
                    let touchLoc = touches[0].getLocation();
                    // console.log("move:" + touchLoc.x + "," + touchLoc.y)
                    let touchPos = this.node.convertToNodeSpace(touchLoc); //将坐标转换为当前节点坐标 屏幕node或者是全屏的node
                    if (e.type == cc.Node.EventType.TOUCH_START) this.mTouchStart = touchPos;
                    let tp = this.mTouchStart.x < touchPos.x ? this.mTouchStart : touchPos;
                    let rect = cc.rect(tp.x, tp.y, Math.abs(this.mTouchStart.x - touchPos.x) + 2, 200000); // 加2保证点自己点击上 高度值足够高避免触摸屏幕的时候控件是半个的情况会失去触摸控件情况
                    // console.log(tp, touchPos, rect);
                    for (let i = 0; i < this.mHold[0].childrens.length; i++) {
                        let card = this.mHold[0].childrens[i];
                        let cardRect = card.getBoundingBoxToWorld();
                        cardRect.width -= (i == this.mHold[0].childrens.length - 1) ? 0 : card.width * 0.5; // 最后一张牌不进行剪切一半
                        if (cc.rectIntersectsRect(cardRect, rect)) {
                            card.setPositionY(card.y == this.sCardY ? 0 : this.sCardY);
                        }
                        else {
                            // card.setPositionY(0);
                        }
                        card.color = cc.Color.WHITE;
                    }
                }
                break;
            case cc.Node.EventType.TOUCH_START:
            case cc.Node.EventType.TOUCH_MOVE:
                let touches = e.getTouches();
                let touchLoc = touches[0].getLocation();
                // console.log("move:" + touchLoc.x + "," + touchLoc.y)
                let touchPos = this.node.convertToNodeSpace(touchLoc); //将坐标转换为当前节点坐标 屏幕node或者是全屏的node
                if (e.type == cc.Node.EventType.TOUCH_START) this.mTouchStart = touchPos;
                let tp = this.mTouchStart.x < touchPos.x ? this.mTouchStart : touchPos;
                let rect = cc.rect(tp.x, tp.y, Math.abs(this.mTouchStart.x - touchPos.x) + 2, 200000); // 加2保证点自己点击上 高度值足够高避免触摸屏幕的时候控件是半个的情况会失去触摸控件情况
                // console.log(tp, touchPos, rect);
                for (let i = 0; i < this.mHold[0].childrens.length; i++) {
                    let card = this.mHold[0].childrens[i];
                    let cardRect = card.getBoundingBoxToWorld();
                    cardRect.width -= (i == this.mHold[0].childrens.length - 1) ? 0 : card.width * 0.5;// 最后一张牌不进行剪切一半
                    if (cc.rectIntersectsRect(cardRect, rect)) {
                        card.color = this.mSelectCardColor;
                    } else {
                        card.color = cc.Color.WHITE;
                    }
                }

                // if (new Date().getTime() - this.btnTouchTime > 50) { // 进行设置
                //     let delta = e.touch.getDelta();
                //     if (!this.mDragBtnObj) {
                //         this.isSetDragBtn = true;
                //         this.mDragBtnObj = cc.instantiate(n);
                //         this.mDragBtnObj.children[1].active = false;
                //         this.node.addChild(this.mDragBtnObj);
                //         console.log("nnnnnn:", n.getPositionY());
                //         if (n.getPositionY() == this.mCardPosY || Math.abs(n.getPositionY() - this.mCardPosY) < 3) // 如果是这个坐标进行设置
                //             this.doClick(n.getComponent(cc.Button), true);
                //     }
                //     this.mDragBtnObj.x += delta.x;
                //     this.mDragBtnObj.y += delta.y;
                // } else console.log("dsddssddssddsdssdsdsdsd")
                break;
        }
    }

    /** 检查出牌 */
    public chupai() {
        let cl = [];
        for (let i = 0; i < this.mHold[0].childrenCount; i++) {
            if (this.mHold[0].children[i].y == this.sCardY) {
                let id = this.mHold[0].children[i].getComponent(PokerCard).mPoker.id;
                cl.push(id);
            }
        }
        if (cl.length == 0) {
            Toast.showText("请选出要出的牌", Toast.LENGTH_LONG);
        } else {
            // play()
        }
    }