目录
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. 返回手卡：
返回手卡的操作在情况分类上较多，代码可能会比较乱，先整理一下。
选中某张卡片并执行返回手牌时，主要有几个不同的情况：
卡片来源于场上
1.1 卡片属于我方
1.2 卡片属于对方（必须是表侧表示的卡片）卡片来源于卡组或墓地
2.1 卡片属于我方牌组/墓地
2.2 卡片属于对方墓地
不同情况下的执行逻辑与调用的函数有所不同。
“返回手卡”不允许直接操作对方牌组。
要执行“返回手卡”操作首先需要选中一张卡片，SelectedCard 会记录其相关信息。
返回手卡函数 backtoHand：
获取被选中的卡槽序号cardNo；
如果（我方手牌区有空卡槽）：
获取手牌空卡槽id；
通过id获取手牌空卡槽对象；
如果（被选中卡片来源于场上）：
如果（被选中卡片属于我方）：
通过cardNo定位被选中的卡槽；
清除卡槽的图片并且清空战场数组fieldArrayPly1中对应的记录；
手牌卡槽获取被选中的卡片；
如果（被选中卡片来源于对方）：
通过cardNo定位被选中的卡槽；
手牌卡槽获取被选中的卡片；
更新战场信息；
如果（被选中卡片来源于卡组/墓地）：
如果（被选中卡片属于我方）：
手牌卡槽获取被选中的卡片；
如果（从卡组中选取）：根据cardNo剔出卡组中的卡片并刷新副面板；
如果（从墓地中选取）：根据cardNo剔出墓地中的卡片并刷新副面板；
如果（被选中卡片属于对方）：
此种情况只能是选中对方墓地中的卡片；
手牌卡槽获取被选中的卡片；
根据cardNo剔出对方墓地中的卡片并刷新副面板；
清空所有卡槽的选中状态；
函数中很多地方需要调用联机相关函数来告知对方战场更新，手牌增加，墓地增减卡片等，这些会放到介绍联机的章节来总结。
/**
* 将场上选中的卡牌回到手卡槽
*/
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();
}
}
2. 返回牌组：
返回卡组的逻辑比较简单，将选中的手卡或场上的卡 PUSH 回卡组，卡片会默认回到卡组的最上方。“返回卡组”操作只允许操作我方手牌或场上的卡片。
如果（被选中卡片属于我方玩家）：
如果（卡片来源于手牌）：
清空被选中手牌卡槽卡片；
将选中卡片url传到卡组P1Deck中；
如果（卡片来源于场上）：
清除卡槽的图片并且清空战场数组fieldArrayPly1中对应的记录；
将选中卡片url传到卡组P1Deck中；
更新战场；
清空所有卡槽的选中状态；
/**
* 将我方被选中的卡片返回卡组
* 默认回到卡组最上方
*/
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();
}
}
最后演示下效果：
返回手牌：
返回卡组：
自此所有的功能按键就介绍完毕了，“除去游戏外”的实现和墓地一模一样，可以完全照搬，我在初版本中并未增设此功能，除外的卡片均暂时存放在墓地中。
下一章终于可以开始介绍游戏的核心部分，联机功能的具体实现了。
