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

游戏介绍

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

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

---

代码模块设计

【一、扑克牌的翻转】

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

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

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

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

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

<div style="color:red;text-align:center;margin:50px 0; font:normal 100px/150px ">
<b>扑克翻牌游戏</b>
<div id="timer"></div>
</div>
<script type="text/javascript" language="javascript">
var d1=new Date();//年月日时分秒
var d2=d1.getTime()+2*60*1000  // 2分钟倒计时
var endDate=new Date(d2);
var number=0;
function daoJiShi()
{
    var now=new Date();
    var oft=Math.round((endDate-now)/1000);
    var ofd=parseInt(oft/3600/24);
    var ofh=parseInt((oft%(3600*24))/3600);
    var ofm=parseInt((oft%3600)/60);
    var ofs=oft%60;
    document.getElementById('timer').innerHTML='倒计时 '+ofm+ ' 分钟 ' +ofs+ ' 秒';

    if(ofs<0){
        document.getElementById('timer').innerHTML='倒计时结束！';
        alert('很遗憾，你挑战不顺利了！');
        return;
    };
    setTimeout('daoJiShi()',1000);
};
daoJiShi();
</script>

【三、翻牌和检测牌】

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无法加入

}

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5扑克翻牌消除小游戏</title>
<link href="matchgame.css" rel="stylesheet">
</head>
<body>

<script type="text/javascript" src="htm5game.matchgame.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<!-- min.js可以理解为js的编译版本，不好阅读但是易于部署-->

<section id="game">
    <div id="cards">
        <div class="card">
            <div class="face front"></div>   <!-- 显示牌的背面-->
            <div class="face back"></div>    <!-- 显示牌的正面-->
        </div>
    </div>
</section>
	
<script type="text/javascript">
$(function(){
	//实现随机洗牌
	matchingGame.deck.sort(shuffle);
	var $card=$(".card");

    //先设置一张牌，再复制23张牌
	for(var i= 0;i<23;i++)
	{
		$card.clone().appendTo($("#cards"));
	}
	//对每张牌进行设置
	$(".card").each(function(index)
	{
		//调整坐标
		$(this).css({
			"left":(matchingGame.cardWidth+20)*(index%8)+"px",
			"top":(matchingGame.cardHeight+20)*Math.floor(index/8)+"px"
		});
		//吐出一个牌号
		var pattern=matchingGame.deck.pop();
		//暂存牌号
		$(this).data("pattern",pattern);
		//把其翻牌后的对应牌面附加上去
		$(this).find(".back").addClass(pattern);
		//点击牌的功能函数挂接
		$(this).click(selectCard);
	});
});
</script>

<div style="color:red;text-align:center;margin:50px 0; font:normal 100px/150px ">
<b>扑克翻牌游戏</b>
<div id="timer"></div>
</div>
<script type="text/javascript" language="javascript">
var d1=new Date();//年月日时分秒
var d2=d1.getTime()+1*60*1000  // 2分钟倒计时
var endDate=new Date(d2);
var number=0;
function daoJiShi()
{
    var now=new Date();
    var oft=Math.round((endDate-now)/1000);
    var ofd=parseInt(oft/3600/24);
    var ofh=parseInt((oft%(3600*24))/3600);
    var ofm=parseInt((oft%3600)/60);
    var ofs=oft%60;
    document.getElementById('timer').innerHTML='倒计时 '+ofm+ ' 分钟 ' +ofs+ ' 秒';

    if(ofs<0){
        document.getElementById('timer').innerHTML='倒计时结束！';
        alert('很遗憾，宇林你挑战不顺利了！');
        return;
    };
    setTimeout('daoJiShi()',1000);
};
daoJiShi();
</script>

</body>
</html>

---

效果演示