游戏介绍

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

【游戏玩法介绍】有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>

效果演示

HTML小游戏设计（2）-扑克翻牌游戏相关推荐

HTML5 实现扑克翻牌游戏
扑克翻牌游戏就是桌面24张牌,玩家翻到两张相同扑克牌则消去,如果时间2分钟到了,仍然没有成功则游戏失败.扑克翻牌游戏运行结果如图1. 01.程序设计的思路 1.Html5倒计时功能 Html5倒计时功 ...
2021-12-08：扑克牌中的红桃J和梅花Q找不到了，为了利用剩下的牌做游戏，小明设计了新的游戏规则： 1) A,2,3,4....10,J,Q,K分别对应1到13这些数字，大小王对应0； 2) 游
2021-12-08:扑克牌中的红桃J和梅花Q找不到了,为了利用剩下的牌做游戏,小明设计了新的游戏规则: A,2,3,4-10,J,Q,K分别对应1到13这些数字,大小王对应0; 游戏人数为2人,轮流 ...
美国计算机游戏设计专业排名,美国游戏设计专业大学排名TOP5推荐！
首先明确的是游戏产业的就业前景还是非常好的,尤其是美国,游戏领域方向是游戏设计留学大多数人都会选择的国家,因为美国的游戏专业是比较强的.今天,美行思远小编就来和大家简单推荐一下美国游戏设计专业大学排名 ...
扫雷程序设计Android答辩,基于QT的扫雷游戏设计与实现扫雷游戏答辩.ppt
基于QT的扫雷游戏设计与实现扫雷游戏答辩.ppt 程序设计基于QT语言的扫雷游戏,答辩学生,一.分析扫雷游戏的基本功能,1.从外观上分析方块笑脸计时器有雷标识无雷标识胜利画面失败画面, ...
通灵学院|游戏设计研习8：游戏空间设计★（800字）
通灵学院|研习8:游戏空间设计★ 本文为暗夜琉璃NightRuri原创,侵权必究. 往期研习: 研习1:人类的需求与动机研习2:人类的外在人群特征研习3:人类的内在人群特征研习4:游戏体验发生于 ...
java台球游戏设计原理_台球游戏的核心算法和AI(1)
前言: 08年的时候, 写过一个台球游戏, 用的是java, 不过代码真的是用传说中的神器notepad写的(你信吗? 其实是用GVIM写的, ^_^), 很多类都在同一java文件中编写. 可见当时 ...
游戏设计之我见 —— 动作游戏中敌人的受击设计
这篇博客结合一些游戏案例,介绍了3D动作游戏中敌人的受击设计. 在动作游戏中,由于玩家与敌人在一直进行不停地攻防博弈,因此为了给予玩家正切且适当的攻防反馈,需要着重设计敌人受伤以及死亡的设计. 受伤反 ...
游戏设计与计算机,RPG游戏设计与实现-数学与计算机系.doc
RPG游戏设计与实现-数学与计算机系 XX学院毕业论文(设计) RPG游戏设计与实现院系 :数学与计算机系专业(班级):计算机科学与技术专业2班姓名:XXX学号:20084011023指导教师: ...
【游戏设计系列】关于游戏设计文档
如何编写设计文档设计文档的分类迷你型设计(mini design) 定义:一周左右完成的设计,一个完整却简单的游戏描述要求任何一团队成员能够摘录与阅读读者能够了解游戏设计者的设计意图读者能 ...

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

游戏介绍

代码模块设计

代码整体设计

效果演示

HTML小游戏设计（2）-扑克翻牌游戏相关推荐

最新文章

热门文章