• 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小时倒计时。

    1. <body>
    2. <div id="timer">div>
    3. <script type="text/javascript"language="javascript">
    4. var d1=new Date();//年月日时分秒
    5. var d2=d1.getTime()+60*60*1000
    6. var endDate=new Date(d2);
    7. function daoJiShi()
    8. {
    9. var now=new Date();
    10. var oft=Math.round((endDate-now)/1000)
    11. var ofd=parseInt(oft/3600/24);                         //天
    12. var ofh=parseInt((oft%(3600*24))/3600);        //小时
    13. var ofm=parseInt((oft%3600)/60);                   //分
    14. var ofs=oft%60;                                                //秒
    15. document.getElementById('timer').innerHTML='还有'+ofd+'天'+ofh+'小时'+ofm+'分钟'+ofs+'秒';
    16. if(ofs<0){
    17. document.getElementById('timer').innerHTML='倒计时结束！';return;
    18. };
    19. setTimeout('daoJiShi()',1000);//自身再次调用daoJiShi()
    20. };
    21. daoJiShi();
    22. script>
    23. 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秒钟。

    下面的例子为我们展示如何带参数运行。

    1. function show1(){
    2.    trace("每隔1秒显示一次");
    3. }
    4. function show2(str){                       //带参数函数show2
    5.    trace(str);
    6. }
    7. setInterval(show1,1000);
    8. setInterval(show2,2000,"每隔2秒我就会显示一次");
    9. //调用带参数函数show2 setInterval()会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval(ID)方法的参数。在游戏开发中，常常使用setInterval()制作游戏动画或其他间隔性渲染效果时。
    10. var intervalID = setInterval(show1,1000);
    11. clearInterval(intervalID); //取消该定时设置

    例如下面代码用setInterval()实现1小时倒计时。

    1. <body>
    2. <div id="timer"></div>
    3. <script type="text/javascript"language="javascript">
    4. var d1=new Date();//年月日时分秒
    5. var d2=d1.getTime()+60*60*1000
    6. var endDate=new Date(d2);
    7. function daoJiShi()
    8. {
    9. var now=new Date();
    10. var oft=Math.round((endDate-now)/1000);
    11. var ofd=parseInt(oft/3600/24);
    12. var ofh=parseInt((oft%(3600*24))/3600);
    13. var ofm=parseInt((oft%3600)/60);
    14. var ofs=oft%60;
    15.   document.getElementById('timer').innerHTML='还有'+ofd+'天'+ofh+'小时'+ofm+'分钟'+ofs+'秒';
    16. if(ofs<0){
    17.    document.getElementById('timer').innerHTML='倒计时结束！';return;
    18. };
    19. };
    20. setInterval('daoJiShi()',1000);//间隔1秒钟调用
    21. </script>
    22. </body>

    2.扑克牌显示与隐藏

    游戏中使用的扑克牌牌面及背面采用1张图片（deck.png）存储，如图2所示。上面4行分别为4种花色扑克牌，最后一行扑克牌背面，每行高度120px。如何分割显示某一张扑克牌，这里使用CSS3技术实现。

    例如想显示扑克牌背面图案如下写CSS类别：

    1. .front
    2. {
    3.     width:80px;    height: 120px;
    4.    background-image: url("../images/deck.png");
    5.    background-position: 0 -480px;
    6.     z-index:10;
    7. }

    类别.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。如果不设置其中的某个值，也是允许的。比如：

    1.    background: #999 url("../images/deck.png")0 -480px;
    2.     background:#ff0000 url('smiley.gif');

    显示扑克牌牌面图案如下写CSS类别：

    1.  .back
    2. {
    3.     width:80px;    height: 120px;
    4.    background: #efefef url("../images/deck.png");
    5.    -webkit-transform-rotateY(-180deg); /* 其中-180 deg是旋转的角度 */
    6.     z-index:8;
    7. }
    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。

    就能显示出黑桃J，
    就能显示出红桃J，
    就能显示出梅花J，
    就能显示出方块J。其他牌的显示原理一样，仅仅background-position中的偏移量不同。

    z-index设置为8，所以牌面显示在扑克牌背面下方被隐藏。

    3.扑克牌删除

    扑克牌删除采用设置透明度实现。

    1. .card-removed/*移除牌*/
    2. {
    3.     opacity:0;
    4. }

    opacity: 0，设置div的不透明度为0。Opacity取值从0.0（完全透明）到1.0（完全不透明）。也可以使用visibility:hidden来实现，这两个效果都是让元素不显示，但visibility: hidden 意思是让元素不可见，但仍会占据页面上的空间。

    4.添加删除类别Class

    扑克牌的显示、隐藏和删除都是CSS中类别Class。需要将这些类别设置到HTML的标记元素（例如

    ）上，jquery中的addClass方法用于添加类别Class，而removeClass方法用于删除类别Class。

    addClass( className )，className为一个字符串，为指定元素添加这个classname类别。removeClass(className )，指定元素移除的一个或多个用空格隔开的样式名或类别。

    举例说明：

    比如有一个

    ：

    1. <div>
    2. <a href="www.zut.edu.cn">武汉理工大学a>
    3. <a href="www.zzu.edu.cn">武汉大学a>
    4. div>

    使用jquery实现，当单击“武汉理工大学”的时候自动添加个class=“select”，代码自动就变成：

    1. <div>
    2. 武汉理工大学a>
    3. <a href="www.zzu.edu.cn">武汉大学a>
    4. div>

    然后单击“武汉大学”，又变成

    1. <div>
    2. 武汉理工大学a>
    3. <a  href="www.zzu.edu.cn">武汉大学a>
    4. div>

    jQuery可以如下实现：

    1. $(document).ready(function(){
    2.   $("a").click(function(){
    3.         $("a").each(function(){$(this).removeClass("select")}),//删除"select"类别
    4.         $(this).addClass("select"),//当前被单击的元素增加"select"类别
    5.         return false})
    6. })

    jQuery代码中$("a")选择所有的元素，在元素的单击事件中，each()遍历所有的元素并删除元素上"select"类别。$(this)代表当前被单击的元素，$(this).addClass("select")是给当前被单击的元素增加"select"类别。

    data() 方法向被选元素附加数据，或者从被选元素获取数据。

     

    02、程序设计的步骤

    1.设计CSS（matchgame.css）

    根据程序设计的思路设计如下的CSS文件。

    1. body
    2. {
    3.    text-align: center;
    4.    background-image: url("../images/bg.jpg");
    5. }
    6. #game
    7. {
    8.     width:502px;    height: 462px;
    9.     margin: 0auto;
    10.     border:1px solid #666;
    11.    border-radius: 10px;
    12.    background-image: url("../images/table.jpg");
    13.     position:relative;
    14.     display:-webkit-box;
    15.    -webkit-box-pack:center;
    16.    -webkit-box-align:center;
    17. }
    18. #cards  /*所有的扑克牌显示区域*/
    19. {
    20.     width:380px;    height: 400px;  position: relative;  margin:30px auto;
    21. }
    22. .card
    23. {
    24.     width:80px;  height: 120px;  position: absolute;
    25. }
    26. .face
    27. {
    28.     width:100%;
    29.     height:100%;
    30.    border-radius:10px;
    31.     position:absolute;
    32.    -webkit-backface-visibility: hidden;
    33.    -webkit-transition:all .3s;
    34. }
    35. .front
    36. {
    37.    background: #999 url("../images/deck.png")0 -480px;
    38.     z-index:10;
    39. }
    40. .back
    41. {
    42.    background: #efefef url("../images/deck.png");
    43.    -webkit-transform-rotateY(-180deg);
    44.     z-index:8;
    45. }
    46. .face:hover
    47. {
    48.    -webkit-box-shadow: 0 0 40px #aaa;
    49. }
    50. /*牌面定位样式*/
    51. .cardAJ{background-position: -800px 0;}
    52. .cardAQ{background-position: -880px 0;}
    53. .cardAK{background-position: -960px 0;}
    54. .cardBJ{background-position: -800px -120px;}
    55. .cardBQ{background-position: -880px -120px;}
    56. .cardBK{background-position: -960px -120px;}
    57. .cardCJ{background-position: -800px -240px;}
    58. .cardCQ{background-position: -880px -240px;}
    59. .cardCK{background-position: -960px -240px;}
    60. .cardDJ{background-position: -800px -360px;}
    61. .cardDQ{background-position: -880px -360px;}
    62. .cardDK{background-position: -960px -360px;}
    63. .card-flipped .front
    64. {
    65.     /*保证牌底在牌面下面，z-index值切换为小值*/
    66.     z-index:8;
    67.    -webkit-transform: rotateY(180deg);
    68. }
    69. .card-flipped .back
    70. {
    71.     /*保证牌底在牌面上面，z-index值切换为大值*/
    72.     z-index:10;
    73.     /*前面牌面已经翻过去，现在返回来*/
    74.    -webkit-transform: rotateY(0deg);
    75. }
    76. /*移除牌*/
    77. .card-removed{ opacity: 0;}

    2.游戏页面index.htm

    游戏页面中，每张牌的区域是一个id="card"的

    ，其中含上下层有两个
    ，
    是上层显示背面，
    是下层显示牌面。

    1. <div>
    2. <div></div>
    3. <div class="face back"></div>
    4. </div>

    注意，最初仅仅有1个张牌的区域，其余的23张牌的区域是页面加载后复制实现的。页面加载后，首先利用Array.sort()将deck数组存储的牌随机排序，实现洗牌效果。调整CSS坐标属性"left"，"top"，设置每张牌的区域

    在屏幕上位置。最后在每张牌的区域
    中的下层
    添加类别（如.cardAJ，.cardBJ）就可以显示对应牌面。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>html5扑克翻牌消除小游戏</title>
    6. <link href="styles/matchgame.css" rel="stylesheet">
    7. </head>
    8. <body>
    9. <script type="text/javascript"src="matchgame.js"></script>
    10. <script type="text/javascript"src="jquery-1.11.1.min.js"></script>
    11. <section id="game">
    12. <div id="cards">
    13. <div>
    14. <div></div>
    15. <div class="face back"></div>
    16. </div>
    17. </div>
    18. </section>
    19. <script type="text/javascript">
    20. var success=false;
    21. $(document).ready(function(){
    22.          //实现随机洗牌
    23.          matchingGame.deck.sort(shuffle);
    24.          var$card=$(".card");
    25.          for(vari= 0;i<23;i++)
    26.          {
    27.                    $card.clone().appendTo($("#cards"));
    28.          }
    29.          //对每张牌进行设置
    30.          $(".card").each(function(index)
    31.          {
    32.                    //调整坐标
    33.                    $(this).css({
    34.                             "left":(matchingGame.cardWidth+20)*(index%8)+"px",
    35.                             "top":(matchingGame.cardHeight+20)*Math.floor(index/8)+"px"
    36.                    });
    37.                    //从数组deck取一个牌如"cardAK"，"cardBJ"
    38.                    varpattern=matchingGame.deck.pop();
    39.                    //data()方法向被选元素附加数据，这里"pattern"存储牌类别数据如"cardAK"，"cardBJ"。
    40.                    $(this).data("pattern",pattern);
    41.                    //把其翻牌后的对应牌面附加上去，
    42.                  $(this).find(".back").addClass(pattern);//添加类别就可以显示对应牌面
    43.                    $(this).click(selectCard);//指定单击牌事件的功能函数selectCard
    44.          });
    45. });
    46. </script>
    47. <div style="text-align:center;margin:50px0; font:normal 44px/56px ">
    48. <p>扑克翻牌游戏</p>
    49. <div id="timer"></div>
    50. </div>
    51. <script type="text/javascript"language="javascript">
    52. var success=false;
    53. var d1=new Date();//年月日时分秒
    54. var d2=d1.getTime()+2*60*1000
    55. var endDate=new Date(d2);
    56. function daoJiShi()
    57. {
    58.  var now=newDate();
    59.  varoft=Math.round((endDate-now)/1000);
    60.  varofd=parseInt(oft/3600/24);
    61.  varofh=parseInt((oft%(3600*24))/3600);
    62.  varofm=parseInt((oft%3600)/60);
    63.  varofs=oft%60;
    64.  document.getElementById('timer').innerHTML='还有 '+ofm+ ' 分钟 ' +ofs+ ' 秒';
    65.  if(success==true) return;//停止计时
    66.  if(ofs<0){
    67.     document.getElementById('timer').innerHTML='倒计时结束！';
    68.     if(success==false)alert('你挑战失败了！');
    69.      return;
    70.  };
    71.  setTimeout('daoJiShi()',1000);
    72. };
    73. daoJiShi();
    74. </script>
    75. </body>
    76. </html>

    3.设计脚本（matchgame.js）

    定义存储所有的牌的数组deck。

    1. var matchingGame={};
    2. matchingGame.cardWidth=80;//牌宽
    3. matchingGame.cardHeight = 120;
    4. //存储所有的牌
    5. matchingGame.deck=
    6.     [
    7.        "cardAK","cardAK","cardAQ","cardAQ", "cardAJ","cardAJ",
    8.        "cardBK","cardBK","cardBQ","cardBQ", "cardBJ","cardBJ",
    9.        "cardCK", "cardCK", "cardCQ","cardCQ", "cardCJ", "cardCJ",
    10.        "cardDK", "cardDK", "cardDQ","cardDQ", "cardDJ", "cardDJ"      
    11.     ]
    12. //随机排序函数，返回-1或1
    13. function shuffle()
    14. {
    15.    //Math.random能返回0~1之间的数
    16.     returnMath.random()>0.5 ? -1 : 1
    17. }

    单击牌事件的功能函数selectCard()实现翻牌的功能。被翻过的牌都已添加"card-flipped"类别。所以$(".card-flipped")获取所有的翻过牌的

    ，数量超过1则说明已翻了两张牌后则不能再翻牌而退出翻牌。

    若翻动了两张牌，检测是否相同。

    1. function selectCard() {//  翻牌功能的实现
    2.     var$fcard=$(".card-flipped");
    3.     //翻了两张牌后退出翻牌
    4.    if($fcard.length>1)
    5.     {
    6.        return;
    7.     }
    8.    $(this).addClass("card-flipped");
    9. //以下是若翻动了两张牌，检测一致性
    10.     var$fcards=$(".card-flipped");
    11.    if($fcards.length==2)
    12.     {
    13.        setTimeout(function(){
    14. checkPattern($fcards);},700);
    15.     }
    16. }
    17. //检测2张牌是否一致
    18. function checkPattern(cards)
    19. {
    20.     varpattern1 = $(cards[0]).data("pattern");//第1张牌牌面数据
    21.     varpattern2 = $(cards[1]).data("pattern");//第2张牌牌面数据
    22.    $(cards).removeClass("card-flipped");   //删除"card-flipped"类别
    23.    if(pattern1==pattern2)//牌面数据相同
    24.     {
    25.        $(cards).addClass("card-removed")//透明效果
    26.         var$fcards=$(".card-removed");
    27.        if($fcards.length==24)
    28.         {
    29.       alert("恭喜你成功了！");
    30. success=true;
    31.         }
    32.     }
    33. }

    至此就完成扑克翻牌游戏。

  • 相关阅读:
    负载均衡群集
    Jquery 通过class名称属性，匹配元素
    idea菜单栏任务栏放缩比例修改
    OpenGL ES glad 下载和使用
    那些测试员面试中的“潜规则”，千万不要踩坑
    某客户管理系统Oracle RAC节点异常重启问题详细分析记录
    Figma 是什么软件？为什么能被Adobe收购
    使用 SAP UI5 ABAP Repository 部署本地 SAP UI5 应用到 ABAP 服务器的单步调试
    27. Python 列表的索引取值
    计算机毕业设计Java网上汽车售票系统（源码+系统+mysql数据库+Lw文档）
  • 原文地址：https://blog.csdn.net/qq_41640218/article/details/131651992