HTML+JS+websocket 實例，聯(lián)機“游戲王”對戰(zhàn)（三）- 界面布局

這章開始要上一些代碼了援奢，沒什么優(yōu)化也比較偷懶兼犯，見諒。

界面布局

先來看看游戲界面的整體布局萝究，完整HTML代碼放在最后了：

game_ui1.png

這里的HTML代碼非常冗余，以后會嘗試引入PHP+面向?qū)ο蟮姆椒ê喕a結(jié)構(gòu)锉罐。另外游戲界面幾乎所有元素的 position 屬性都偷懶統(tǒng)一使用 absolute 且固定長寬（部分采用百分比帆竹，具體可以查看項目的css文件）。這意味著整個游戲界面的大小脓规，每個區(qū)域的位置或是每個區(qū)域之間的相對位置栽连，都不會隨著瀏覽器的窗口大小的變動而變動。也就是說侨舆，如果你在小屏電腦（或縮小的瀏覽器窗口）上打開該游戲就會是下面這個樣子：

game_ui_zoom_in.png

當(dāng)然用瀏覽器縮放一下還是能解決這個問題的秒紧。

冗余結(jié)構(gòu)非常不便于屬性及參數(shù)的修改，一塊地方改動可能導(dǎo)致其他地方全要改挨下，好在目前布局已經(jīng)定好了（如果不考慮更加復(fù)雜的功能擴展）熔恢，而且似乎不影響講解。接下來我們還是分區(qū)域逐一介紹下游戲界面臭笆。

首先我們可以打開瀏覽器的“元素審查”功能叙淌，這樣可以幫助我們更快捷的了解游戲的整體布局：

game_ui_element_check.png

可以看到，游戲的主體大致分為幾個區(qū)域：

1.主控制面板（control-field）：

game_ui_main_controlpane.png

<!-- 主控制面板 -->
    <div class="control-field colm-controlfield height-total clearf">
      <div class="card-field">
        <img id="card-info" class="card" src="">
      </div>
      <div class="option-button">
        <button class="button" type="button" name="attkSummon" onclick="placeCard('attk', 'monster')">攻擊召喚</button>
        <button class="button" type="button" name="defenSummon" onclick="placeCard('defen', 'monster')">守備召喚</button>
        <button class="button" type="button" name="backSummon" onclick="placeCard('back', 'monster')">背蓋召喚</button>
        <button class="button" type="button" name="changeState" onclick="changeState('monster')">更變形式</button>
        <button class="button" type="button" name="launchCard" onclick="placeCard('on', 'magic')">發(fā)動(手卡)</button>
        <button class="button" type="button" name="coverCard" onclick="placeCard('off', 'magic')">覆蓋(手卡)</button>
        <button class="button" type="button" name="openCard" onclick="changeState('magic')">打開蓋卡</button>
        <button class="button" type="button" name="backtoHand" onclick="backtoHand()">回到手卡</button>
        <button class="button" type="button" name="backtoDeck" onclick="backtoDeck()">回到卡組</button>
        <button class="button" type="button" name="sendtoTomb" onclick="sendtoTomb()">送去墓地</button>
        <button class="button" type="button" name="sendtoGameout" onclick="sendtoGameout()">除去游戲外</button>
        <button class="button" type="button" name="selectGameout" onclick="selectGameout()">從游戲外選擇</button>
      </div>
    </div>

主控面板主要分為上下兩塊愁铺，上塊是用于展現(xiàn)卡片的詳細信息，其實就是放大的圖片茂洒，盡量用高清圖片瓶竭，如果手動錄入卡片信息工程量會非常大督勺，真有需要的話可以嘗試圖片OCR斤贰，印刷字體會很好識別，但是一般OCR能識別的文字人眼也可以看清了腋舌，所以這里我們直接采用放大的圖片盏触。

卡片信息展示區(qū)的觸發(fā)條件是鼠標(biāo)浮懸或點擊了某個存在卡牌的 img 標(biāo)簽，具體我們放到 js 的章節(jié)講赞辩。下塊區(qū)域是各種操作按鈕辨嗽，type 都是 button，onclick 屬性設(shè)置對應(yīng)的觸發(fā)函數(shù)屉佳，具體函數(shù)邏輯也放到 js 里講洲押。

2. 主要場地（main-field）：

game_ui_mainfield.png

代碼貼一半吧杈帐，太冗余了，基本是對稱的：

<div class="hand-field colm-10 height-2">
        <div class="card-field">  <!-- 對方手卡置卡區(qū)(上限8張) -->
          <div class="item">
            <img id="p2-hand7" class="card" onmouseover="showCardInfo('hand', this.src, 7, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand6" class="card" onmouseover="showCardInfo('hand', this.src, 6, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand5" class="card" onmouseover="showCardInfo('hand', this.src, 5, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand4" class="card" onmouseover="showCardInfo('hand', this.src, 4, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand3" class="card" onmouseover="showCardInfo('hand', this.src, 3, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand2" class="card" onmouseover="showCardInfo('hand', this.src, 2, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand1" class="card" onmouseover="showCardInfo('hand', this.src, 1, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand0" class="card" onmouseover="showCardInfo('hand', this.src, 0, 'player2')" src="">
          </div>
        </div>
      </div>
      <div class="battle-field colm-10 height-6">
        <div class="card-field">  <!-- 對方戰(zhàn)場卡牌區(qū)域 -->
          <div id="p2field8" class="item">  <!-- 怪獸區(qū)(上限5張) -->
            <img id="p2-field8" class="card" onmouseover="showCardInfo('field', this.src, 8, 'player2')" onclick="selectCard('p2field8', 'field', this.src, 8, 'player2')" src="">
          </div>
          <div id="p2field6" class="item">
            <img id="p2-field6" class="card" onmouseover="showCardInfo('field', this.src, 6, 'player2')" onclick="selectCard('p2field6', 'field', this.src, 6, 'player2')" src="">
          </div>
          <div id="p2field5" class="item">
            <img id="p2-field5" class="card" onmouseover="showCardInfo('field', this.src, 5, 'player2')" onclick="selectCard('p2field5', 'field', this.src, 5, 'player2')" src="">
          </div>
          <div id="p2field7" class="item">
            <img id="p2-field7" class="card" onmouseover="showCardInfo('field', this.src, 7, 'player2')" onclick="selectCard('p2field7', 'field', this.src, 7, 'player2')" src="">
          </div>
          <div id="p2field9" class="item">
            <img id="p2-field9" class="card" onmouseover="showCardInfo('field', this.src, 9, 'player2')" onclick="selectCard('p2field9', 'field', this.src, 9, 'player2')" src="">
          </div>
          <div id="p2field3" class="item">  <!-- 魔法陷阱區(qū)(上限5張) -->
            <img id="p2-field3" class="card" onmouseover="showCardInfo('field', this.src, 3, 'player2')" onclick="selectCard('p2field3', 'field', this.src, 3, 'player2')" src="">
          </div>
          <div id="p2field1" class="item">
            <img id="p2-field1" class="card" onmouseover="showCardInfo('field', this.src, 1, 'player2')" onclick="selectCard('p2field1', 'field', this.src, 1, 'player2')" src="">
          </div>
          <div id="p2field0" class="item">
            <img id="p2-field0" class="card" onmouseover="showCardInfo('field', this.src, 0, 'player2')" onclick="selectCard('p2field0', 'field', this.src, 0, 'player2')" src="">
          </div>
          <div id="p2field2" class="item">
            <img id="p2-field2" class="card" onmouseover="showCardInfo('field', this.src, 2, 'player2')" onclick="selectCard('p2field2', 'field', this.src, 2, 'player2')" src="">
          </div>
          <div id="p2field4" class="item">
            <img id="p2-field4" class="card" onmouseover="showCardInfo('field', this.src, 4, 'player2')" onclick="selectCard('p2field4', 'field', this.src, 4, 'player2')" src="">
          </div>
        </div>

主要場地分為我方/對方的手牌區(qū)域與戰(zhàn)場區(qū)域站叼，每塊區(qū)域間有數(shù)個獨立的 item（手牌8個尽楔，戰(zhàn)場10個），每個 item 里是獨立的 img 標(biāo)簽轻要。img 標(biāo)簽的id將手牌與戰(zhàn)場區(qū)分開來冲泥，手牌id格式 p1-handx/p2-handx壁涎；p1代表我方，p2代表對方（之后其他代碼里P1均代表我方嚼酝，P2均代表對方）闽巩，x代表手牌序號，上限是8張洼冻；戰(zhàn)場id同理隅很，上限是10張叔营。注意這里的戰(zhàn)場id我并非按照0~9的順序排下來，而是按8畜挥，6垒酬，5勘究，7斟冕，9磕蛇，3，1超棺，0呵燕，2再扭，4（對方戰(zhàn)場）；3让虐，1罢荡，0，2辩稽，4从媚，8拜效，6，5到千，7憔四，9（我方戰(zhàn)場）這樣排序般眉，目的是為了使卡片向戰(zhàn)場放置的時候從最中間的那個卡槽開始放置甸赃，之后分別是左右兩個卡槽埠对，再到最外邊左右兩個卡槽，怪獸區(qū)貌笨，魔法陷阱區(qū)均遵守這個放置規(guī)則襟沮，這樣游戲體驗會好一點臣嚣。

手牌與戰(zhàn)場區(qū)的img標(biāo)簽均設(shè)置 mouseover 觸發(fā)卡片信息展示硅则，onclick 觸發(fā)卡片選擇函數(shù)。注意對方手卡卡槽沒有設(shè)置 onclick 函數(shù)暑认，因為我們規(guī)定玩家無法直接對對手手卡進行操作蘸际，如果碰上手卡交換類的卡片效果可以把需要交換的卡牌放置到場上再各自拿到手牌；如果有效果要丟棄對手的手牌可以在告知對手后由對手完成丟棄指定手牌的操作根穷。實現(xiàn)游戲的時候我最終還是決定不為這些不常用的功能徒增函數(shù)的復(fù)雜度屿良，能通過基本功能或玩家間交流實現(xiàn)的操作就暫不額外添加對應(yīng)功能惫周。

3. 卡組递递，環(huán)境卡槽區(qū)（rside-field）：

game_ui_rightfield.png

<!-- 卡組登舞，環(huán)境卡槽區(qū) -->
    <div class="rside-field colm-deckfield height-total clearf">
      <div class="item env">
        <img id="p1-env" class="card" onmouseover="" src="">
      </div>
      <div class="item deck">
        <img id="deck_r" class="card" src="image/cards/cardback.jpg" alt="cardback" onclick="drawCard()">
      </div>
    </div>

這塊區(qū)域最為簡單逊躁，一個普通的卡槽與一個顯示卡背的卡槽稽煤，顯示卡背的卡槽表示卡組囚戚，onclick 設(shè)置抽卡函數(shù)驰坊，點擊抽卡。

4. 副控制面板（card-selection）：

注：在 js 代碼里我把這一塊區(qū)域在備注里定義為“sub-field“察藐，html里命名暫未修改分飞，命名這塊一直很糾結(jié)譬猫。

game_ui_subfield.png

<!-- 副控制面板 -->
    <div class="card-selection">
      <div id="select-area" class="selection-area"></div>
      <div class="button-area">
        <button class="button" type="button" onclick="sf_buttons('deck')">從牌組中選擇（刷新列表）</button>
        <button class="button" type="button" onclick="sf_buttons('p1tomb')">從我方墓地選擇（刷新列表）</button>
        <button class="button" type="button" onclick="sf_buttons('p2tomb')">從對方墓地選擇（刷新列表）</button>
        <button class="button" type="button" onclick="shuffleDeck()">洗牌</button>
      </div>
    </div>

副控制面板也分為上下兩個區(qū)域染服，上側(cè)區(qū)域會根據(jù)下方的按鈕展示不同的內(nèi)容（除洗牌按鈕外）柳刮。展示效果是這樣的：

game_ui_subfield2.png

例圖中顯示的是點擊“從牌組中選擇”按鈕后呈現(xiàn)的效果秉颗，展示區(qū)域會刷新并加載目前卡組中存在的卡牌，卡牌太多顯示不下則會出現(xiàn)滾動條闸准，每張卡牌均可被點擊進入選中狀態(tài)夷家，然后可通過其他按鈕執(zhí)行對選中卡牌的相應(yīng)操作敏释，比如將此卡加入手牌等钥顽。具體實現(xiàn)方法我們放到后面結(jié)合js一起講蜂大。

整體的游戲界面布局大概就是這樣了，關(guān)于具體的元素樣式如大小尺寸兄墅，內(nèi)外邊距隙咸，區(qū)域透明度成洗，邊框顏色等可以直接查看項目的 css 代碼瓶殃。接下來的章節(jié)就結(jié)合 js 代碼談?wù)動螒蜻壿嫷脑O(shè)計與實現(xiàn)。

最后附完整html代碼：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" >
    <link rel="stylesheet" href="css/ygo-main.css">
    <link rel="stylesheet" href="css/ygo-basic.css">
    <script type="text/javascript" src="js/game-deck.js"></script>
    <script type="text/javascript" src="js/game-cardselection.js"></script>
    <script type="text/javascript" src="js/game-field.js"></script>
    <script type="text/javascript" src="js/game-hand.js"></script>
    <script type="text/javascript" src="js/game-tomb.js"></script>
    <script type="text/javascript" src="js/game-control.js"></script>
    <title>CC-游戲王卡牌決斗</title>
  </head>
  <body>
    <style>
      body {
        width: 1820px;
        background-image: url(image/background/background.jpg);
      }
    </style>
    <div class="header clearf"></div>
    <!-- 主控制面板 -->
    <div class="control-field colm-controlfield height-total clearf">
      <div class="card-field">
        <img id="card-info" class="card" src="">
      </div>
      <div class="option-button">
        <button class="button" type="button" name="attkSummon" onclick="placeCard('attk', 'monster')">攻擊召喚</button>
        <button class="button" type="button" name="defenSummon" onclick="placeCard('defen', 'monster')">守備召喚</button>
        <button class="button" type="button" name="backSummon" onclick="placeCard('back', 'monster')">背蓋召喚</button>
        <button class="button" type="button" name="changeState" onclick="changeState('monster')">更變形式</button>
        <button class="button" type="button" name="launchCard" onclick="placeCard('on', 'magic')">發(fā)動(手卡)</button>
        <button class="button" type="button" name="coverCard" onclick="placeCard('off', 'magic')">覆蓋(手卡)</button>
        <button class="button" type="button" name="openCard" onclick="changeState('magic')">打開蓋卡</button>
        <button class="button" type="button" name="backtoHand" onclick="backtoHand()">回到手卡</button>
        <button class="button" type="button" name="backtoDeck" onclick="backtoDeck()">回到卡組</button>
        <button class="button" type="button" name="sendtoTomb" onclick="sendtoTomb()">送去墓地</button>
        <button class="button" type="button" name="sendtoGameout" onclick="sendtoGameout()">除去游戲外</button>
        <button class="button" type="button" name="selectGameout" onclick="selectGameout()">從游戲外選擇</button>
      </div>
    </div>

    <!-- 游戲主要場地 -->
    <div class="main-field  colm-mainfield height-total clearf">
      <div class="hand-field colm-10 height-2">
        <div class="card-field">  <!-- 對方手卡置卡區(qū)(上限8張) -->
          <div class="item">
            <img id="p2-hand7" class="card" onmouseover="showCardInfo('hand', this.src, 7, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand6" class="card" onmouseover="showCardInfo('hand', this.src, 6, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand5" class="card" onmouseover="showCardInfo('hand', this.src, 5, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand4" class="card" onmouseover="showCardInfo('hand', this.src, 4, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand3" class="card" onmouseover="showCardInfo('hand', this.src, 3, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand2" class="card" onmouseover="showCardInfo('hand', this.src, 2, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand1" class="card" onmouseover="showCardInfo('hand', this.src, 1, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand0" class="card" onmouseover="showCardInfo('hand', this.src, 0, 'player2')" src="">
          </div>
        </div>
      </div>
      <div class="battle-field colm-10 height-6">
        <div class="card-field">  <!-- 對方戰(zhàn)場卡牌區(qū)域 -->
          <div id="p2field8" class="item">  <!-- 怪獸區(qū)(上限5張) -->
            <img id="p2-field8" class="card" onmouseover="showCardInfo('field', this.src, 8, 'player2')" onclick="selectCard('p2field8', 'field', this.src, 8, 'player2')" src="">
          </div>
          <div id="p2field6" class="item">
            <img id="p2-field6" class="card" onmouseover="showCardInfo('field', this.src, 6, 'player2')" onclick="selectCard('p2field6', 'field', this.src, 6, 'player2')" src="">
          </div>
          <div id="p2field5" class="item">
            <img id="p2-field5" class="card" onmouseover="showCardInfo('field', this.src, 5, 'player2')" onclick="selectCard('p2field5', 'field', this.src, 5, 'player2')" src="">
          </div>
          <div id="p2field7" class="item">
            <img id="p2-field7" class="card" onmouseover="showCardInfo('field', this.src, 7, 'player2')" onclick="selectCard('p2field7', 'field', this.src, 7, 'player2')" src="">
          </div>
          <div id="p2field9" class="item">
            <img id="p2-field9" class="card" onmouseover="showCardInfo('field', this.src, 9, 'player2')" onclick="selectCard('p2field9', 'field', this.src, 9, 'player2')" src="">
          </div>
          <div id="p2field3" class="item">  <!-- 魔法陷阱區(qū)(上限5張) -->
            <img id="p2-field3" class="card" onmouseover="showCardInfo('field', this.src, 3, 'player2')" onclick="selectCard('p2field3', 'field', this.src, 3, 'player2')" src="">
          </div>
          <div id="p2field1" class="item">
            <img id="p2-field1" class="card" onmouseover="showCardInfo('field', this.src, 1, 'player2')" onclick="selectCard('p2field1', 'field', this.src, 1, 'player2')" src="">
          </div>
          <div id="p2field0" class="item">
            <img id="p2-field0" class="card" onmouseover="showCardInfo('field', this.src, 0, 'player2')" onclick="selectCard('p2field0', 'field', this.src, 0, 'player2')" src="">
          </div>
          <div id="p2field2" class="item">
            <img id="p2-field2" class="card" onmouseover="showCardInfo('field', this.src, 2, 'player2')" onclick="selectCard('p2field2', 'field', this.src, 2, 'player2')" src="">
          </div>
          <div id="p2field4" class="item">
            <img id="p2-field4" class="card" onmouseover="showCardInfo('field', this.src, 4, 'player2')" onclick="selectCard('p2field4', 'field', this.src, 4, 'player2')" src="">
          </div>
        </div>

        <div class="card-field">  <!-- 我方戰(zhàn)場卡牌區(qū)域 -->
          <div id="p1field3" class="item">  <!-- 怪獸區(qū)(上限5張) -->
            <img id="p1-field3" class="card" onmouseover="showCardInfo('field', this.src, 3, 'player1')" onclick="selectCard('p1field3', 'field', this.src, 3, 'player1')" src="">
          </div>
          <div id="p1field1" class="item">
            <img id="p1-field1" class="card" onmouseover="showCardInfo('field', this.src, 1, 'player1')" onclick="selectCard('p1field1', 'field', this.src, 1, 'player1')" src="">
          </div>
          <div id="p1field0" class="item">
            <img id="p1-field0" class="card" onmouseover="showCardInfo('field', this.src, 0, 'player1')" onclick="selectCard('p1field0', 'field', this.src, 0, 'player1')" src="">
          </div>
          <div id="p1field2" class="item">
            <img id="p1-field2" class="card" onmouseover="showCardInfo('field', this.src, 2, 'player1')" onclick="selectCard('p1field2', 'field', this.src, 2, 'player1')" src="">
          </div>
          <div id="p1field4" class="item">
            <img id="p1-field4" class="card" onmouseover="showCardInfo('field', this.src, 4, 'player1')" onclick="selectCard('p1field4', 'field', this.src, 4, 'player1')" src="">
          </div>
          <div id="p1field8" class="item">  <!-- 魔法陷阱區(qū)(上限5張) -->
            <img id="p1-field8" class="card" onmouseover="showCardInfo('field', this.src, 8, 'player1')" onclick="selectCard('p1field8', 'field', this.src, 8, 'player1')" src="">
          </div>
          <div id="p1field6" class="item">
            <img id="p1-field6" class="card" onmouseover="showCardInfo('field', this.src, 6, 'player1')" onclick="selectCard('p1field6', 'field', this.src, 6, 'player1')" src="">
          </div>
          <div id="p1field5" class="item">
            <img id="p1-field5" class="card" onmouseover="showCardInfo('field', this.src, 5, 'player1')" onclick="selectCard('p1field5', 'field', this.src, 5, 'player1')" src="">
          </div>
          <div id="p1field7" class="item">
            <img id="p1-field7" class="card" onmouseover="showCardInfo('field', this.src, 7, 'player1')" onclick="selectCard('p1field7', 'field', this.src, 7, 'player1')" src="">
          </div>
          <div id="p1field9" class="item">
            <img id="p1-field9" class="card" onmouseover="showCardInfo('field', this.src, 9, 'player1')" onclick="selectCard('p1field9', 'field', this.src, 9, 'player1')" src="">
          </div>
        </div>
      </div>
      <div class="hand-field colm-10 height-2">
        <div class="card-field">  <!-- 我方手卡置卡區(qū)(上限8張) -->
          <div class="item">
            <img id="p1-hand0" class="card" onmouseover="showCardInfo('hand', this.src, 0, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 0, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand1" class="card" onmouseover="showCardInfo('hand', this.src, 1, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 1, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand2" class="card" onmouseover="showCardInfo('hand', this.src, 2, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 2, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand3" class="card" onmouseover="showCardInfo('hand', this.src, 3, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 3, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand4" class="card" onmouseover="showCardInfo('hand', this.src, 4, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 4, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand5" class="card" onmouseover="showCardInfo('hand', this.src, 5, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 5, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand6" class="card" onmouseover="showCardInfo('hand', this.src, 6, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 6, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand7" class="card" onmouseover="showCardInfo('hand', this.src, 7, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 7, 'player1')" src="">
          </div>
        </div>
      </div>
    </div>

    <!-- 卡組，環(huán)境卡槽區(qū) -->
    <div class="rside-field colm-deckfield height-total clearf">
      <div class="item env">
        <img id="p1-env" class="card" onmouseover="" src="">
      </div>
      <div class="item deck">
        <img id="deck_r" class="card" src="image/cards/cardback.jpg" alt="cardback" onclick="drawCard()">
      </div>
    </div>

    <!-- 副控制面板 -->
    <div class="card-selection">
      <div id="select-area" class="selection-area"></div>
      <div class="button-area">
        <button class="button" type="button" onclick="sf_buttons('deck')">從牌組中選擇（刷新列表）</button>
        <button class="button" type="button" onclick="sf_buttons('p1tomb')">從我方墓地選擇（刷新列表）</button>
        <button class="button" type="button" onclick="sf_buttons('p2tomb')">從對方墓地選擇（刷新列表）</button>
        <button class="button" type="button" onclick="shuffleDeck()">洗牌</button>
      </div>
    </div>
    
  </body>
</html>

最后編輯于：2021.06.26 22:42:47

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末咖楣，一起剝皮案震驚了整個濱河市诱贿，隨后出現(xiàn)的幾起案子咕缎，更是在濱河造成了極大的恐慌凭豪，老刑警劉巖，帶你破解...
沈念sama閱讀 222,729評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異帖努，居然都是意外死亡然磷，警方通過查閱死者的電腦和手機刊驴，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,226評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門捆憎，熙熙樓的掌柜王于貴愁眉苦臉地迎上來躲惰，“玉大人，你說我怎么就攤上這事氮块。” “怎么了击儡？”我有些...
開封第一講書人閱讀 169,461評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵阳谍，是天一觀的道長螃概。經(jīng)常有香客問我吊洼，道長，這世上最難降的妖魔是什么旺订？我笑而不...
開封第一講書人閱讀 60,135評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任区拳，我火速辦了婚禮樱调，結(jié)果婚禮上届良，老公的妹妹穿的比我還像新娘士葫。我一直安慰自己，他們只是感情好爪模，可當(dāng)我...
茶點故事閱讀 69,130評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布屋灌。她就那樣靜靜地躺著应狱，像睡著了一般。火紅的嫁衣襯著肌膚如雪除嘹。梳的紋絲不亂的頭發(fā)上尉咕，一...
開封第一講書人閱讀 52,736評論 1贊 312
城市分裂傳說
那天龙考，我揣著相機與錄音，去河邊找鬼炎功。笑死蛇损，一個胖子當(dāng)著我的面吹牛坛怪，可吹牛的內(nèi)容都是我干的袜匿。我是一名探鬼主播，決...
沈念sama閱讀 41,179評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼祭务，長吁一口氣：“原來是場噩夢啊……” “哼义锥！你這毒婦竟也來了岩灭？” 一聲冷哼從身側(cè)響起噪径，我...
開封第一講書人閱讀 40,124評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤熄云，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體练般，經(jīng)...
沈念sama閱讀 46,657評論 1贊 320
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡薄料，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,723評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年摄职，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛔垢。...
茶點故事閱讀 40,872評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡鹏漆，死狀恐怖创泄，靈堂內(nèi)的尸體忽然破棺而出鞠抑，到底是詐尸還是另有隱情，我是刑警寧澤若治，帶...
沈念sama閱讀 36,533評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布端幼，位于F島的核電站弧满，受9級特大地震影響庭呜，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扶关，卻給世界環(huán)境...
茶點故事閱讀 42,213評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一节槐、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧哥倔，春花似錦咆蒿、人聲如沸蚂子。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,700評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽寞蚌。三九已至挟秤，卻和暖如春抄伍，著一層夾襖步出監(jiān)牢的瞬間截珍，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,819評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工秋度，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留荚斯，地道東北人查牌。一個月前我還...
沈念sama閱讀 49,304評論 3贊 379
代替公主和親
正文我出身青樓纸颜，卻偏偏與公主長得像胁孙，于是被迫代替她去往敵國和親称鳞。傳聞我的和親對象是個殘疾皇子胡岔，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,876評論 2贊 361

HTML+JS+websocket 實例评架，聯(lián)機“游戲王”對戰(zhàn)（三）- 界面布局