HTML+JS+websocket 实现联机“游戏王”对战(五)- 卡片选中系统


目录:

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置,战场更新
游戏王联机卡牌对战 7 - 墓地,副控制面板
游戏王联机卡牌对战 8 - 返回手卡,牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

卡片选中系统

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

卡片选择

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中显示一张卡背的图片以表示背盖防御或是盖覆状态:
背盖状态
但是这样相当于丢失了这张背盖卡片的url信息,所以在它放置到战场的前一刻我们就要率先拿出这张卡片的url,并存放在战场数组 fieldArrayPly1 中。这样即使是被盖的卡片我们也能知晓它的信息,并且显示给我方玩家:

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


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

被选中的样式(手牌与场上):
选中样式 - 手牌
选中样式 - 场上
在选中函数中,每次执行功能前会调用一次选择清空函数 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的左上角显示卡片的详细信息,其实就是放大版的卡牌图片。
卡片信息显示
:鼠标指着的是“强欲之壶”,不是那张被选中的“帝王海马”,鼠标截图截不到惹…


先来回顾下卡片信息显示板块的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),因为我们不需要看到对方背盖表示的卡片,如果要看需要让对方翻开。

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值