目錄
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.2 卡片屬于對方(必須是表側(cè)表示的卡片)卡片來源于卡組或墓地
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();
}
}
最后演示下效果:
返回手牌:
返回卡組:
自此所有的功能按鍵就介紹完畢了亡脸,“除去游戲外”的實現(xiàn)和墓地一模一樣押搪,可以完全照搬,我在初版本中并未增設(shè)此功能浅碾,除外的卡片均暫時存放在墓地中大州。
下一章終于可以開始介紹游戲的核心部分,聯(lián)機(jī)功能的具體實現(xiàn)了垂谢。