目录

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 - 实机演示

卡片选中系统

大部分卡片的操作功能都是针对单张卡片的，比如召唤，盖卡，回到卡组，返回手牌，送去墓地。执行这些操作前玩家必须先选定需要操作的对象，即某一张卡片。这个时候我们就需要建立一个卡片选中系统，在玩家选定卡片时记录该卡的相关信息，以便我们对选中的卡片执行相应的操作。

selection_structure.png

1.全局变量：

首先我们需要一个用来随时存储被选中卡片相关信息的全局对象 SelectedCard:

var SelectedCard = {  //被选中的卡对象
    type: "null",  //卡的来源类型（手牌，场上）
    cardNo: -1,  //卡片的序号
    cardSrc: "null",
    player: "null"  //玩家号
};

对象中变量的含义:

变量	含义
type	被选中卡片的来源，是属于手牌还是场上
cardNo	被选中卡片所属的卡槽序号，卡槽可以是手牌卡槽或战场卡槽
cardSrc	被选中卡片的图片 url
player	被选中卡片所属的玩家类型，我方（player1）还是对方（player2）

这些变量是根据游戏其他功能的需求总结得出。举个栗子 type 变量，当我们执行召唤功能的时候，我们需要通过 type 判断被选中的卡片属于场上还是手牌，只有手牌的卡片才能执行召唤（墓地或者卡组的卡片需要先拿到手牌再执行召唤），因此我们需要在选中某张卡牌后记录它的 type 信息为其他功能函数所用。

此外，我们还需要一个用于存储我方战场信息的全局对象数组 fieldArrayPly1:

// 储存场上卡片信息（10张卡的图片src，状态）
var fieldArrayPly1 = { 
    FieldCards: [
        { "imgsrc": "null", "state": "null"}, 
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
        { "imgsrc": "null", "state": "null"},
    ] 
};

手卡的属性比较简单，操作手牌的卡牌时我们不需要关注卡片的状态。而战场卡槽的卡片情况要复杂一些，首先战场卡片有魔法陷阱区，有怪兽区，魔法陷阱区的卡片又分为打开与盖覆，而怪兽区的卡片则有攻击，防御与背盖防御三种状态。我们这里针对这些状态用一个变量state来表示，并把这些状态分类为：

状态	字符
攻击状态	attk
防御状态	defen
背盖（防御）状态	back
打开状态（即表侧表示）	on
盖覆状态（即里侧表示）	off

这些状态将用于玩家选中某个卡槽的卡片并执行某些操作时（比如更变形式）用于函数的判断。

另外 fieldArrayPly1 存储的就是战场卡槽的卡片url了。对于手卡卡片，卡片url就记录在html的img标签中，需要获取的时候（比如召唤怪兽的时候我们需要把手卡的url拿出来赋值给战场的卡槽src属性）我们可以直接通过element方法从html元素中获取。战场卡槽同样在对应的img标签中存有该卡槽的卡片url，但是需要考虑一种特殊情况，就是当卡槽中的卡是被盖防御或者盖覆状态时，该卡槽的url储存的并非是某张卡牌的路径，而是一个专门的卡背路径：

var CardBackSrc = "image/cards/cardback.jpg";  //卡片背面图片的src

这样我们才能在战场UI中显示一张卡背的图片以表示背盖防御或是盖覆状态：

game_back_state.png

但是这样相当于丢失了这张背盖卡片的url信息，所以在它放置到战场的前一刻我们就要率先拿出这张卡片的url，并存放在战场数组 fieldArrayPly1 中。这样即使是被盖的卡片我们也能知晓它的信息，并且显示给我方玩家：

game_show_backcard.png

当然对方是看不到些信息的，选中后也就显示个卡背而已。

2.卡片选中函数：

相关的变量介绍完了，现在我们来实现选中函数。

选中函数由玩家鼠标点击手牌或战场的某个卡槽时触发，设置在html中卡槽的onclick属性中，函数名为 selectCard。

<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>

selectCard 的参数：

参数	含义
id	选中卡槽 id（img 标签 id）
type	选中卡槽类型（手卡 / 场上）
cardsrc	卡片的图片路径或 url
cardNo	卡槽序号
ply	所属玩家（player1 我方 / player2 对方）

Html代码中可以看到已经填写的所有参数，之后：

如果（所选卡槽不是空卡槽）：
    清空所有已选中的卡片信息与样式；
    储存选中卡片的类型（type），卡槽序号（cardNo），所属玩家（ply）信息；
    
    如果（卡片属于手牌）：
        通过卡槽id获取当前卡槽对象；
        修改卡槽样式为选中状态（金色边框）；
        直接从参数cardsrc中获取并存储卡片url；
        
    如果（卡片属于场上）：
        通过卡槽id获取当前卡槽对象；
        修改卡槽样式为选中状态（金色边框）；
        如果（卡片属于我方）：
            从战场数组fieldArrayPly1中获取并存储卡片url；
        如果（卡片属于对方）：
            直接从参数cardsrc中获取并存储卡片url；

/**
 * 选择卡片（游戏中始终只有一张卡牌处于选中状态）,并记录当前卡片信息
 * @param {string} id - container id
 * @param {string} type - card source type (hand/field)
 * @param {string} cardsrc - card url
 * @param {int} cardNo - card No
 * @param {string} ply - player tag
 */
function selectCard(id, type, cardsrc, cardNo, ply) {
    if (cardsrc != emptysrc) {
        cleanSelected();  //选择卡片之前首先清空场上已选中的卡片样式再更新

        SelectedCard.type = type;
        SelectedCard.cardNo = cardNo;
        SelectedCard.player = ply;
        
        //console.log("image" + cardsrc.split('image')[1]);
        var CardSrc = "image" + cardsrc.split('image')[1];  //把带盘符的绝对路径改为相对路径

        if (type == 'hand') {
            element = document.getElementById(id);
            element.setAttribute("class", "card-selected");
            SelectedCard.cardSrc = CardSrc;  //若从手牌选择直接从img容器获取src
        } else {
            element = document.getElementById(id);  
            element.setAttribute("class", "item-selected");
            if (ply == 'player1') {
                SelectedCard.cardSrc = fieldArrayPly1.FieldCards[cardNo].imgsrc;  //若从我方场上选择则由场上状态数组获取卡片src
            } else if (ply == 'player2') {
                SelectedCard.cardSrc = CardSrc;  //若从对方场上选择则直接从img容器获取src
            }
        }
    }
}

被选中的样式（场上与手牌）：

game_cardselected_field.png game_cardselected_hand.png

在选中函数中，每次执行功能前会调用一次选择清空函数 cleanSelected()，重置手牌及场上所有被选中的卡槽样式与卡片信息对象 SelectedCard，以免出现多选的情况。

cleanSelected() 函数内容很简单，遍历重置所有卡槽样式，之后重置对象 SelectedCard。注意函数里有一个关于副控制面板的操作，副控制面板较特殊，选中函数也是另外写的，这个放到后面的章节来介绍。

/**
 * 清除所有卡片被选中的状态
 * 注意这里手牌和场上用于显示被选中状态的容器不同
 * 手牌的是img容器而场上用的是item容器
 */
function cleanSelected() {
    for (var i=0; i<8; i++) {  //清除手牌选中
        var handIDPly1 = 'p1-hand' + i.toString();
        element = document.getElementById(handIDPly1);
        element.setAttribute("class", "card");
    }
    for (var i=0; i<10; i++) {  // 清楚场上选中
        var fieldIDPly1 = 'p1field' + i.toString();
        var fieldIDPly2 = 'p2field' + i.toString();
        element = document.getElementById(fieldIDPly1);
        element2 = document.getElementById(fieldIDPly2);
        element.setAttribute("class", "item");
        element2.setAttribute("class", "item");
    }
    for (var i=0; i<sf_Card.size; i++) {
        var sf_ID = 'sf-card' + i.toString();
        element = document.getElementById(sf_ID);
        element.setAttribute("class", "card");
    }

    /*重置被选中的卡片信息 */
    SelectedCard.type = "null";
    SelectedCard.cardNo = -1;
    SelectedCard.cardSrc = "null";
    SelectedCard.player = "null";
}

卡片信息显示

最后还有个最重要的卡片显示函数，当玩家鼠标指到某张卡片时会在UI的左上角显示卡片的详细信息，其实就是放大版的卡牌图片。

game_cardpointed.png

注：鼠标指着的是“强欲之壶”，不是那张被选中的“帝王海马”，鼠标截图截不到惹…

先来回顾下卡片信息显示板块的html代码：

<div class="card-field">
    <img id="card-info" class="card" src="">
</div>

就是一个简单的 img 标签而已。触发显示的函数设置在各个卡槽的 onmouseover 属性中，函数名 showCardInfo，鼠标悬浮于某个卡槽上时即会触发：

<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>

showCardInfo参数表：

参数	含义
type	选中卡槽类型（手卡 / 场上）
cardsrc	卡片的图片路径或 url
cardNo	卡槽序号
ply	所属玩家（player1 我方 / player2 对方）

参数和 selectCard 相似，接下来照例 sudo code：

如果（被指示的卡槽不是空卡槽）：
    获取卡片显示框对象；
    
    如果（卡片所属是我方）：
        手卡：直接从参数获取卡片url并赋值给显示框对象；
        场上的卡：从战场数组fieldArrayPly1中获取卡片url并赋值给显示框对象；
        
    如果（卡片所属是对方）：
        手卡：直接用卡背图片url赋值给显示框对象；
        场上的卡：直接从参数获取卡片url并赋值给显示框对象；

/**
 * 显示卡片信息
 * show card info
 * @param {string} type - card source type (hand/field)
 * @param {string} cardsrc - card url
 * @param {int} cardNo - card No 
 * @param {string} ply - player tag 
 */
function showCardInfo(type, cardsrc, cardNo, ply) {
    if (cardsrc != emptysrc) {
        element = document.getElementById('card-info');
        var CardSrc = "image" + cardsrc.split('image')[1];  //把带盘符的绝对路径改为相对路径

        switch(ply) {
            /*我方卡片一律显示 */
            case 'player1':
                if (type == 'hand') {  //手卡均显示
                    element.src = CardSrc;
                } else {  //场上卡片按数组记录的img的src显示（若直接取img容器的src则无法看到我方盖卡）
                    element.src = fieldArrayPly1.FieldCards[cardNo].imgsrc;
                }
                break;
            /*对方卡片视情况显示 */
            case 'player2':
                if (type == 'hand') {  //手卡均不显示
                    element.src = CardBackSrc;
                } else {  //场上卡片直接按容器的img值显示
                    element.src = CardSrc;
                }
                break;
            default: break;
        }
    }
}

玩家无法看到对方手牌，所以对方手牌一律用卡背显示。对方场上的卡片也直接从img标签元素中获取url（img标签的src值作为参数传给了showInfo），因为我们不需要看到对方背盖表示的卡片，如果要看需要让对方翻开。

game_cardpointed_back.png

指示对方手牌或被盖卡片只能看到卡背的图片。

贯穿整个游戏的功能函数应该介绍的差不多了，下一章开始就该针对具体的按钮来实现对应功能啦。