目錄
HTML+JS+websocket 實例，聯機“游戲王”對戰 1
HTML+JS+websocket 實例，聯機“游戲王”對戰 2 - 聯機模式
HTML+JS+websocket 實例，聯機“游戲王”對戰 3 - 界面布局
HTML+JS+websocket 實例，聯機“游戲王”對戰 4 - 卡組系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 5 - 卡片選中系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 6 - 卡片放置，戰場更新
HTML+JS+websocket 實例，聯機“游戲王”對戰 7 - 墓地，副控制面板
HTML+JS+websocket 實例，聯機“游戲王”對戰 8 - 返回手卡，卡組
HTML+JS+websocket 實例，聯機“游戲王”對戰 9 - 實現簡單 websocket 通信
HTML+JS+websocket 實例，聯機“游戲王”對戰 10 - 搭建游戲服務端
HTML+JS+websocket 實例，聯機“游戲王”對戰 11 - 客戶端消息的收發
HTML+JS+websocket 實例，聯機“游戲王”對戰 12 - 消息發送具體場景
HTML+JS+websocket 實例，聯機“游戲王”對戰 13 - 實機演示
客戶端發送消息的具體場景
這章最后總結下游戲客戶端中具體哪些函數調用了消息發送。
代碼中發送消息的地方均有注釋。
（1）抽卡：首先我方抽牌時手牌會增加，需要讓對方同步我們的手牌數；
/*抽取牌組最上方一張卡至手卡 */
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();
/*觸發抽卡音效 */
var snd = new Audio("sound/draw.wav");
snd.play();
/**
* 告知對手哪張手卡卡槽添加了一張卡
*/
messageHand('add', i);
break;
}
}
}
（2）卡片放置：召喚，覆蓋卡片等從手牌向戰場放置卡片的操作時，我方戰場需要更新，且我方手牌減少，同時調用 messageField 與 messageHand；
/**
* 我方從手牌向場上放置卡片，并發出放置指令 (攻擊，防御，背蓋防御，發動，蓋卡)
* @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') { //放置卡片必須來源于手牌
/*獲取被選中手卡信息 */
var handslot = (SelectedCard.cardNo).toString();
var handID = "p1-hand" + handslot;
element = document.getElementById(handID);
cardsrc = SelectedCard.cardSrc;
element.src = ""; //手牌該卡消失
/*更新戰場信息 */
fieldArrayPly1.FieldCards[cardslot].imgsrc = cardsrc;
fieldArrayPly1.FieldCards[cardslot].state = placetype;
/*發出指令，執行更新戰場卡片的函數 */
var fieldID = "p1-field" + cardslot.toString();
updateField(fieldID, placetype, cardsrc);
/**
* 放置后告知對手執行戰場更新函數;
* 放置完成后記得告訴對手哪張手卡消失了;
* 注意：我方戰場變化對對方來說是P2;
*/
var updateID = "p2-field" + cardslot.toString();
messageField(placetype, updateID, cardsrc);
messageHand('reduce', handslot);
/*清空所有選中狀態 */
cleanSelected();
}
}
}
（3）更變形式：更變戰場卡片表示形式時，我方戰場會有更新，需告知對方同步；
/**
* 更變卡片的表示形式
* 更變順序為：攻擊 -> 防御 -> 背蓋 -> 攻擊， 蓋覆卡 -> 表側卡 -> 蓋覆卡
* @param {string} cardtype - card type (monster/magic)
*/
function changeState(cardtype) {
if (SelectedCard.type == 'field' && SelectedCard.player == 'player1') { //必須是我方場上的卡方可更變表示形式
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; //更新場上卡片狀態信息
cardstate = "change-" + cardstate; //為通過更變形式而導致的戰場更新操作添加一個標簽方便更新函數識別（因為更變形式不觸發音效）
updateField(fieldID, cardstate, cardsrc); //更新指定卡槽
/**
* 告知對手某一卡槽的表示形式發生變化，執行戰場更新函數
*/
var updateID = "p2-field" + (SelectedCard.cardNo).toString();
messageField(cardstate, updateID, cardsrc);
}
}
（4）回到手牌：
若將戰場卡片返回手牌，戰場將更新，我方手牌增加；
若將墓地卡片返回手牌，墓地將更新，我方手牌增加；
若將牌組卡片返回手牌，我方手牌增加；
注：回到手牌操作可操作雙方戰場與墓地，注意參數的填寫；
/**
* 將場上選中的卡牌回到手卡槽
*/
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();
}
}
（5）回到牌組：
若將我方手牌返回牌組，我方手牌減少；
若將我方戰場卡片返回牌組，我方戰場將更新；
/**
* 將我方被選中的卡片返回卡組
* 默認回到卡組最上方
*/
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();
}
}
（6）送去墓地：
若將我方手牌送入墓地，我方墓地將更新，我方手牌減少；
若將我方戰場卡片送入墓地，我方墓地將更新，我方戰場將更新；
/**
* 將我方的卡片（場上/手牌）送去墓地
*/
function sendtoTomb() {
var cardsrc = SelectedCard.cardSrc;
var cardNo = SelectedCard.cardNo;
var fieldID;
if (SelectedCard.player == 'player1') {
/*若卡片來源于手牌 */
if (SelectedCard.type == 'hand') {
var handID = "p1-hand" + cardNo.toString();
element = document.getElementById(handID);
element.src = ""; //手牌該卡消失
P1Tomb.push(cardsrc); //將選中卡片的src存入墓地數組
/**
* 告知對方更新我方手牌數及墓地
*/
messageHand("reduce", cardNo);
messageTomb("add", "player2", "null", cardsrc); //向墓地添加卡片不需要cardNo
/*若卡片來源于場上 */
} else if (SelectedCard.type == 'field') {
fieldID = "p1-field" + cardNo.toString();
fieldArrayPly1.FieldCards[cardNo].imgsrc = "null"; //場上該卡的記錄清空
fieldArrayPly1.FieldCards[cardNo].state = "null";
P1Tomb.push(cardsrc); //將選中卡片的src存入墓地數組
updateField(fieldID, "null", ""); //更新戰場
/**
* 告知對方更新我方戰場及墓地
*/
var updateID = "p2-field" + cardNo.toString();
messageField("null", updateID, "");
messageTomb("add", "player2", "null", cardsrc);
} else {
alert("請先將卡片拿到手牌再放入墓地"); //防止直接從卡組或墓地中選卡放回墓地
}
/*清空所有選中狀態 */
cleanSelected();
sf_buttons('p1tomb'); //刷新副面板顯示
}
}
整個游戲制作流程到這里就基本結束啦，架起服務端，連上客戶端就可進行開黑。記住需要提前在代碼里設置卡組信息，玩家信息，ip地址等相關參數。有時間可以把這些基本參數設置轉到UI界面里來，完善游戲的完成度。
var P1DeckName = "Deck_KaiMa"; //我方牌組名
var P1DeckNum = 50; //我方牌組卡片數量
var playerID = "player1"; //獨立玩家ID
var ws = new WebSocket("ws://localhost:9999/");
下一章就做一個小demo演示，以及討論一些待完善的細節，感謝耐心閱讀。
main_img1.png
