html5扑克翻牌消除小游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5扑克翻牌消除小游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

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

<script type="text/javascript" src="scripts/htm5game.matchgame.js"></script>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>

<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(){
	//实现随机洗牌
	neusoft.matchingGame.deck.sort(shuffle);
	//alert(neusoft.matchingGame.deck);
	var $card=$(".card");
	for(var i= 0;i<11;i++)
	{
		$card.clone().appendTo($("#cards"));
	}
	//对每张牌进行设置
	$(".card").each(function(index)
	{
		//调整坐标
		$(this).css({
			"left":(neusoft.matchingGame.cardWidth+20)*(index%4)+"px",
			"top":(neusoft.matchingGame.cardHeight+20)*Math.floor(index/4)+"px"
		});
		//吐出一个牌号
		var pattern=neusoft.matchingGame.deck.pop();
		//暂存牌号
		$(this).data("pattern",pattern);
		//把其翻牌后的对应牌面附加上去
		$(this).find(".back").addClass(pattern);
		//点击牌的功能函数挂接
		$(this).click(selectCard);
	});
});
</script>
</body>
</html>

CSS代码(matchgame.css):

body{text-align:center;background-image:url("../images/bg.jpg");}
#game{width:502px;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:380px;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:#999 url("../images/deck.png")0 -480px;z-index:10;}
.back{background:#efefef 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;}
.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;}

附件:下载该文件资源,减少时间成本(增值服务)