本文主要講解以下幾個方面：
- card model
- 滑動處理
- 陰影
- 選擇
- 出牌
Card Model
? 首先，牌有兩個屬性：數字、花型；
? ps：本文現在是，用數字和花型來組成一張牌，有空可以再用另一種形式走一遍，比如用54個數字（0-53）來表示一副牌。
CardInfo.js
//花型
var CardSuit = cc.Enum ({
none: 0,
spade: 1, //黑桃
heart: 2, //紅心
club: 3, //梅花
diamond: 4,//方塊
});
//數字
var CardNumber = cc.Enum ({
none: 0,
num_3: 3,
num_4: 4,
num_5: 5,
num_6: 6,
num_7: 7,
num_8: 8,
num_9: 9,
num_10: 10,
num_J: 11,
num_Q: 12,
num_K: 13,
num_A: 14,
num_2: 15,
littleJoker: 16,
bigJoker: 17,
});
var CardInfo = cc.Class ({
extends: cc.Component,
properties: {
//數字
number: {
default: CardNumber.none,
type: CardNumber
},
//花型
suit: {
default: CardSuit.none,
type: CardSuit
},
},
statics: {
CardNumber: CardNumber,
CardSuit: CardSuit
},
//主要用于打印時，能清晰看到現在是哪張牌
desc() {
var desc = "";
if (this.number == CardNumber.littleJoker) {
return "小王";
}
if (this.number == CardNumber.bigJoker) {
return "大王";
}
switch(this.suit) {
case CardSuit.heart:
desc = "紅桃";
break;
case CardSuit.spade:
desc = "黑桃";
break;
case CardSuit.club:
desc = "梅花";
break;
case CardSuit.diamond:
desc = "方塊";
break;
}
switch(this.number) {
case CardNumber.num_3:
desc += "3";
break;
case CardNumber.num_4:
desc += "4";
break;
case CardNumber.num_5:
desc += "5";
break;
case CardNumber.num_6:
desc += "6";
break;
case CardNumber.num_7:
desc += "7";
break;
case CardNumber.num_8:
desc += "8";
break;
case CardNumber.num_9:
desc += "9";
break;
case CardNumber.num_10:
desc += "10";
break;
case CardNumber.num_J:
desc += "J";
break;
case CardNumber.num_Q:
desc += "Q";
break;
case CardNumber.num_K:
desc += "K";
break;
case CardNumber.num_A:
desc += "A";
break;
case CardNumber.num_2:
desc += "2";
break;
}
return desc;
},
});
? ps：小王，大王的花型為 CardSuit.none。
顯示自己手上的牌
? 首先，在場景中，添加一個空節點，錨點設置為（0，0）；
? 寬度，我這里設置為屏幕寬度1334；（如果你能準確算出，所有牌最長的寬，也可以設置為具體值）
? 高度，牌的高+牌選中狀態向上的偏移量（我這里設置為：201+19）
手牌node.png
? 代碼走起來
main.js（綁定在當前場景上）
var CardInfo = require("CardInfo");
...
initHandCards : function(numbers){
//隨便初始化幾張牌
for (var number = 3; number <= 15; number++) {
let cardInfo = new CardInfo();
cardInfo.suit = number%2==0?CardInfo.CardSuit.diamond:CardInfo.CardSuit.spade;
cardInfo.number = number;
cardInfo.name = cardInfo.desc();
//cardInfoArr 存儲牌的信息對象的數組
this.cardInfoArr.push(cardInfo);
//根據牌的信息 初始化預制體
var card = cc.instantiate(this.cardPrefab);
card.getComponent("Card").mCardInfo = cardInfo;
//將牌預制體 添加到父節點
this.handCardArea.addChild(card, cardInfo.number);
card.isChiose = false;
//cardArr 存儲card prefab的對象數組
this.cardArr.push(card);
}
//計算posx，第一張牌顯示的x坐標
var posx = 1334/2 - (this.cardArr.length -1)/2 * 50;
for (var i = 0; i < this.cardArr.length; i++){
this.cardArr[i].setPosition(posx+ i*50, 100.5);
}
}
顯示自己牌.png
滑動選牌
選牌的事件監聽對象，是不是牌呢？
如果只需要點擊選擇，我們可以直接在card prefab上添加點擊事件監聽
如果做滑動選牌，就需要在card prefab的父節點上（handCardArea），監聽touchDown，touchMove，touchUp等事件
CardArea.js（綁定在handCardArea節點上）、
var Main = require("Main");
cc.Class({
extends: cc.Component,
properties: {
_touchBegan: null,
_touchMoved: null,
//用于調用Main場景上的腳本的方法，同時可以傳遞數據
game:{
default : null,
type: Main,
}
},
onTouchEvent: function () {
this.node.on(cc.Node.EventType.TOUCH_START, this.touchBegan, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this);
this.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoved, this);
},
offTouchEvent: function () {
this.node.off(cc.Node.EventType.TOUCH_START, this.touchBegan, this);
this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this);
this.node.off(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
this.node.off(cc.Node.EventType.TOUCH_MOVE, this.touchMoved, this);
},
onLoad () {
this.onTouchEvent();
},
onDestroy(){
this.offTouchEvent();
},
/**
* Touch begin
* 當前觸摸的點 是否在牌的區域
* */
_getCardForTouch: function (touch, cardArr) {
cardArr.reverse(); //to 1
for (var k in cardArr) {
var box = cardArr[k].getBoundingBox(); //獲取card覆蓋坐標范圍
if (cc.rectContainsPoint(box, touch)) { //判斷觸摸的點，是否在當前牌的范圍內
cardArr[k].isChiose = true;
cardArr[k].getComponent("Card").setMaskShowing(true); //顯示陰影遮罩
cc.log("CCC touch select: "+k);
cardArr.reverse();
return cardArr[k];
}
}
cardArr.reverse();
},
/**
* Touch move
*
* */
_checkSelectCardReserve(touchBegan, touchMoved) {
//獲取左邊的點 為起始點
var p1 = touchBegan.x < touchMoved.x ? touchBegan : touchMoved;
//滑動的寬度
var width = Math.abs(touchBegan.x - touchMoved.x);
//滑動的高度 最小設置為5
var height = Math.abs(touchBegan.y - touchMoved.y) > 5 ? Math.abs(touchBegan.y - touchMoved.y) : 5;
//根據滑動 獲取矩形框
var rect = cc.rect(p1.x, p1.y, width, height);
for (let i = 0; i < this.game.cardArr.length; i++) {
//判斷矩形是否相交
if (!cc.rectIntersectsRect(this.game.cardArr[i].getBoundingBox(), rect)) {
//不相交 設置為反選狀態
this.game.cardArr[i].isChiose = false;
this.game.cardArr[i].getComponent("Card").setMaskShowing(false);
}
}
//如果是從右向左滑動
if (p1 === touchMoved) {
for (let i = this.game.cardArr.length - 1; i >= 0; i--) {
//從右往左滑時，滑到一定距離，又往右滑
//這是要判斷反選
if (this.game.cardArr[i].x - p1.x < 24) { //
this.game.cardArr[i].getComponent("Card").setMaskShowing(false);
this.game.cardArr[i].isChiose = false;
}
}
}
},
/**
* 開始點擊 TOUCH_START回調函數
* */
touchBegan: function (event) {
cc.log("Touch begin");
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
cc.log("touch begin location: "+touchLoc);
this._touchBegan = this.node.convertToNodeSpace(touchLoc);
this._getCardForTouch( this._touchBegan, this.game.cardArr);
},
/**
* 移動 TOUCH_MOVE回調函數
* */
touchMoved: function (event) {
cc.log("Touch move");
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
this._touchMoved = this.node.convertToNodeSpace(touchLoc);
this._getCardForTouch(this._touchMoved, this.game.cardArr);
this._checkSelectCardReserve(this._touchBegan, this._touchMoved);
},
touchCancel: function () {
},
/**
* 點擊結束 TOUCH_END回調函數
* */
touchEnd: function (event) {
cc.log("Touch end");
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
for (var k in this.game.cardArr) {
this.game.cardArr[k].getComponent("Card").setMaskShowing(false);
if (this.game.cardArr[k].isChiose === true) {
this.game.cardArr[k].isChiose = false;
// to 2
if (this.game.cardArr[k].status === SITDOWN) {
this.game.cardArr[k].status = STANDUP;
this.game.cardArr[k].y += 19;
} else {
this.game.cardArr[k].status = SITDOWN;
this.game.cardArr[k].y -= 19;
}
}
}
},
1. 為什么要調用 cardArr.reverse()？
? 首先，顯示牌的時候，我們是從左往右顯示的，也是從 0 到 cardArr.length-1 顯示的。也就是說cardArr中，第0個元素是顯示在最左邊的。
? 第二點，我們舉個例子：?上面這張圖里，鼠標現在放在 “方塊8” 上，由于牌重疊放置，現在 “方塊6”，“黑桃7”，“方塊8” 三張牌的坐標范圍，都包含了鼠標當前的位置。
? 現在鼠標在當前位置點擊一下
? 如果，我們從“黑桃3”開始判斷，那結果就會出現 “方塊6”，“黑桃7”，“方塊8” 三張牌，
? 很顯然，這樣的記過是不對的，我們想選擇的只有 “方塊8” 而已。
? 所以，正確的操作應該是，從最右邊的 “黑桃2” 開始判斷，因此，我們需要調用一次 reverse()。
? 第三點，需要注意的是，如果在 _getCardForTouch(cardArr) 中，使用的是原始cardArr數據，則需要在本地判斷完成后，再次調用 reverse() 方法，將cardArr原始數據順序還原，否則當你判斷下一個點的時候，調用 reverse() 后，cardArr的數據就變成了正序，就達不到我們想要的效果了；
? 當然，如果每次傳遞的是原始數據，在 _getCardForTouch(cardArr) 方法中，使用的是cardArr的引用，就不需要再次調用 reverse()方法了。2. touchEnd()中，為什么要將牌的狀態反置？
? 如果滑動覆蓋的區域內，包含已經是STANDUP狀態的牌，應該將其置為未選中狀態。
選牌效果
選牌時.png
選牌后.png
出牌
注意：
要打出的牌，不能直接用handCardArea節點下的組件，否則會提示被綁定。
代碼先行
discards (cards) {
//出牌
if (!cards || cards.lenngth == 0) return;
//從父節點分離
for (const key in cards) {
if (cards.hasOwnProperty(key)) {
const card = cards[key];
card.node.removeFromParent(true); // 1
for (var i = 0; i < this.handCards.length; i++) {
var cardInfo = this.handCards[i];
if (cardInfo == card.cardInfo) {
this.handCards.splice(i, 1); // 2
break;
}
}
}
}
this.appendCardsToOutZone(cards); // 3
this.updateCards(); // 4
if(this.handCards.length == 0) {
this.game.gameOver(this);
}
},
/**
* 將牌的預制體，添加到出牌區域
*/
appendCardsToOutZone(cards) {
this.outCardZone.node.removeAllChildren(true); // 3.1
var count = cards.length;
var zeroPoint = count / 2;
for (var i = 0; i < count; i++) {
var card = cards[i];
var cardNode = card.node;
this.outCardZone.node.addChild(cardNode, 100 - card.cardInfo.number); // 3.2
}
this.outCardZone.node.sortAllChildren();
// 設置position
for (var i = 0; i < count; i++) {
var cardNode = this.outCardZone.node.getChildren()[i];;
var x = (i - zeroPoint) * 30;
var y = cardNode.getPositionY()+180;
cardNode.setScale(0.7, 0.7); // 3.3
cardNode.setPosition(x, y); // 3.4
}
},
1. 將 選中的牌 從父節點中移除
? card.node.removeFromParent(true);
2. 從handCards 數組中，刪除 選中的牌
? this.handCards.splice(i, 1);
3. this.appendCardsToOutZone(cards)
? 將 “選中的牌” 添加到出牌區域
? 3.1 清空出牌區域
? ? this.outCardZone.node.removeAllChildren(true);
? 3.2 添加子節點
? ? this.outCardZone.node.addChild(cardNode, 100 - card.cardInfo.number);
? 3.3 設置scale
? ? cardNode.setScale(0.7, 0.7);
? 3.4 設置position
? ? cardNode.setPosition(x, y);
4. this.updateCards();
? 重新設置 手中的牌 的位置，這一點和顯示手上牌的最后一步類似。
