最近想自己做一个斗地主游戏（使用cocoscreator + javascript)，发现滑动选择卡牌还有一点点麻烦呢，这里把实现分享下。

1、首先封装卡牌 CardCtrl.js

　　卡牌的touched属性即为触摸框选标记，selected属性为触摸结束所选择卡牌的标记。其他的牌面花色什么的这里不做处理。

  1. /**
  2.  * Created by skyxu on 2018/11/1.
  3.  * 
  4.  * 卡牌组件
  5.  */
  7. cc.Class({
  8.     extends: cc.Component,
  10.     properties: {
  11.         spSelected: cc.Node,
  12.         touched: {
  13.             default: false,
  14.             notify(){
  15.                 this.spSelected.active = this.touched;
  16.             }
  17.         },
  18.         selected: {
  19.             default: false,
  20.             notify(){
  21.                 if (this.selected){
  22.                     this.node.y += 20;
  23.                 } else{
  24.                     this.node.y -= 20;
  25.                 }
  26.             }
  27.         },
  28.        
  29.     },
  31.     // LIFE-CYCLE CALLBACKS:
  33.     onLoad () {
  35.     },
  37.     start () {
  39.     },
  41.     // update (dt) {},
  42. });

 

2、接着实现滑动选择组件 DragSelect.js

　　思路就是触摸滑动时画一个矩形，把和矩形有交集的卡牌都设为touched，触摸结束时把属性touched为true卡牌的selected属性设为true即可。

需要注意的是，由于卡牌是有叠加的，选择时要注意。我这里卡牌是右侧的压左侧的，所以每次touchmvoe时，只选择框选范围内最右侧的一张即可。主要分为3步：

　　1. 判断矩形范围进行框选，在onTouchMove调用_checkSelectCard(beginPos,  endPos)， 这里两个参数都传入当前的touchmove获得的pos， 即画一个最小的矩形，选择范围内最右侧一张即可。

　　2.处理框选范围外的卡牌，在onTouchMove调用_checkSelectCardReverse(beginPos,  endPos), 这里两个参数一个传最初触摸开始的点和当前触摸的点。 这里需要注意的是，如果从右侧向左侧框选然后又退回到右侧则要特别处理，一担向右退回到当前卡牌的右侧卡牌上时则要把当前卡牌的touched属性设置为false（虽然矩形范围还包括当前卡牌，但包括的部分为右侧卡牌压着的部分）

　　3. 触摸结束，touched属性为true的卡牌即为所选，并重置touched为false

  1. /**
  2.  * Created by skyxu on 2018/11/1.
  3.  * 
  4.  * 滑动选择卡牌组件
  5.  * 把此组件拖放到卡牌根节点即可，卡牌根节点添加cc.Layout组件来自动布局
  6.  * 
  7.  */
  10. cc.Class({
  11.     extends: cc.Component,
  13.     // LIFE-CYCLE CALLBACKS:
  14.  
  15.     // onLoad () {},
  17.     start () {
  18.         this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
  19.         this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
  20.         this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
  22.         this.cardsArr = this.node.getChildren();
  23.         let card = this.cardsArr[0];
  24.         // 指左侧卡牌锚点到右侧相邻卡牌边缘的距离
  25.         this.CARD_DISTANCE = card.width*card.anchorX + this.node.getComponent(cc.Layout).spacingX;
  26.         cc.log("CARD_DISTANCE: " + this.CARD_DISTANCE);
  27.     },
  29.     onTouchStart(event){
  30.         let pos = event.getLocation();
  31.         let beginPos = this._beginPos = this.node.convertToNodeSpaceAR(pos);
  32.         this._checkSelectCard(beginPos, beginPos, true);
  33.     },
  35.     onTouchMove(event){
  36.         let pos = event.getLocation();
  37.         let movePos = this.node.convertToNodeSpaceAR(pos)
  38.         // 这里确定是(movePos, movePos) 每次移动只选择右侧一张
  39.         this._checkSelectCard(movePos, movePos);
  40.         // 这里要传入起点和结束点，获取总的框取范围
  41.         this._checkSelectCardReverse(this._beginPos, movePos);
  42.     },
  44.     onTouchEnd(event){
  45.         this._onSelectCardEnd();
  46.     },
  48.     _onSelectCardEnd(){
  49.         for (let card of this.cardsArr){
  50.             let ctrl = card.getComponent("CardCtrl");
  51.             if (ctrl.touched){
  52.                 ctrl.selected = !ctrl.selected;
  53.             }
  54.             ctrl.touched = false;
  55.         }
  56.     },
  58.     _checkSelectCard(beginPos, endPos, isBegin){
  59.         let len = this.cardsArr.length;
  60.         if (isBegin){
  61.             for (let i=len-1; i>=0; i--){
  62.                 let card = this.cardsArr[i];
  63.                 if (cc.rectContainsPoint(card.getBoundingBox(), beginPos)){
  64.                     card.getComponent('CardCtrl').touched = true;
  65.                     return;
  66.                 }
  67.             }
  68.         } else{
  69.             let w = Math.max(1, Math.abs(beginPos.x - endPos.x));
  70.             let h = Math.max(1, Math.abs(beginPos.y - endPos.y));
  71.             let x = Math.min(beginPos.x, endPos.x);
  72.             let y = Math.min(beginPos.y, endPos.y);
  73.             let touchRect = cc.rect(x, y, w, h);
  75.             for (let i=len-1; i>=0; i--){
  76.                 let card = this.cardsArr[i];
  77.                 if (cc.rectIntersectsRect(card.getBoundingBox(), touchRect)){
  78.                     card.getComponent('CardCtrl').touched = true;
  79.                     return;
  80.                 }
  81.             }
  82.         }
  83.     },
  85.     _checkSelectCardReverse(beginPos, endPos){
  86.         let p1 = beginPos.x < endPos.x ? beginPos : endPos;
  87.         let w = Math.abs(beginPos.x - endPos.x);
  88.         let h = Math.abs(beginPos.y - endPos.y);
  89.         let rect = cc.rect(p1.x, p1.y, w, h);
  91.         let len = this.cardsArr.length;
  92.         for (let i=len-1; i>=0; i--){
  93.             let card = this.cardsArr[i];
  94.             if (!cc.rectIntersectsRect(card.getBoundingBox(), rect)){
  95.                 card.getComponent('CardCtrl').touched = false;
  96.             }
  97.         }
  99.         // 从右向左框取然后又移动回右侧则取消左侧已经选择的卡牌
  100.         for (let i=0; i<len; i++){
  101.             let card = this.cardsArr[i];
  102.             if (p1.x - card.x >= this.CARD_DISTANCE){
  103.                 card.getComponent('CardCtrl').touched = false;
  104.             }
  105.         }
  106.     }
  108.     // update (dt) {},
  109. });

 

3、测试

　　在场景里添加一个卡牌根节点 cardPanel, 并为它添加cc.Layout组件（自动布局），然后把DragSelect.js组件拖放到cardPanel即可。

　　效果图如下：

　　

　　Git链接:  https://github.com/sky068/dragSelectCards

 

　　参考: https://blog.csdn.net/themagickeyjianan/article/details/39208463#commentBox

　　

 

版权声明：本文为skyxu123原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/skyxu123/p/9891207.html