HTML+JS+websocket 实例，联机“游戏王”对战（八

作者: KalsasCaesar | 来源:发表于2021-06-09 09:52 被阅读0次

HTML+JS+websocket 实例，联机“游戏王”对战（四
HTML+JS+websocket 实例，联机“游戏王”对战（五
HTML+JS+websocket 实例，联机“游戏王”对战（八
HTML+JS+websocket 实例，联机“游戏王”对战（六
HTML+JS+websocket 实例，联机“游戏王”对战（七
HTML+JS+websocket 实例，联机“游戏王”对战（三
HTML+JS+websocket 实例，联机“游戏王”对战（一
HTML+JS+websocket 实例，联机“游戏王”对战（二
HTML+JS+websocket 实例，联机“游戏王”对战（九
HTML+JS+websocket 实例，联机“游戏王”对战（十

功能按键的实现（三）

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

1. 返回手卡：

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

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

卡片来源于场上
1.1 卡片属于我方
1.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();
    }
}

最后演示下效果：

返回手牌：