游戲介紹

前言：終于開題結束了, 寫個小游戲放松一下，

【游戲玩法介紹】有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>

效果演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/204665.html

標籤：其他

上一篇：TIOBE 11 月編程語言：Java 首次跌出前二，Python 勢不可擋

下一篇：Java學習筆記_06 回圈結構

HTML小游戲設計（2）-撲克翻牌游戲

游戲介紹

代碼模塊設計

代碼整體設計

效果演示