HTML+JS+websocket 实现联机“游戏王”对战（八）- 返回手卡，卡组

---

目录：

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置，战场更新
游戏王联机卡牌对战 7 - 墓地，副控制面板
游戏王联机卡牌对战 8 - 返回手卡，牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

功能按键的实现（三）

书接上回，把功能按键介绍完。

1. 返回手卡：

返回手卡的操作在情况分类上较多，代码可能会比较乱，先整理一下。

选中某张卡片并执行返回手牌时，主要有几个不同的情况：

1. 卡片来源于场上
   1.1 卡片属于我方
   1.2 卡片属于对方（必须是表侧表示的卡片）

2. 卡片来源于卡组或墓地
   2.1 卡片属于我方牌组/墓地
   2.2 卡片属于对方墓地

不同情况下的执行逻辑与调用的函数有所不同。
“返回手卡”不允许直接操作对方牌组。

要执行“返回手卡”操作首先需要选中一张卡片，SelectedCard 会记录其相关信息。

返回手卡函数 backtoHand：

获取被选中的卡槽序号cardNo；

如果（我方手牌区有空卡槽）：
	获取手牌空卡槽id；
	通过id获取手牌空卡槽对象；
	
	如果（被选中卡片来源于场上）：
		如果（被选中卡片属于我方）：
			通过cardNo定位被选中的卡槽；
			清除卡槽的图片并且清空战场数组fieldArrayPly1中对应的记录；
			手牌卡槽获取被选中的卡片；
		如果（被选中卡片来源于对方）：
			通过cardNo定位被选中的卡槽；
			手牌卡槽获取被选中的卡片；
		更新战场信息；

	如果（被选中卡片来源于卡组/墓地）：
		如果（被选中卡片属于我方）：
			手牌卡槽获取被选中的卡片；
			如果（从卡组中选取）：根据cardNo剔出卡组中的卡片并刷新副面板；
			如果（从墓地中选取）：根据cardNo剔出墓地中的卡片并刷新副面板；
		如果（被选中卡片属于对方）：
			此种情况只能是选中对方墓地中的卡片；
			手牌卡槽获取被选中的卡片；
			根据cardNo剔出对方墓地中的卡片并刷新副面板；

	清空所有卡槽的选中状态；

函数中很多地方需要调用联机相关函数来告知对方战场更新，手牌增加，墓地增减卡片等，这些会放到介绍联机的章节来总结。

/**
 * 将场上选中的卡牌回到手卡槽
 */
function backtoHand() {
    var cardslot = findEmptySlot('hand');  //寻找我方空的手牌卡槽 
    var cardNo = SelectedCard.cardNo;  //被选中卡牌的序号

    if (cardslot == -1) {
        alert("手牌已满");
    } else {
        var handID = "p1-hand" + (cardslot).toString();
        element = document.getElementById(handID);

        /*## 若卡片来源于场上 */
        if (SelectedCard.type == 'field') {  
            var fieldID;
            
            /*我方 卡牌信息从用于存储被选中卡片信息的对象中获取 */
            if (SelectedCard.player == 'player1') {  
                fieldID = "p1-field" + cardNo.toString();
                element.src = SelectedCard.cardSrc;  //手牌获取被选中的卡片
                fieldArrayPly1.FieldCards[cardNo].imgsrc = "null";  //场上该卡的记录清空
                fieldArrayPly1.FieldCards[cardNo].state = "null";

                /**
                 * 通知对方更新战场信息
                 */
                var updateID = "p2-field" + cardNo.toString();
                messageField("null", updateID, "");
                
            /*对方 卡牌信息从用于存储被选中卡片信息的对象中获取（必须是正面表示的卡片） */
            } else if (SelectedCard.cardSrc != CardBackSrc) {
                fieldID = "p2-field" + cardNo.toString();
                element.src = SelectedCard.cardSrc

                /**
                 * 通知对方更新战场信息
                 */
                var updateID = "p1-field" + cardNo.toString();
                messageField("null", updateID, "");
            } 
            
            /*更新战场信息 */
            updateField(fieldID, "null", "");

            /**
              * 通知对方更新手卡数
              */
            messageHand("add", cardslot);

        /*## 若卡片来源于卡组或墓地 */
        } else if (SelectedCard.type != 'hand') {  
            /*我方牌组/墓地的卡片回到我方手牌 */
            if (SelectedCard.player == 'player1') {
                element.src = SelectedCard.cardSrc;  //手牌获取该卡片src

                /*更新 卡组/墓地 列表并刷新副面板显示 */
                if (sf_Card.type == 'deck') {
                    P1Deck.splice(cardNo, 1);  //剔出卡组中的被选中卡片
                    sf_buttons('deck');  //刷新副面板显示
                } else if (sf_Card.type == 'p1tomb') {
                    P1Tomb.splice(cardNo, 1);
                    sf_buttons('p1tomb');

                    /**
                     * 通知对方玩家更新我方墓地（对于对方来说，我方是player2）
                     */
                    messageTomb("reduce", "player2", cardNo, SelectedCard.cardSrc);
                }

                /**
                * 通知对方更新手卡数
                */
                messageHand("add", cardslot);

            /*对方墓地的卡片回到我方手牌 */
            } else if (SelectedCard.player == 'player2') {
                element.src = SelectedCard.cardSrc;  //手牌获取该卡片src
                P2Tomb.splice(cardNo, 1);  //剔出对方墓地中的对应卡片
                sf_buttons('p2tomb');

                /**
                 * 通知对方玩家我方手卡数及对方墓地 （对于对方来说，他自己是player1）
                 */
                messageHand("add", cardslot);
                messageTomb("reduce", "player1", cardNo, SelectedCard.cardSrc);
            }
        }

        /*清空所有选中状态 */
        cleanSelected();
    }
}

2. 返回牌组：

返回卡组的逻辑比较简单，将选中的手卡或场上的卡 PUSH 回卡组，卡片会默认回到卡组的最上方。“返回卡组”操作只允许操作我方手牌或场上的卡片。

如果（被选中卡片属于我方玩家）：
	如果（卡片来源于手牌）：
		清空被选中手牌卡槽卡片；
		将选中卡片url传到卡组P1Deck中；

	如果（卡片来源于场上）：
		清除卡槽的图片并且清空战场数组fieldArrayPly1中对应的记录；
		将选中卡片url传到卡组P1Deck中；
		更新战场；

清空所有卡槽的选中状态；

/**
 * 将我方被选中的卡片返回卡组
 * 默认回到卡组最上方
 */
function backtoDeck() {
    if (SelectedCard.player == 'player1') {  //只允许将我方的卡片送回牌组
        var cardNo = SelectedCard.cardNo;

        /*手牌卡片回到卡组 */
        if (SelectedCard.type == 'hand') {  
            var handID = "p1-hand" + cardNo.toString();
            element = document.getElementById(handID);
            element.src = ""; //手牌被选中卡片消失
            P1Deck.push(SelectedCard.cardSrc);  //卡片src存回卡组

            /**
             * 告知对手手卡变动
             */
            messageHand("reduce", cardNo);
            alert("卡片已回到卡组最上方！");

        /*场上卡片回到卡组 */
        } else if (SelectedCard.type == 'field') {  
            var fieldID = "p1-field" + cardNo.toString();
            P1Deck.push(SelectedCard.cardSrc);  //卡片src存回卡组
            fieldArrayPly1.FieldCards[cardNo].imgsrc = "null";  //场上该卡的记录清空
            fieldArrayPly1.FieldCards[cardNo].state = "null";

            /*更新战场 */
            updateField(fieldID, "null", "");

            /**
             * 通知对方玩家更新我方战场
             */
            var updateID = "p2-field" + cardNo.toString();
            messageField("null", updateID, "");
            alert("卡片已回到卡组最上方！");

        } else {
            alert("请先将卡片拿到手牌再放回卡组");  //防止直接从卡组或墓地中选卡放回卡组
        }

        /*清空所有选中状态 */
        cleanSelected();
    }
}

最后演示下效果：

返回手牌：

返回卡组：

自此所有的功能按键就介绍完毕了，“除去游戏外”的实现和墓地一模一样，可以完全照搬，我在初版本中并未增设此功能，除外的卡片均暂时存放在墓地中。

下一章终于可以开始介绍游戏的核心部分，联机功能的具体实现了。