翻牌游戏（海贼王）

最新推荐文章于 2021-05-22 21:39:43 发布
最新推荐文章于 2021-05-22 21:39:43 发布
阅读量483 收藏 4
点赞数 3
分类专栏： 前端 文章标签： 翻牌游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_h_1122/article/details/98623000
版权

翻牌游戏
技术点：
1.html
2.CSS
3.javascript

效果分析：
1.整个项目的背景颜色为#999999；
2.页面显示为3*10的表格；
3.表格居于窗口的中间；
4.表格有个标题“找相同牌游戏”，位于表格中间；
5.表格中所有的单元格插入相同图片作为背景图。

 

功能分析：
1.页面运行时，所有的牌处于背面显示状态；
2.如果翻的第一张和第二张不一样时，两张牌自动返回背面显示状态；如果一致，则同时显示数字，然后继续翻牌；
3.所有的牌都显示完毕后，弹出一个窗口，显示“用时累计”

第一部分

HTML制表格

<table border="1px" cellpadding="0" cellspacing="1">
            <caption><h2 size="13px">找 相 同 游 戏</h2></caption>
            <tr>
                <td><img src="img/img0.jpg" id="img0" οnclick="fanpai(0)"/></td>
                <td><img src="img/img0.jpg" id="img1" οnclick="fanpai(1)"/></td>
                <td><img src="img/img0.jpg" id="img2" οnclick="fanpai(2)"/></td>
                <td><img src="img/img0.jpg" id="img3" οnclick="fanpai(3)"/></td>
                <td><img src="img/img0.jpg" id="img4" οnclick="fanpai(4)"/></td>
                <td><img src="img/img0.jpg" id="img5" οnclick="fanpai(5)"/></td>
                <td><img src="img/img0.jpg" id="img6" οnclick="fanpai(6)"/></td>
                <td><img src="img/img0.jpg" id="img7" οnclick="fanpai(7)"/></td>
                <td><img src="img/img0.jpg" id="img8" οnclick="fanpai(8)"/></td>
                <td><img src="img/img0.jpg" id="img9" οnclick="fanpai(9)"/></td>    
            </tr>
            <tr>
                 <td><img src="img/img0.jpg" id="img10" οnclick="fanpai(10)"/></td>
                <td><img src="img/img0.jpg" id="img11" οnclick="fanpai(11)"/></td>
                <td><img src="img/img0.jpg"  id="img12" οnclick="fanpai(12)"/></td>
                <td><img src="img/img0.jpg"  id="img13" οnclick="fanpai(13)"/></td>
                <td><img src="img/img0.jpg"  id="img14" οnclick="fanpai(14)"/></td>
                <td><img src="img/img0.jpg"  id="img15" οnclick="fanpai(15)"/></td>
                <td><img src="img/img0.jpg"  id="img16" οnclick="fanpai(16)"/></td>
                <td><img src="img/img0.jpg"  id="img17" οnclick="fanpai(17)"/></td>
                <td><img src="img/img0.jpg"  id="img18" οnclick="fanpai(18)"/></td>
                <td><img src="img/img0.jpg"  id="img19" οnclick="fanpai(19)"/></td>
            </tr>
            <tr>
                <td><img src="img/img0.jpg"  id="img20" οnclick="fanpai(20)"/></td>
                <td><img src="img/img0.jpg"  id="img21" οnclick="fanpai(21)"/></td>
                <td><img src="img/img0.jpg"  id="img22" οnclick="fanpai(22)"/></td>
                <td><img src="img/img0.jpg"  id="img23" οnclick="fanpai(23)"/></td>
                <td><img src="img/img0.jpg"  id="img24" οnclick="fanpai(24)"/></td>
                <td><img src="img/img0.jpg"  id="img25" οnclick="fanpai(25)"/></td>
                <td><img src="img/img0.jpg"  id="img26" οnclick="fanpai(26)"/></td>
                <td><img src="img/img0.jpg"  id="img27" οnclick="fanpai(27)"/></td>
                <td><img src="img/img0.jpg"  id="img28" οnclick="fanpai(28)"/></td>
                <td><img src="img/img0.jpg"  id="img29" οnclick="fanpai(29)"/></td>
            </tr>
        </table>

CSS部分设计

<style type="text/css">
            table{
                border: 1px solid yellow;
                width: 1200px;
                height: 450px;
            }
            td{
                width: 120px;
                height:150px;
            }
            img{
                width: 120px;
                height: 150px;
            }
        </style>

功能实现

1.触发翻牌事件：

（1）翻第一张牌；（2）翻第二张牌；

2.盖牌，再接着翻第一张牌

3.检查牌翻完成功与否

4.洗牌

JS部分代码：

<script type="text/javascript">
        var pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15];
        var flag=false;
        var oneid=-1;
        var index=0;
        function fanpai(id){
            if(pai[id]==-1){return;}
                document.getElementById("img"+id).src="img/"+pai[id]+".jpg";
                if(flag){//翻第2张
                    if(pai[id]==pai[oneid]){pai[id]=-1;pai[oneid]=-1;}
                    else{setTimeout("koupai("+id+","+oneid+")",100);}
                    oneid=-1;
                    flag=false;
                }
                else{//翻第1张
                    oneid=id;
                    flag=true;
                }
                checkSuccess();          
        }
    
        //每次载入页面进行重新洗牌
        function xipai(){
            var a,b,temp;
            for(var i=0;i<30;i++){
                var a=Math.floor(Math.random()*30);
                var b=Math.floor(Math.random()*30);
                temp=pai[a];
                pai[a]=pai[b];
                pai[b]=temp;
            }
        }
        //第一次与第二次不相同，扣住两张牌
        function koupai(id,oneid){
            document.getElementById("img"+id).src="img/img0.jpg";
            document.getElementById("img"+oneid).src="img/img0.jpg";
        }
        //每次翻完两张相同的后，检验是否全部成功翻开
        function checkSuccess(){
            for(var i=0;i<30;i++){
                if(pai[i]!=-1)
                    return;
                }
            alert("Hello 恭喜，恭喜！！！你赢了！！！");
            location.reload();
        }
         xipai();

附加显示时间

 function showTime(){
            var today=new Date();
            var year=today.getFullYear();//获得年
            var month=today.getMonth()+1;//获得月
            var day=today.getDate();//获得日
            var hh=today.getHours();//获得小时
            var mm=today.getMinutes();//获得分钟
            var ss=today.getSeconds();//获得秒    
            document.getElementById("mycolock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
        }
            window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
            window.οnlοad=showTiwanwme;

运行效果展示：

 

 

 

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="img/test.jpg" rel="icon" sizes="any" type="image/x-icon" />
        <title>找相同游戏</title>
        <style type="text/css">
            table{
                border: 1px solid yellow;
                width: 1200px;
                height: 450px;
            }
            td{
                width: 120px;
                height:150px;
            }
            img{
                width: 120px;
                height: 150px;
            }
        </style>
    </head>
    <body bgcolor="#999999">
        <center>
        <table border="1px" cellpadding="0" cellspacing="1">
            <caption><h2 size="13px">找 相 同 游 戏</h2></caption>
            <tr>
                <td><img src="img/img0.jpg" id="img0" οnclick="fanpai(0)"/></td>
                <td><img src="img/img0.jpg" id="img1" οnclick="fanpai(1)"/></td>
                <td><img src="img/img0.jpg" id="img2" οnclick="fanpai(2)"/></td>
                <td><img src="img/img0.jpg" id="img3" οnclick="fanpai(3)"/></td>
                <td><img src="img/img0.jpg" id="img4" οnclick="fanpai(4)"/></td>
                <td><img src="img/img0.jpg" id="img5" οnclick="fanpai(5)"/></td>
                <td><img src="img/img0.jpg" id="img6" οnclick="fanpai(6)"/></td>
                <td><img src="img/img0.jpg" id="img7" οnclick="fanpai(7)"/></td>
                <td><img src="img/img0.jpg" id="img8" οnclick="fanpai(8)"/></td>
                <td><img src="img/img0.jpg" id="img9" οnclick="fanpai(9)"/></td>    
            </tr>
            <tr>
                 <td><img src="img/img0.jpg" id="img10" οnclick="fanpai(10)"/></td>
                <td><img src="img/img0.jpg" id="img11" οnclick="fanpai(11)"/></td>
                <td><img src="img/img0.jpg"  id="img12" οnclick="fanpai(12)"/></td>
                <td><img src="img/img0.jpg"  id="img13" οnclick="fanpai(13)"/></td>
                <td><img src="img/img0.jpg"  id="img14" οnclick="fanpai(14)"/></td>
                <td><img src="img/img0.jpg"  id="img15" οnclick="fanpai(15)"/></td>
                <td><img src="img/img0.jpg"  id="img16" οnclick="fanpai(16)"/></td>
                <td><img src="img/img0.jpg"  id="img17" οnclick="fanpai(17)"/></td>
                <td><img src="img/img0.jpg"  id="img18" οnclick="fanpai(18)"/></td>
                <td><img src="img/img0.jpg"  id="img19" οnclick="fanpai(19)"/></td>
            </tr>
            <tr>
                <td><img src="img/img0.jpg"  id="img20" οnclick="fanpai(20)"/></td>
                <td><img src="img/img0.jpg"  id="img21" οnclick="fanpai(21)"/></td>
                <td><img src="img/img0.jpg"  id="img22" οnclick="fanpai(22)"/></td>
                <td><img src="img/img0.jpg"  id="img23" οnclick="fanpai(23)"/></td>
                <td><img src="img/img0.jpg"  id="img24" οnclick="fanpai(24)"/></td>
                <td><img src="img/img0.jpg"  id="img25" οnclick="fanpai(25)"/></td>
                <td><img src="img/img0.jpg"  id="img26" οnclick="fanpai(26)"/></td>
                <td><img src="img/img0.jpg"  id="img27" οnclick="fanpai(27)"/></td>
                <td><img src="img/img0.jpg"  id="img28" οnclick="fanpai(28)"/></td>
                <td><img src="img/img0.jpg"  id="img29" οnclick="fanpai(29)"/></td>
            </tr>
        </table>
         <br /><br />
         <div id="mycolock"></div>
         </center>
    </body>
    <script type="text/javascript">
        var pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15];
        var flag=false;
        var oneid=-1;
        var index=0;
        function fanpai(id){
            if(pai[id]==-1){return;}
                document.getElementById("img"+id).src="img/"+pai[id]+".jpg";
                if(flag){//翻第2张
                    if(pai[id]==pai[oneid]){pai[id]=-1;pai[oneid]=-1;}
                    else{setTimeout("koupai("+id+","+oneid+")",100);}
                    oneid=-1;
                    flag=false;
                }
                else{//翻第1张
                    oneid=id;
                    flag=true;
                }
                checkSuccess();          
        }
    
        //每次载入页面进行重新洗牌
        function xipai(){
            var a,b,temp;
            for(var i=0;i<30;i++){
                var a=Math.floor(Math.random()*30);
                var b=Math.floor(Math.random()*30);
                temp=pai[a];
                pai[a]=pai[b];
                pai[b]=temp;
            }
        }
        //第一次与第二次不相同，扣住两张牌
        function koupai(id,oneid){
            document.getElementById("img"+id).src="img/img0.jpg";
            document.getElementById("img"+oneid).src="img/img0.jpg";
        }
        //每次翻完两张相同的后，检验是否全部成功翻开
        function checkSuccess(){
            for(var i=0;i<30;i++){
                if(pai[i]!=-1)
                    return;
                }
            alert("Hello 恭喜，恭喜！！！你赢了！！！");
            location.reload();
        }
         xipai();
         
          function showTime(){
            var today=new Date();
            var year=today.getFullYear();//获得年
            var month=today.getMonth()+1;//获得月
            var day=today.getDate();//获得日
            var hh=today.getHours();//获得小时
            var mm=today.getMinutes();//获得分钟
            var ss=today.getSeconds();//获得秒    
            document.getElementById("mycolock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
        }
            window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
            window.οnlοad=showTime;
    </script>    
</html>

 

ACE1125
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS翻牌游戏
12-16
javascript翻牌游戏，html+css+javascript.
翻牌小游戏
weixin_45802798的博客
05-02 388
下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block let wm = document.getElementById("wangmeng"); wm.style.width = 400 + 'px' wm.style.height = 400 + 'px' var num = 0, arr...
翻牌游戏
qq_40818233的博客
08-27 1041
今天小编给大家上传一个翻牌小游戏，话不多说 直接上代码 请读者自己更改图片路径 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;连连看3&lt;/title&gt; &lt;style&
数据结构-翻牌游戏
insertyou
02-09 260
//翻牌游戏//程序：张建波//时间：2005/07/06#include &lt;iostream.h&gt;#include &lt;iomanip.h&gt;void load_pai(); //向数组中写入 牌 序列void Show_Pai(); //向屏幕打印 牌void f_pai(); //翻牌void Show_FP_Pai(int i); //向屏幕输出中间翻牌的过程 状态in...
JS小游戏-仙剑翻牌
weixin_33979745的博客
03-03 129
游戏介绍: 这是一个翻牌配对游戏，共十关。 1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。 2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。 3.游戏共有10关，在规定时间内通过为挑战成功。 4.如果某关在规定时间内没有通过，则会从当前关继续游戏。 5.游戏中的卡牌图片与音乐均为大宇公司所有。 6.需...
翻牌游戏 翻牌之海贼王
11-23
《翻牌游戏 翻牌之海贼王》是一款基于著名动漫《海贼王》的翻牌记忆游戏，旨在测试玩家的记忆力和观察力。在这个游戏中，玩家需要匹配三张一组的图片，每组图片均与《海贼王》中的角色、场景或标志性元素相关。这个...
基于C#的翻牌游戏
03-16
【基于C#的翻牌游戏】是一款利用C#编程语言开发的简单扑克牌翻牌游戏。C#是一种广泛应用于Windows平台、Web应用以及游戏开发的强大编程语言，由微软公司推出，具有面向对象、类型安全、性能高效等特点。在这个项目中...
动态编程语言(python)大作业-记忆翻牌游戏.rar
12-16
在这个“记忆翻牌游戏”项目中，我们可以深入理解Python在游戏开发中的应用，以及如何利用动态编程特性来实现游戏逻辑。 首先，我们要知道记忆翻牌游戏的基本规则。游戏通常包含一定数量的牌面朝下的卡片，每张卡片...
翻牌游戏——0703.rar
07-03
翻牌游戏，通常被称为“对对碰”或“记忆匹配”，是一种广受欢迎的休闲娱乐活动，尤其适合在网页上实现。这款名为“0703”的翻牌游戏是一款基于H5（HTML5）技术开发的在线游戏，充分利用了HTML5、CSS3以及可能的...
翻牌游戏（dfs/状压/暴力）
weixin_43918473的博客
04-27 684
此题来源于同学笔试腾讯的一个题。 有nnn张卡牌，第iii张正面为aia_iai​，反面为bib_ibi​，一开始所有牌都正面朝上，现在可以执行若干操作，每次操作可以选择相邻的牌，交换位置，再翻转它们。求最少的操作次数，使得牌上数字从左到右非降。如果不可做到，输出-1。n<=18n<=18n<=18 传统做法是递归，同学现场递归代码如下。理论复杂度是n!n!n!，剪剪枝就可以过。...
js实现游戏（翻牌游戏）
01-03
js实现游戏（翻牌游戏） 运用了 数组（二维）的 重新 洗牌 setinterval 刷新技术
HTML5制作的翻牌游戏
12-15
这是一个适用于初学者学习与研究的网页翻牌游戏该游戏内设计简单内部附有详细说明值得你的下载
javascript做的翻牌游戏
10-06
javascript做的翻牌游戏,对书写javascript的自定义函数很有帮助
用js实现的翻牌游戏
11-06
完全用js实现的一个简单的翻牌游戏，不错的哦！
JS小游戏-翻牌
07-18
游戏介绍: 这是一个翻牌配对游戏，共十关。 1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。 2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。 3.游戏共有10关，在规定时间内通过为挑战成功。 4.如果某关在规定时间内没有通过，则会从当前关继续游戏。 5.需要支持html5的浏览器，chrome与firefox效果最好。
js 翻牌小游戏
evail_的博客
07-29 2622
js 翻牌小游戏 效果图 需求分析 生成两组顺序随机的1-8数据 卡片需要有翻转效果 两次翻转数据不相等，回复原状 两次翻转数据相等，卡片相等，不能再被点击 当所有卡片不能被点击游戏结束 限制最大点击次数50次 HTML结构 <div class="wrap"> <div> <p class="top"></p> <p class="bottom"></p>
JavaScript+html+css记忆翻牌游戏
aikinlaile的博客
03-16 4884
Memory Game form{ width:330px; margin:20px; background-color:pink; padding:20px; } input{ text-align:right; } var ctx; var firstpick=true; var firstcard; var secondcard; var fron
纸牌游戏c语言 翻牌游戏,纸牌游戏.doc
weixin_42429120的博客
05-22 980
纸牌游戏纸牌游戏摘要纸牌游戏是大家熟知的益智游戏。早期纸牌大部分为数码牌，中国的玩法通常是高点数胜低点数，或以特殊组合牌型取胜，此二原则仍为两大牌戏派别中论计胜负的标准。今天，桥牌已成为高雅的社交与智力活动，反对玩牌的呼声也大为减弱。本文初始令所有牌的状态 =1 正面向上，执行算法时即以2为基数开始判断，对牌号是 2 的倍数的牌翻牌一次，直到最后一张牌；然后，从第 3 张开始，以 3 为基数，是 ...
[一道感觉做过的题]翻牌游戏
nan
03-10 1189
(巨弱写题解不易，转载或沿袭请标明出处) 题面 题目描述 现在有 nn 种图案以及 2n2n 张卡牌，每张卡牌上有一种图案，每种图案对应两张卡牌 一开始卡牌都是面朝下放在桌子上的，玩家每次可以翻开其中两张卡牌： 如果这两张卡牌的图案相同，则这两张牌都会被移除 否则这两张牌必须留在原处，并保持图案向下摆放 现在某位玩家的策略是这样的： 如果知道某些卡牌的图案相同，则优先翻开这些卡牌 否则随机翻开两张...
JS仙剑翻牌游戏源码详解与HTML5实现
本文将详细介绍一款基于JavaScript实现的经典卡牌游戏——仙剑翻牌游戏的源码详解。这款小游戏旨在通过编程手段模拟一个翻牌配对过程，玩家需要在限定时间内找出成对的卡片，以完成每一关的挑战。游戏具有以下特点：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值