HTML5 实现扑克翻牌游戏
扑克翻牌游戏就是桌面24张牌,玩家翻到两张相同扑克牌则消去,如果时间2分钟到了,仍然没有成功则游戏失败。扑克翻牌游戏运行结果如图1。
01、程序设计的思路
1.Html5倒计时功能
Html5倒计时功能可以使用setTimeout()函数或者setInterval()函数来实现。
1.使用setTimeout实现倒计时功能
setTimeout()会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛,例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框,或者是鼠标单击某个元素后隔几秒钟在删除这个元素。
setTimeout函数语法:
setTimeout(code,millisec)
例如:var t =setTimeout("javascript语句", 毫秒)
setTimeout() 的第一个参数code是含有JavaScript语句的字符串。这个语句可能诸如"alert('5seconds!')",或者对函数的调用,诸如alertMsg()"。第二个参数millisec指示从当前起等待多少毫秒后执行第一个参数code。
setTimeout()函数会返回某个值。在上面的语句中,值被储存在名为t的变量中。假如希望取消这个setTimeout(),可以使用clearTimeout(t)来实现。
需要强调的是,setTimeout() 只执行code一次。如果要多次调用,可以让code自身再次调用setTimeout()。
例如下面代码调用setTimeout()实现1小时倒计时。
<body>
<div id="timer"></div>
<script type="text/javascript"language="javascript">
var d1=new Date();//年月日时分秒
var d2=d1.getTime()+60*60*1000
var endDate=new Date(d2);
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='还有'+ofd+'天'+ofh+'小时'+ofm+'分钟'+ofs+'秒';
if(ofs<0){
document.getElementById('timer').innerHTML='倒计时结束!';return;
};
setTimeout('daoJiShi()',1000);//自身再次调用daoJiShi()
};
daoJiShi();
</script>
</body>
2.使用setInterval实现倒计时功能
setTimeout()只执行代码code一次。如果要多次调用code可以使用setInterval()。setInterval ()可按照指定的周期(以毫秒计)来调用需要重复执行的函数代码。
setTimeout函数语法:
setInterval(function,interval[,arg1,arg2,......argn])
其中function参数可以是一个匿名函数或者是一个函数名,interval是设定的调用function的时间间隔,单位为毫秒(默认值为10毫秒),arg1,arg2,......argn为可选参数,是传递给function的参数。
下面的例子每隔1秒调用一次匿名函数。
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);
这里的function(){}是没有函数名的函数,成为匿名函数,后面的1000是时间间隔,单位是毫秒,即1秒钟。
下面的例子为我们展示如何带参数运行。
function show1(){trace("每隔1秒显示一次");
}
function show2(str){ //带参数函数show2trace(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就会显示一次");
//调用带参数函数show2 setInterval()会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval(ID)方法的参数。在游戏开发中,常常使用setInterval()制作游戏动画或其他间隔性渲染效果时。
var intervalID = setInterval(show1,1000);
clearInterval(intervalID); //取消该定时设置
例如下面代码用setInterval()实现1小时倒计时。
<body>
<div id="timer"></div>
<script type="text/javascript"language="javascript">
var d1=new Date();//年月日时分秒
var d2=d1.getTime()+60*60*1000
var endDate=new Date(d2);
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='还有'+ofd+'天'+ofh+'小时'+ofm+'分钟'+ofs+'秒';
if(ofs<0){document.getElementById('timer').innerHTML='倒计时结束!';return;
};
};
setInterval('daoJiShi()',1000);//间隔1秒钟调用
</script>
</body>
2.扑克牌显示与隐藏
游戏中使用的扑克牌牌面及背面采用1张图片(deck.png)存储,如图2所示。上面4行分别为4种花色扑克牌,最后一行扑克牌背面,每行高度120px。如何分割显示某一张扑克牌,这里使用CSS3技术实现。
例如想显示扑克牌背面图案如下写CSS类别:
.front
{width:80px; height: 120px;background-image: url("../images/deck.png");background-position: 0 -480px;z-index:10;
}
类别.front的背景图片是deck.png,background-position设置的背景图片位置。例如:
background-position:00;背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。
background-position:0 -480px;图片以容器左上角为参考向左偏移0px,向上偏移480px,从而正好是扑克牌背面图片区域。
z-index属性设置元素的堆叠(显示)顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。
background简写属性可在一个声明中设置所有的背景属性。可以设置如下属性:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-image。如果不设置其中的某个值,也是允许的。比如:
background: #999 url("../images/deck.png")0 -480px;background:#ff0000 url('smiley.gif');
显示扑克牌牌面图案如下写CSS类别:
.back
{width:80px; height: 120px;background: #efefef url("../images/deck.png");-webkit-transform-rotateY(-180deg); /* 其中-180 deg是旋转的角度 */z-index:8;
}
.cardAJ{background-position: -800px 0;}
background-position: -800px 0;图片以容器左上角为参考向左偏移800px,由于图片中每张牌宽度80px,所以正好显示出黑桃J。
.cardBJ{background-position: -800px-120px;}
background-position: -800px -120px;图片以容器左上角为参考向左偏移800px,所以正好显示出红桃J,向上偏移120px。
.cardCJ{background-position: -800px -240px;}
background-position: -800px -120px;图片以容器左上角为参考向左偏移800px,所以正好显示出梅花J,向上偏移120px。
.cardDJ{background-position: -800px -360px;}
background-position: -800px -120px;图片以容器左上角为参考向左偏移800px,所以正好显示出方块J,向上偏移120px。
<div class="back cardAJ "/>就能显示出黑桃J,<div class="back cardBJ"/>就能显示出红桃J,<div class="back cardCJ"/>就能显示出梅花J,<div class="back cardDJ"/>就能显示出方块J。其他牌的显示原理一样,仅仅background-position中的偏移量不同。
z-index设置为8,所以牌面显示在扑克牌背面下方被隐藏。
3.扑克牌删除
扑克牌删除采用设置透明度实现。
.card-removed/*移除牌*/
{opacity:0;
}
opacity: 0,设置div的不透明度为0。Opacity取值从0.0(完全透明)到1.0(完全不透明)。也可以使用visibility:hidden来实现,这两个效果都是让元素不显示,但visibility: hidden 意思是让元素不可见,但仍会占据页面上的空间。
4.添加删除类别Class
扑克牌的显示、隐藏和删除都是CSS中类别Class。需要将这些类别设置到HTML的标记元素(例如<div>)上,jquery中的addClass方法用于添加类别Class,而removeClass方法用于删除类别Class。
addClass( className ),className为一个字符串,为指定元素添加这个classname类别。removeClass(className ),指定元素移除的一个或多个用空格隔开的样式名或类别。
举例说明:
比如有一个<div>:
<div>
<a href="www.zut.edu.cn">武汉理工大学</a>
<a href="www.zzu.edu.cn">武汉大学</a>
</div>
使用jquery实现,当单击“武汉理工大学”的时候自动添加个class=“select”,代码自动就变成:
<div>
<aclass="select" href="www.zut.edu.cn">武汉理工大学</a>
<a href="www.zzu.edu.cn">武汉大学</a>
</div>
然后单击“武汉大学”,又变成
<div>
<ahref="www.zut.edu.cn">武汉理工大学</a>
<a href="www.zzu.edu.cn">武汉大学</a>
</div>
jQuery可以如下实现:
$(document).ready(function(){$("a").click(function(){$("a").each(function(){$(this).removeClass("select")}),//删除"select"类别$(this).addClass("select"),//当前被单击的<a>元素增加"select"类别return false})
})
jQuery代码中$("a")选择所有的<a>元素,在<a>元素的单击事件中,each()遍历所有的<a>元素并删除<a>元素上"select"类别。$(this)代表当前被单击的<a>元素,$(this).addClass("select")是给当前被单击的<a>元素增加"select"类别。
data() 方法向被选元素附加数据,或者从被选元素获取数据。
02、程序设计的步骤
1.设计CSS(matchgame.css)
根据程序设计的思路设计如下的CSS文件。
body
{text-align: center;background-image: url("../images/bg.jpg");
}
#game
{width:502px; height: 462px;margin: 0auto;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;}
.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;}
2.游戏页面index.htm
游戏页面中,每张牌的区域是一个id="card"的<div>,其中含上下层有两个<div>,<div class="face front">是上层显示背面,<div>是下层显示牌面。
<div>
<div></div>
<div class="face back"></div>
</div>
注意,最初仅仅有1个张牌的区域,其余的23张牌的区域是页面加载后复制实现的。页面加载后,首先利用Array.sort()将deck数组存储的牌随机排序,实现洗牌效果。调整CSS坐标属性"left","top",设置每张牌的区域<div>在屏幕上位置。最后在每张牌的区域<div>中的下层<div>添加类别(如.cardAJ,.cardBJ)就可以显示对应牌面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5扑克翻牌消除小游戏</title>
<link href="styles/matchgame.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript"src="matchgame.js"></script>
<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
<section id="game">
<div id="cards">
<div>
<div></div>
<div class="face back"></div>
</div>
</div>
</section>
<script type="text/javascript">
var success=false;
$(document).ready(function(){//实现随机洗牌matchingGame.deck.sort(shuffle);var$card=$(".card");for(vari= 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"});//从数组deck取一个牌如"cardAK","cardBJ"varpattern=matchingGame.deck.pop();//data()方法向被选元素附加数据,这里"pattern"存储牌类别数据如"cardAK","cardBJ"。$(this).data("pattern",pattern);//把其翻牌后的对应牌面附加上去,$(this).find(".back").addClass(pattern);//添加类别就可以显示对应牌面$(this).click(selectCard);//指定单击牌事件的功能函数selectCard});
});
</script>
<div style="text-align:center;margin:50px0; font:normal 44px/56px ">
<p>扑克翻牌游戏</p>
<div id="timer"></div>
</div>
<script type="text/javascript"language="javascript">
var success=false;
var d1=new Date();//年月日时分秒
var d2=d1.getTime()+2*60*1000
var endDate=new Date(d2);
function daoJiShi()
{var now=newDate();varoft=Math.round((endDate-now)/1000);varofd=parseInt(oft/3600/24);varofh=parseInt((oft%(3600*24))/3600);varofm=parseInt((oft%3600)/60);varofs=oft%60;document.getElementById('timer').innerHTML='还有 '+ofm+ ' 分钟 ' +ofs+ ' 秒';if(success==true) return;//停止计时if(ofs<0){document.getElementById('timer').innerHTML='倒计时结束!';if(success==false)alert('你挑战失败了!');return;};setTimeout('daoJiShi()',1000);
};
daoJiShi();
</script>
</body>
</html>
3.设计脚本(matchgame.js)
定义存储所有的牌的数组deck。
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之间的数returnMath.random()>0.5 ? -1 : 1
}
单击牌事件的功能函数selectCard()实现翻牌的功能。被翻过的牌都已添加"card-flipped"类别。所以$(".card-flipped")获取所有的翻过牌的<div>,数量超过1则说明已翻了两张牌后则不能再翻牌而退出翻牌。
若翻动了两张牌,检测是否相同。
function selectCard() {// 翻牌功能的实现var$fcard=$(".card-flipped");//翻了两张牌后退出翻牌if($fcard.length>1){return;}$(this).addClass("card-flipped");
//以下是若翻动了两张牌,检测一致性var$fcards=$(".card-flipped");if($fcards.length==2){setTimeout(function(){
checkPattern($fcards);},700);}
}
//检测2张牌是否一致
function checkPattern(cards)
{varpattern1 = $(cards[0]).data("pattern");//第1张牌牌面数据varpattern2 = $(cards[1]).data("pattern");//第2张牌牌面数据$(cards).removeClass("card-flipped"); //删除"card-flipped"类别if(pattern1==pattern2)//牌面数据相同{$(cards).addClass("card-removed")//透明效果var$fcards=$(".card-removed");if($fcards.length==24){alert("恭喜你成功了!");
success=true;}}
}
至此就完成扑克翻牌游戏。
HTML5 实现扑克翻牌游戏相关推荐
- HTML小游戏设计(2)-扑克翻牌游戏
游戏介绍 前言:终于开题结束了, 写个小游戏放松一下. [游戏玩法介绍] 有24张(两两相同)盖着的牌,玩家翻到两种相同的扑克牌则消去.如果规定的时间内,玩家没有消除所有的牌,则游戏失败. 代码模块设 ...
- php翻牌游戏代码,HTML5翻牌对对碰游戏源码
[实例简介] HTML5源码翻牌对对碰,过关类游戏,每关卡牌倍增,看你能闯过几关. [实例截图] [核心代码] 13606609-a447-4b55-9364-1f1092669ca4 └── fan ...
- html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏
感觉又是在发小白文,没办法,我还在不断学习中.前端进阶计划再一次因为学习难度,项目经验而告吹. 好在,我在缓慢进步~ 文章内容来源我网络上看到别人用js和css3写的仙剑记忆力翻牌游戏,感觉自己可以学 ...
- html扑克牌游戏源码,html5扑克牌消除小游戏源码
特效描述:html5扑克牌 消除小游戏源码.html5扑克牌消除小游戏源码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 $(function(){ //实现随机洗牌 neusoft ...
- JavaScript 实战-翻牌游戏 - H5和CSS3 (1)
前言 有段子说学习xxx语言从入门到放弃,当然这只是一句调侃,说明学习的门槛还是存在的,比如底层的C和汇编,难度不小,且需要更多基础知识,有时学起来少许枯燥,有编程天赋的人除外.如果想学得有趣不乏味, ...
- 【转】HTML5第一人称射击游戏发布
[CSON原创]HTML5第一人称射击游戏发布 功能说明: 游戏中在躲避敌人攻击的同时,需要收集三种不同的钥匙,开启对应的门,最后到达目的地. 该游戏同样基于自己开发的HTML5游戏框架cnGameJ ...
- 打砖块小游戏php程序,利用原生js实现html5打砖块小游戏(代码示例)
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
- HTML5+canvas激流勇进网页游戏源码
介绍: HTML5+canvas激流勇进网页游戏,游戏玩法:使用左键.右键和上箭头键移动. 网盘下载地址: http://kekewangLuo.cc/qn9O6AvpNW10 图片:
- 基于HTML5的贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇游戏的设计与实现 功能要求: 贪吃蛇游戏是一款经典的单机休闲游戏,玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进,并吃掉随机位置上产生食物来获得分数.每吃掉一次食物,贪 ...
最新文章
- 向阿里学数字化转型,驱动业绩新增长
- JAVA IO操作中的IN和OUT问题
- pg_dump 详解/使用举例
- 全球及中国卸妆条行业发展规模与营销前景分析报告2022版
- nginx服务器开启缓存、反向代理
- rpn风险等级评价准则_2019一建经济学习重点:技术方案经济效果评价
- C#多线程学习(一) 多线程的相关概念
- 10054 java,为什么Socket.Receive在远程主机断开连接时抛出SocketException(10054)?
- Spring AMQP 教程
- 团队编程项目作业1-成员简介及分工
- hpux 下查看内存的的大小的几种方法:
- 强核问世:NVIDIA发布A100 80GB GPU,为AI超级计算带来全球最强GPU
- 做爬虫的一些技术观点-第450期
- 181228每日一句
- JAVA代码走查审查规范
- 菲利普·安德森:凝聚态物理的艺术家
- UINO优锘:干货分享 | 虚拟现实建模基础
- 那些年,我们一起用过的测试工具
- 【python】实用tools
- 泰克TBS1000X示波器仪器的使用