HTML小游戏设计（2）-扑克翻牌游戏

游戏介绍

前言：终于开题结束了, 写个小游戏放松一下。

【游戏玩法介绍】 有24张（两两相同）盖着的牌，玩家翻到两种相同的扑克牌则消去。如果规定的时间内，玩家没有消除所有的牌，则游戏失败。

---

代码模块设计

【一、扑克牌的翻转】

上图是素材图(每个子图的高度为120px，宽度为80px)，需要用CSS3技术实现分割显示为每张扑克牌。

例-显示扑克牌的背面图案

.font
{
    width: 80px; height: 120px;
    background-image: url("图片地址");
    background-position: 0 -480px;
    z-index: 10;
}

其中，z-index属性是设置元素的显示顺序，z值越大的元素显示越前面。

【二、文字提示和倒计时】

扑克翻牌游戏

【三、翻牌和检测牌】

function shuffle()
{
    //Math.random能返回0~1之间的数
    return Math.random()>0.5 ? -1 : 1
}

//  翻牌功能的实现
function selectCard() {
    var $fcard=$(".card-flipped"); //被翻过的牌添加flipped的标签
    //翻了两张牌后退出翻牌
    if($fcard.length>1)
    {
        return;
    }
    // alert($(this).data("pattern")); 打印出翻过牌的标签
    $(this).addClass("card-flipped");
//    若翻动了两张牌，检测一致性
    var $fcards=$(".card-flipped");
    if($fcards.length==2)
    {
       // 判断两张牌是否一致的时间
        setTimeout(function(){
        checkPattern($fcards);},500);
    }
}
//检测2张牌是否一致
function checkPattern(cards)
{
    var pattern1 = $(cards[0]).data("pattern");
    var pattern2 = $(cards[1]).data("pattern");

    $(cards).removeClass("card-flipped");
    if(pattern1==pattern2)
    {
        number = number +1;
        $(cards).addClass("card-removed")
            .bind("webkitTransitionEnd",function(){
                $(this).remove();
            });
    }

    // if($fcards.length==24)
    // {
    //     alert('恭喜挑战成功！')；
    //     success = true；
    // }  有bug无法加入

}

注明：一个小技巧，让牌消失，可以选择把牌的透明度变成100%。值得注意的是，这里要改变牌的类别属性，在透明的牌位置点击鼠标无效！

代码整体设计

body
{
    text-align: center;
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-size:40% 40%;
    background-position: 50% 100%;
}
#game
{
    width: 902px;
    height: 462px;
    margin: 0 auto;
    border: 1px solid #666;
    border-radius: 10px;
    background-image: url("images/table.jpg");
    position: relative;
    display: -webkit-box;     /*盒子式布局*/
    -webkit-box-pack:center; 
    -webkit-box-align:center;
}
#cards
{
    width: 760px;
    height: 400px;
    position: relative;
	margin:30px auto;
}
.card
{
    width: 80px;
    height: 120px;
    position: absolute;
}
.face
{
    width: 100%;
    height: 100%;
    border-radius:10px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -webkit-transition:all .3s;
}
.front
{
    background: url("images/deck.png")0 -480px;
    z-index: 10;
}
.back
{
    background: url("images/deck.png");
    -webkit-transform-rotateY(-180deg);
    z-index: 8;
}
.face:hover
{
    -webkit-box-shadow: 0 0 40px #aaa;
}
/*牌面定位样式*/
.cardAJ{background-position: -800px 0;}
.cardAQ{background-position: -880px 0;}
.cardAK{background-position: -960px 0;}
.cardBJ{background-position: -800px -120px;}
.cardBQ{background-position: -880px -120px;}
.cardBK{background-position: -960px -120px;}
.cardCJ{background-position: -800px -240px;}
.cardCQ{background-position: -880px -240px;}
.cardCK{background-position: -960px -240px;}
.cardDJ{background-position: -800px -360px;}
.cardDQ{background-position: -880px -360px;}
.cardDK{background-position: -960px -360px;}

.card-flipped .front
{
    /*保证牌底在牌面下面，z-index值切换为小值*/
    z-index: 8;
    -webkit-transform: rotateY(180deg);
}
.card-flipped .back
{
    /*保证牌底在牌面上面，z-index值切换为大值*/
    z-index: 10;
    /*前面牌面已经翻过去，现在返回来*/
    -webkit-transform: rotateY(0deg);
}
/*移除牌*/
.card-removed
{
    opacity: 0;  /*透明度为100%*/
}

var matchingGame={};
matchingGame.cardWidth=80;//牌宽
matchingGame.cardHeight = 120;

//存储所有的牌
matchingGame.deck=
    [
        "cardAK","cardAK", "cardAQ","cardAQ", "cardAJ","cardAJ",
        "cardBK","cardBK", "cardBQ","cardBQ", "cardBJ","cardBJ",
        "cardCK", "cardCK", "cardCQ", "cardCQ", "cardCJ", "cardCJ",
        "cardDK", "cardDK", "cardDQ", "cardDQ", "cardDJ", "cardDJ"       
    ]

//随机排序函数，返回-1或1
function shuffle()
{
    //Math.random能返回0~1之间的数
    return Math.random()>0.5 ? -1 : 1
}

//  翻牌功能的实现
function selectCard() {
    var $fcard=$(".card-flipped"); //被翻过的牌添加flipped的标签
    //翻了两张牌后退出翻牌
    if($fcard.length>1)
    {
        return;
    }
    // alert($(this).data("pattern")); 打印出翻过牌的标签
    $(this).addClass("card-flipped");
//    若翻动了两张牌，检测一致性
    var $fcards=$(".card-flipped");
    if($fcards.length==2)
    {
       // 判断两张牌是否一致的时间
        setTimeout(function(){
        checkPattern($fcards);},500);
    }
}
//检测2张牌是否一致
function checkPattern(cards)
{
    var pattern1 = $(cards[0]).data("pattern");
    var pattern2 = $(cards[1]).data("pattern");

    $(cards).removeClass("card-flipped");
    if(pattern1==pattern2)
    {
        number = number +1;
        $(cards).addClass("card-removed")
            .bind("webkitTransitionEnd",function(){
                $(this).remove();
            });
    }

    // if($fcards.length==24)
    // {
    //     alert('恭喜挑战成功！')；
    //     success = true；
    // }  有bug无法加入

}

    

        

            
   
            
    
        
    

	



扑克翻牌游戏

---

效果演示