目錄
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)場更新
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)簡單 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ā)送具體場景
HTML+JS+websocket 實(shí)例，聯(lián)機(jī)“游戲王”對(duì)戰(zhàn) 13 - 實(shí)機(jī)演示
這章開始要上一些代碼了，沒什么優(yōu)化也比較偷懶，見諒。
界面布局
先來看看游戲界面的整體布局，完整HTML代碼放在最后了：
game_ui1.png
這里的HTML代碼非常冗余，以后會(huì)嘗試引入PHP+面向?qū)ο蟮姆椒ê喕a結(jié)構(gòu)。另外游戲界面幾乎所有元素的 position 屬性都偷懶統(tǒng)一使用 absolute 且固定長寬（部分采用百分比，具體可以查看項(xiàng)目的css文件）。這意味著整個(gè)游戲界面的大小，每個(gè)區(qū)域的位置或是每個(gè)區(qū)域之間的相對(duì)位置，都不會(huì)隨著瀏覽器的窗口大小的變動(dòng)而變動(dòng)。也就是說，如果你在小屏電腦（或縮小的瀏覽器窗口）上打開該游戲就會(huì)是下面這個(gè)樣子：
game_ui_zoom_in.png
當(dāng)然用瀏覽器縮放一下還是能解決這個(gè)問題的。
冗余結(jié)構(gòu)非常不便于屬性及參數(shù)的修改，一塊地方改動(dòng)可能導(dǎo)致其他地方全要改，好在目前布局已經(jīng)定好了（如果不考慮更加復(fù)雜的功能擴(kuò)展），而且似乎不影響講解。接下來我們還是分區(qū)域逐一介紹下游戲界面。
首先我們可以打開瀏覽器的“元素審查”功能，這樣可以幫助我們更快捷的了解游戲的整體布局：
game_ui_element_check.png
可以看到，游戲的主體大致分為幾個(gè)區(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ā)動(dòng)(手卡)</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)卡片的詳細(xì)信息，其實(shí)就是放大的圖片，盡量用高清圖片，如果手動(dòng)錄入卡片信息工程量會(huì)非常大，真有需要的話可以嘗試圖片OCR，印刷字體會(huì)很好識(shí)別，但是一般OCR能識(shí)別的文字人眼也可以看清了，所以這里我們直接采用放大的圖片。
卡片信息展示區(qū)的觸發(fā)條件是鼠標(biāo)浮懸或點(diǎn)擊了某個(gè)存在卡牌的 img 標(biāo)簽，具體我們放到 js 的章節(jié)講。下塊區(qū)域是各種操作按鈕，type 都是 button，onclick 屬性設(shè)置對(duì)應(yīng)的觸發(fā)函數(shù)，具體函數(shù)邏輯也放到 js 里講。
2. 主要場地（main-field）：
game_ui_mainfield.png
代碼貼一半吧，太冗余了，基本是對(duì)稱的：
<div class="hand-field colm-10 height-2">
<div class="card-field"> <!-- 對(duì)方手卡置卡區(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"> <!-- 對(duì)方戰(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>
主要場地分為我方/對(duì)方的手牌區(qū)域與戰(zhàn)場區(qū)域，每塊區(qū)域間有數(shù)個(gè)獨(dú)立的 item（手牌8個(gè)，戰(zhàn)場10個(gè)），每個(gè) item 里是獨(dú)立的 img 標(biāo)簽。img 標(biāo)簽的id將手牌與戰(zhàn)場區(qū)分開來，手牌id格式 p1-handx/p2-handx；p1代表我方，p2代表對(duì)方（之后其他代碼里P1均代表我方，P2均代表對(duì)方），x代表手牌序號(hào)，上限是8張；戰(zhàn)場id同理，上限是10張。注意這里的戰(zhàn)場id我并非按照0~9的順序排下來，而是按8，6，5，7，9，3，1，0，2，4（對(duì)方戰(zhàn)場）；3，1，0，2，4，8，6，5，7，9（我方戰(zhàn)場）這樣排序，目的是為了使卡片向戰(zhàn)場放置的時(shí)候從最中間的那個(gè)卡槽開始放置，之后分別是左右兩個(gè)卡槽，再到最外邊左右兩個(gè)卡槽，怪獸區(qū)，魔法陷阱區(qū)均遵守這個(gè)放置規(guī)則，這樣游戲體驗(yàn)會(huì)好一點(diǎn)。
手牌與戰(zhàn)場區(qū)的img標(biāo)簽均設(shè)置 mouseover 觸發(fā)卡片信息展示，onclick 觸發(fā)卡片選擇函數(shù)。注意對(duì)方手卡卡槽沒有設(shè)置 onclick 函數(shù)，因?yàn)槲覀円?guī)定玩家無法直接對(duì)對(duì)手手卡進(jìn)行操作，如果碰上手卡交換類的卡片效果可以把需要交換的卡牌放置到場上再各自拿到手牌；如果有效果要丟棄對(duì)手的手牌可以在告知對(duì)手后由對(duì)手完成丟棄指定手牌的操作。實(shí)現(xiàn)游戲的時(shí)候我最終還是決定不為這些不常用的功能徒增函數(shù)的復(fù)雜度，能通過基本功能或玩家間交流實(shí)現(xiàn)的操作就暫不額外添加對(duì)應(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ū)域最為簡單，一個(gè)普通的卡槽與一個(gè)顯示卡背的卡槽，顯示卡背的卡槽表示卡組，onclick 設(shè)置抽卡函數(shù)，點(diǎn)擊抽卡。
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')">從對(duì)方墓地選擇（刷新列表）</button>
<button class="button" type="button" onclick="shuffleDeck()">洗牌</button>
</div>
</div>
副控制面板也分為上下兩個(gè)區(qū)域，上側(cè)區(qū)域會(huì)根據(jù)下方的按鈕展示不同的內(nèi)容（除洗牌按鈕外）。展示效果是這樣的：
game_ui_subfield2.png
例圖中顯示的是點(diǎn)擊“從牌組中選擇”按鈕后呈現(xiàn)的效果，展示區(qū)域會(huì)刷新并加載目前卡組中存在的卡牌，卡牌太多顯示不下則會(huì)出現(xiàn)滾動(dòng)條，每張卡牌均可被點(diǎn)擊進(jìn)入選中狀態(tài)，然后可通過其他按鈕執(zhí)行對(duì)選中卡牌的相應(yīng)操作，比如將此卡加入手牌等。具體實(shí)現(xiàn)方法我們放到后面結(jié)合js一起講。
整體的游戲界面布局大概就是這樣了，關(guān)于具體的元素樣式如大小尺寸，內(nèi)外邊距，區(qū)域透明度，邊框顏色等可以直接查看項(xiàng)目的 css 代碼。接下來的章節(jié)就結(jié)合 js 代碼談?wù)動(dòng)螒蜻壿嫷脑O(shè)計(jì)與實(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ā)動(dòng)(手卡)</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"> <!-- 對(duì)方手卡置卡區(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"> <!-- 對(duì)方戰(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')">從對(duì)方墓地選擇（刷新列表）</button>
<button class="button" type="button" onclick="shuffleDeck()">洗牌</button>
</div>
</div>
</body>
</html>
