HTML+JS+websocket 實例,聯(lián)機(jī)“游戲王”對戰(zhàn)(八)- 返回手卡岂津,卡組

目錄

HTML+JS+websocket 實例虱黄,聯(lián)機(jī)“游戲王”對戰(zhàn) 1
HTML+JS+websocket 實例,聯(lián)機(jī)“游戲王”對戰(zhàn) 2 - 聯(lián)機(jī)模式
HTML+JS+websocket 實例吮成,聯(lián)機(jī)“游戲王”對戰(zhàn) 3 - 界面布局
HTML+JS+websocket 實例橱乱,聯(lián)機(jī)“游戲王”對戰(zhàn) 4 - 卡組系統(tǒng)
HTML+JS+websocket 實例,聯(lián)機(jī)“游戲王”對戰(zhàn) 5 - 卡片選中系統(tǒng)
HTML+JS+websocket 實例粱甫,聯(lián)機(jī)“游戲王”對戰(zhàn) 6 - 卡片放置泳叠,戰(zhàn)場更新
HTML+JS+websocket 實例,聯(lián)機(jī)“游戲王”對戰(zhàn) 7 - 墓地茶宵,副控制面板
HTML+JS+websocket 實例危纫,聯(lián)機(jī)“游戲王”對戰(zhàn) 8 - 返回手卡,卡組
HTML+JS+websocket 實例乌庶,聯(lián)機(jī)“游戲王”對戰(zhàn) 9 - 實現(xiàn)簡單 websocket 通信
HTML+JS+websocket 實例种蝶,聯(lián)機(jī)“游戲王”對戰(zhàn) 10 - 搭建游戲服務(wù)端
HTML+JS+websocket 實例,聯(lián)機(jī)“游戲王”對戰(zhàn) 11 - 客戶端消息的收發(fā)
HTML+JS+websocket 實例瞒大,聯(lián)機(jī)“游戲王”對戰(zhàn) 12 - 消息發(fā)送具體場景
HTML+JS+websocket 實例螃征,聯(lián)機(jī)“游戲王”對戰(zhàn) 13 - 實機(jī)演示

功能按鍵的實現(xiàn)(三)

書接上回,把功能按鍵介紹完透敌。

1. 返回手卡:

返回手卡的操作在情況分類上較多盯滚,代碼可能會比較亂踢械,先整理一下。

選中某張卡片并執(zhí)行返回手牌時魄藕,主要有幾個不同的情況:

  1. 卡片來源于場上
    1.1 卡片屬于我方
    1.2 卡片屬于對方(必須是表側(cè)表示的卡片)

  2. 卡片來源于卡組或墓地
    2.1 卡片屬于我方牌組/墓地
    2.2 卡片屬于對方墓地

不同情況下的執(zhí)行邏輯與調(diào)用的函數(shù)有所不同内列。
“返回手卡”不允許直接操作對方牌組。

要執(zhí)行“返回手卡”操作首先需要選中一張卡片泼疑,SelectedCard 會記錄其相關(guān)信息德绿。

返回手卡函數(shù) backtoHand

獲取被選中的卡槽序號cardNo;

如果(我方手牌區(qū)有空卡槽):
    獲取手牌空卡槽id退渗;
    通過id獲取手牌空卡槽對象移稳;
    
    如果(被選中卡片來源于場上):
        如果(被選中卡片屬于我方):
            通過cardNo定位被選中的卡槽;
            清除卡槽的圖片并且清空戰(zhàn)場數(shù)組fieldArrayPly1中對應(yīng)的記錄会油;
            手牌卡槽獲取被選中的卡片个粱;
        如果(被選中卡片來源于對方):
            通過cardNo定位被選中的卡槽;
            手牌卡槽獲取被選中的卡片翻翩;
        更新戰(zhàn)場信息都许;

    如果(被選中卡片來源于卡組/墓地):
        如果(被選中卡片屬于我方):
            手牌卡槽獲取被選中的卡片;
            如果(從卡組中選壬┒场):根據(jù)cardNo剔出卡組中的卡片并刷新副面板胶征;
            如果(從墓地中選取):根據(jù)cardNo剔出墓地中的卡片并刷新副面板桨仿;
        如果(被選中卡片屬于對方):
            此種情況只能是選中對方墓地中的卡片睛低;
            手牌卡槽獲取被選中的卡片;
            根據(jù)cardNo剔出對方墓地中的卡片并刷新副面板服傍;

    清空所有卡槽的選中狀態(tài)钱雷;

函數(shù)中很多地方需要調(diào)用聯(lián)機(jī)相關(guān)函數(shù)來告知對方戰(zhàn)場更新,手牌增加吹零,墓地增減卡片等罩抗,這些會放到介紹聯(lián)機(jī)的章節(jié)來總結(jié)。

/**
 * 將場上選中的卡牌回到手卡槽
 */
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";

                /**
                 * 通知對方更新戰(zhàn)場信息
                 */
                var updateID = "p2-field" + cardNo.toString();
                messageField("null", updateID, "");
                
            /*對方 卡牌信息從用于存儲被選中卡片信息的對象中獲炔右巍(必須是正面表示的卡片) */
            } else if (SelectedCard.cardSrc != CardBackSrc) {
                fieldID = "p2-field" + cardNo.toString();
                element.src = SelectedCard.cardSrc

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

            /**
              * 通知對方更新手卡數(shù)
              */
            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);
                }

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

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

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

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


2. 返回牌組:

返回卡組的邏輯比較簡單茫蛹,將選中的手卡或場上的卡 PUSH 回卡組泣懊,卡片會默認(rèn)回到卡組的最上方÷榛蹋“返回卡組”操作只允許操作我方手牌或場上的卡片馍刮。

如果(被選中卡片屬于我方玩家):
    如果(卡片來源于手牌):
        清空被選中手牌卡槽卡片;
        將選中卡片url傳到卡組P1Deck中窃蹋;

    如果(卡片來源于場上):
        清除卡槽的圖片并且清空戰(zhàn)場數(shù)組fieldArrayPly1中對應(yīng)的記錄卡啰;
        將選中卡片url傳到卡組P1Deck中静稻;
        更新戰(zhàn)場;

清空所有卡槽的選中狀態(tài)匈辱;

/**
 * 將我方被選中的卡片返回卡組
 * 默認(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存回卡組

            /**
             * 告知對手手卡變動
             */
            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";

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

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

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

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


最后演示下效果

返回手牌:


back_to_hand_field.gif

返回卡組:


back_to_deck.gif

自此所有的功能按鍵就介紹完畢了亡脸,“除去游戲外”的實現(xiàn)和墓地一模一樣押搪,可以完全照搬,我在初版本中并未增設(shè)此功能浅碾,除外的卡片均暫時存放在墓地中大州。

下一章終于可以開始介紹游戲的核心部分,聯(lián)機(jī)功能的具體實現(xiàn)了垂谢。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厦画,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子滥朱,更是在濱河造成了極大的恐慌根暑,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徙邻,死亡現(xiàn)場離奇詭異排嫌,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)缰犁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門淳地,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人民鼓,你說我怎么就攤上這事∨畛” “怎么了丰嘉?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長嚷缭。 經(jīng)常有香客問我饮亏,道長,這世上最難降的妖魔是什么阅爽? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任路幸,我火速辦了婚禮,結(jié)果婚禮上付翁,老公的妹妹穿的比我還像新娘简肴。我一直安慰自己,他們只是感情好百侧,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布砰识。 她就那樣靜靜地躺著能扒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪辫狼。 梳的紋絲不亂的頭發(fā)上初斑,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音膨处,去河邊找鬼见秤。 笑死,一個胖子當(dāng)著我的面吹牛真椿,可吹牛的內(nèi)容都是我干的鹃答。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼瀑粥,長吁一口氣:“原來是場噩夢啊……” “哼挣跋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起狞换,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤避咆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后修噪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體查库,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年黄琼,在試婚紗的時候發(fā)現(xiàn)自己被綠了樊销。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡脏款,死狀恐怖围苫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情撤师,我是刑警寧澤剂府,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站剃盾,受9級特大地震影響腺占,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痒谴,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一衰伯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧积蔚,春花似錦意鲸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽论矾。三九已至,卻和暖如春杆勇,著一層夾襖步出監(jiān)牢的瞬間贪壳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工蚜退, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留闰靴,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓钻注,卻偏偏與公主長得像蚂且,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子幅恋,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容