目錄

HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 1
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 2 - 聯(lián)機(jī)模式
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 3 - 界面布局
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 4 - 卡組系統(tǒng)
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 5 - 卡片選中系統(tǒng)
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 6 - 卡片放置，戰(zhàn)場(chǎng)更新
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 7 - 墓地，副控制面板
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 8 - 返回手卡，卡組
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 9 - 實(shí)現(xiàn)簡(jiǎn)單 websocket 通信
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 10 - 搭建游戲服務(wù)端
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 11 - 客戶端消息的收發(fā)
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 12 - 消息發(fā)送具體場(chǎng)景
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 13 - 實(shí)機(jī)演示

客戶端發(fā)送消息的具體場(chǎng)景

這章最后總結(jié)下游戲客戶端中具體哪些函數(shù)調(diào)用了消息發(fā)送。

代碼中發(fā)送消息的地方均有注釋。

（1）抽卡：首先我方抽牌時(shí)手牌會(huì)增加，需要讓對(duì)方同步我們的手牌數(shù)；

/*抽取牌組最上方一張卡至手卡 */
function drawCard() {
    for (var i=0; i<8; i++) {
        var handID = 'p1-hand' + i.toString();
        element = document.getElementById(handID);
        if (element.src == emptysrc) {  //如果該卡槽為空
          element.src = P1Deck.pop();

          /*觸發(fā)抽卡音效 */
          var snd = new Audio("sound/draw.wav");
          snd.play();

          /**
           * 告知對(duì)手哪張手卡卡槽添加了一張卡
           */
          messageHand('add', i);
          break;
        }
    }
}

（2）卡片放置：召喚，覆蓋卡片等從手牌向戰(zhàn)場(chǎng)放置卡片的操作時(shí)，我方戰(zhàn)場(chǎng)需要更新，且我方手牌減少，同時(shí)調(diào)用 messageField 與 messageHand；

/**
 * 我方從手牌向場(chǎng)上放置卡片，并發(fā)出放置指令 (攻擊，防御，背蓋防御，發(fā)動(dòng)，蓋卡)
 * @param {string} placetype - place type (attack/defence/back/on/off)
 * @param {string} cardtype - card type (monster/magic)
 */
function placeCard(placetype, cardtype) {

    var cardslot = findEmptySlot(cardtype); //尋找空的卡槽
    var cardsrc;

    if(cardslot == -1) {
        alert("卡槽已滿");
    } else {
        if (SelectedCard.type == 'hand') {  //放置卡片必須來(lái)源于手牌
            /*獲取被選中手卡信息 */
            var handslot = (SelectedCard.cardNo).toString();
            var handID = "p1-hand" + handslot;
            element = document.getElementById(handID);
            cardsrc = SelectedCard.cardSrc;
            element.src = "";  //手牌該卡消失

            /*更新戰(zhàn)場(chǎng)信息 */
            fieldArrayPly1.FieldCards[cardslot].imgsrc = cardsrc;
            fieldArrayPly1.FieldCards[cardslot].state = placetype;

            /*發(fā)出指令，執(zhí)行更新戰(zhàn)場(chǎng)卡片的函數(shù) */
            var fieldID = "p1-field" + cardslot.toString();
            updateField(fieldID, placetype, cardsrc);

            /**
             * 放置后告知對(duì)手執(zhí)行戰(zhàn)場(chǎng)更新函數(shù);
             * 放置完成后記得告訴對(duì)手哪張手卡消失了;
             * 注意：我方戰(zhàn)場(chǎng)變化對(duì)對(duì)方來(lái)說(shuō)是P2;
             */
            var updateID = "p2-field" + cardslot.toString();
            messageField(placetype, updateID, cardsrc);
            messageHand('reduce', handslot);

            /*清空所有選中狀態(tài) */
            cleanSelected();
        }
    }
}

（3）更變形式：更變戰(zhàn)場(chǎng)卡片表示形式時(shí)，我方戰(zhàn)場(chǎng)會(huì)有更新，需告知對(duì)方同步；

/**
 * 更變卡片的表示形式
 * 更變順序?yàn)椋汗?-> 防御 -> 背蓋 -> 攻擊， 蓋覆卡 -> 表側(cè)卡 -> 蓋覆卡
 * @param {string} cardtype - card type (monster/magic)
 */
function changeState(cardtype) {
    if (SelectedCard.type == 'field' && SelectedCard.player == 'player1') {  //必須是我方場(chǎng)上的卡方可更變表示形式
        var fieldID = "p1-field" + (SelectedCard.cardNo).toString();
        var cardsrc = fieldArrayPly1.FieldCards[SelectedCard.cardNo].imgsrc;
        var cardstate = fieldArrayPly1.FieldCards[SelectedCard.cardNo].state;

        switch (cardtype) {
            case 'monster':
                if (cardstate == 'attk') {
                    cardstate = "defen";
                } else if (cardstate == 'defen') {
                    cardstate = "back";
                } else if (cardstate == 'back') {
                    cardstate = "attk";
                }
                break;
            case 'magic':
                if (cardstate == 'off') {
                    cardstate = "on";
                } else {
                    cardstate = "off";
                }
                break;
            default:
                break;
        }

        fieldArrayPly1.FieldCards[SelectedCard.cardNo].state = cardstate;  //更新場(chǎng)上卡片狀態(tài)信息
        cardstate = "change-" + cardstate;  //為通過(guò)更變形式而導(dǎo)致的戰(zhàn)場(chǎng)更新操作添加一個(gè)標(biāo)簽方便更新函數(shù)識(shí)別（因?yàn)楦冃问讲挥|發(fā)音效）
        updateField(fieldID, cardstate, cardsrc);  //更新指定卡槽

        /**
         * 告知對(duì)手某一卡槽的表示形式發(fā)生變化，執(zhí)行戰(zhàn)場(chǎng)更新函數(shù)
         */
        var updateID = "p2-field" + (SelectedCard.cardNo).toString();
        messageField(cardstate, updateID, cardsrc);
    }
}

（4）回到手牌：
若將戰(zhàn)場(chǎng)卡片返回手牌，戰(zhàn)場(chǎng)將更新，我方手牌增加；
若將墓地卡片返回手牌，墓地將更新，我方手牌增加；
若將牌組卡片返回手牌，我方手牌增加；
注：回到手牌操作可操作雙方戰(zhàn)場(chǎng)與墓地，注意參數(shù)的填寫(xiě)；

/**
 * 將場(chǎng)上選中的卡牌回到手卡槽
 */
function backtoHand() {
    var cardslot = findEmptySlot('hand');  //尋找我方空的手牌卡槽 
    var cardNo = SelectedCard.cardNo;  //被選中卡牌的序號(hào)

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

        /*## 若卡片來(lái)源于場(chǎng)上 */
        if (SelectedCard.type == 'field') {  
            var fieldID;
            
            /*我方 卡牌信息從用于存儲(chǔ)被選中卡片信息的對(duì)象中獲取 */
            if (SelectedCard.player == 'player1') {  
                fieldID = "p1-field" + cardNo.toString();
                element.src = SelectedCard.cardSrc;  //手牌獲取被選中的卡片
                fieldArrayPly1.FieldCards[cardNo].imgsrc = "null";  //場(chǎng)上該卡的記錄清空
                fieldArrayPly1.FieldCards[cardNo].state = "null";

                /**
                 * 通知對(duì)方更新戰(zhàn)場(chǎng)信息
                 */
                var updateID = "p2-field" + cardNo.toString();
                messageField("null", updateID, "");
                
            /*對(duì)方 卡牌信息從用于存儲(chǔ)被選中卡片信息的對(duì)象中獲?。ū仨毷钦姹硎镜目ㄆ?*/
            } else if (SelectedCard.cardSrc != CardBackSrc) {
                fieldID = "p2-field" + cardNo.toString();
                element.src = SelectedCard.cardSrc

                /**
                 * 通知對(duì)方更新戰(zhàn)場(chǎng)信息
                 */
                var updateID = "p1-field" + cardNo.toString();
                messageField("null", updateID, "");
            } 
            
            /*更新戰(zhàn)場(chǎng)信息 */
            updateField(fieldID, "null", "");

            /**
              * 通知對(duì)方更新手卡數(shù)
              */
            messageHand("add", cardslot);

        /*## 若卡片來(lái)源于卡組或墓地 */
        } 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');

                    /**
                     * 通知對(duì)方玩家更新我方墓地（對(duì)于對(duì)方來(lái)說(shuō)，我方是player2）
                     */
                    messageTomb("reduce", "player2", cardNo, SelectedCard.cardSrc);
                }

                /**
                * 通知對(duì)方更新手卡數(shù)
                */
                messageHand("add", cardslot);

            /*對(duì)方墓地的卡片回到我方手牌 */
            } else if (SelectedCard.player == 'player2') {
                element.src = SelectedCard.cardSrc;  //手牌獲取該卡片src
                P2Tomb.splice(cardNo, 1);  //剔出對(duì)方墓地中的對(duì)應(yīng)卡片
                sf_buttons('p2tomb');

                /**
                 * 通知對(duì)方玩家我方手卡數(shù)及對(duì)方墓地 （對(duì)于對(duì)方來(lái)說(shuō)，他自己是player1）
                 */
                messageHand("add", cardslot);
                messageTomb("reduce", "player1", cardNo, SelectedCard.cardSrc);
            }
        }

        /*清空所有選中狀態(tài) */
        cleanSelected();
    }
}

（5）回到牌組：
若將我方手牌返回牌組，我方手牌減少；
若將我方戰(zhàn)場(chǎng)卡片返回牌組，我方戰(zhàn)場(chǎng)將更新；

/**
 * 將我方被選中的卡片返回卡組
 * 默認(rèn)回到卡組最上方
 */
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存回卡組

            /**
             * 告知對(duì)手手卡變動(dòng)
             */
            messageHand("reduce", cardNo);
            alert("卡片已回到卡組最上方！");

        /*場(chǎng)上卡片回到卡組 */
        } else if (SelectedCard.type == 'field') {  
            var fieldID = "p1-field" + cardNo.toString();
            P1Deck.push(SelectedCard.cardSrc);  //卡片src存回卡組
            fieldArrayPly1.FieldCards[cardNo].imgsrc = "null";  //場(chǎng)上該卡的記錄清空
            fieldArrayPly1.FieldCards[cardNo].state = "null";

            /*更新戰(zhàn)場(chǎng) */
            updateField(fieldID, "null", "");

            /**
             * 通知對(duì)方玩家更新我方戰(zhàn)場(chǎng)
             */
            var updateID = "p2-field" + cardNo.toString();
            messageField("null", updateID, "");
            alert("卡片已回到卡組最上方！");

        } else {
            alert("請(qǐng)先將卡片拿到手牌再放回卡組");  //防止直接從卡組或墓地中選卡放回卡組
        }

        /*清空所有選中狀態(tài) */
        cleanSelected();
    }
}

（6）送去墓地：
若將我方手牌送入墓地，我方墓地將更新，我方手牌減少；
若將我方戰(zhàn)場(chǎng)卡片送入墓地，我方墓地將更新，我方戰(zhàn)場(chǎng)將更新；

/**
 * 將我方的卡片（場(chǎng)上/手牌）送去墓地
 */
function sendtoTomb() {
    var cardsrc = SelectedCard.cardSrc;
    var cardNo = SelectedCard.cardNo;
    var fieldID; 
    
    if (SelectedCard.player == 'player1') {
        /*若卡片來(lái)源于手牌 */
        if (SelectedCard.type == 'hand') {
            var handID = "p1-hand" + cardNo.toString();
            element = document.getElementById(handID);
            element.src = "";  //手牌該卡消失
            P1Tomb.push(cardsrc);  //將選中卡片的src存入墓地?cái)?shù)組

            /**
             * 告知對(duì)方更新我方手牌數(shù)及墓地
             */
            messageHand("reduce", cardNo);
            messageTomb("add", "player2", "null", cardsrc);  //向墓地添加卡片不需要cardNo

        /*若卡片來(lái)源于場(chǎng)上 */
        } else if (SelectedCard.type == 'field') {
            fieldID = "p1-field" + cardNo.toString();
            fieldArrayPly1.FieldCards[cardNo].imgsrc = "null";  //場(chǎng)上該卡的記錄清空
            fieldArrayPly1.FieldCards[cardNo].state = "null";
            P1Tomb.push(cardsrc);  //將選中卡片的src存入墓地?cái)?shù)組
            updateField(fieldID, "null", "");  //更新戰(zhàn)場(chǎng)

            /**
             * 告知對(duì)方更新我方戰(zhàn)場(chǎng)及墓地
             */
            var updateID = "p2-field" + cardNo.toString();
            messageField("null", updateID, "");
            messageTomb("add", "player2", "null", cardsrc);
        } else {
            alert("請(qǐng)先將卡片拿到手牌再放入墓地");  //防止直接從卡組或墓地中選卡放回墓地
        }

        /*清空所有選中狀態(tài) */
        cleanSelected();

        sf_buttons('p1tomb');  //刷新副面板顯示
    }
}

整個(gè)游戲制作流程到這里就基本結(jié)束啦，架起服務(wù)端，連上客戶端就可進(jìn)行開(kāi)黑。記住需要提前在代碼里設(shè)置卡組信息，玩家信息，ip地址等相關(guān)參數(shù)。有時(shí)間可以把這些基本參數(shù)設(shè)置轉(zhuǎn)到UI界面里來(lái)，完善游戲的完成度。

var P1DeckName = "Deck_KaiMa";  //我方牌組名
var P1DeckNum = 50;  //我方牌組卡片數(shù)量
var playerID = "player1";  //獨(dú)立玩家ID
var ws = new WebSocket("ws://localhost:9999/");

下一章就做一個(gè)小demo演示，以及討論一些待完善的細(xì)節(jié)，感謝耐心閱讀。

main_img1.png