js实现表格配对小游戏

一、总结

一句话总结：

二、js实现表格配对

1、配对游戏案例说明

  • 实例描述：

    当用户点击两个相同的图案或字符后配对成功，全部配对成功后游戏获胜

    案例008采用了大家常见的小游戏来帮助大家提高应用JS解决实际问题的能力，需要说明的是该案例在很大程度上做了简化，大家课下练习的时候可以发挥自己的想象力进一步来完善该游戏

2、截图

3、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档-配对游戏</title>

     <style type="text/css">

     table{

         margin:15px auto 15px;

         background: rgba(60,180,100,0.3);

         color: blue;

         width: 500px;

         height: 500px;

     }

     hr{

             width: 600px;

             height: 5px;

             background: orange;

     }

     h2{text-align: center;}

     td{

         text-align: center;

         background: rgba(160,80,10,0.1);

         width: 100px;

         height: 100px;

     }

     footer{

         margin:0px auto;

             text-align: center;

             background: rgba(0,100,100,0.2);

             padding: 10px;

             width: 500px;

     }

     </style>

 </head>

 <body>

 <h2>配对游戏<hr></h2>

     <table>

         <script>

             var cols=5,rows=4;

             for(var i=0;i<rows;i++){

                 str="<tr>";

                 for(var j=0;j<cols;j++){

                     var sid="img"+((cols*i)+j)

                     str+='<td  id="'+sid+'" onclick="showimg('+((cols*i)+j)+')"'+'>'

                     str+='</td>'

                 }

                 str+="</tr>";

                 document.write(str)

             }

         </script>

     </table>

     <footer>

         用时：<span id="gameTime"></span>&nbsp&nbsp&nbsp

         <input type="button" value="开始游戏" onclick="init()">

     </footer>

     <script type="text/javascript">

         var length=cols*rows //表格单元格数目

         var map=[] //存储单元格里的内容

         var user=[] //存储每个单元格是否可以翻开的状态

         var times=0;

         var newsatrt;

         var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引

         var ctr=0;

         var finished;

         function $(x){

              return document.getElementById(x)

         }

         for(var i=0;i<length/2;i++){

             map[i]=i;

             map[length/2+i]=i

         }

         // alert(map)

         function init(){

             for (var i=0;i<length;i++){

                 $("img"+i).innerHTML=''

                 user[i]=0;//是否显示图片，0为显示背面

             }

             // alert(map)

             map.sort(function(){return Math.random()-0.5})

             // alert(map)

             times=0; //计时器变量清零

             $("gameTime").innerHTML=times+'秒'

             newsatrt=true; //标记为新开局

         }

         function showimg(x){

             if (newsatrt) {

                 start()

                 newsatrt=false;

             }

              $("img"+x).innerHTML=map[x]

             // alert(x)

             if (ctr==0) {

                 ctr++

                 firstIndex=x //记录第一张图片索引

             }else{

                 if (firstIndex!=x) {

                 secondIndex=x;//记录第二张图片索引

                 ctr=0;

                 check()

                 }

             }

         }

         function start(){

             times+=1

             $("gameTime").innerHTML=times+'秒';

             setTimeout('start()',1000)

         }

         function check(){

             if (map[firstIndex]==map[secondIndex]) {

                 finished++;

                 user[firstIndex]=1;

                 user[secondIndex]=1;//不能再翻

                 ctr=0;

             }else if(user[firstIndex]==0){

                 $('img'+firstIndex).innerHTML=' ';

                 firstIndex=secondIndex;

                 secondIndex=0;

                 ctr++ //标记已经点击了一张

             }

             if (finished==length/2) {

                 clearTimeout(startTime);

                 if(confirm("恭喜你！再来一局？")==true){

                     init()

                 }

             }

         }

      </script>

 </body>

 </html>

js实现表格配对小游戏的更多相关文章

  1. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  2. JS实现植物大战僵尸小游戏，代码记录及效果展示

    前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址

  3. 原生js写的flybird小游戏

    游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html>   <!-- This ...

  4. css3+jquery+js做的翻翻乐小游戏

    主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...

  5. 从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）

    回顾 上一节我们搭建了游戏的骨架,添加了四个游戏场景,分别是加载.开始.游戏.结束.那么这一节我们来介绍加载这个场景,顺带丰富一下各个场景的基本内容. Phaser.Loader Phaser框架自带 ...

  6. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  7. js实现点气球小游戏

    二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. js 考记忆力得小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 面向对象 打气球小游戏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. caffe 在 windows 下的配置（scripts\build_win.cmd）

    官网配置文档见:GitHub - BVLC/caffe at windows 1. windows 设置 requirements: visual studio 2013/2015 CMake > ...

  2. SqlParameter的用法

    SqlParameter的用法 关于Sql注入的基本概念,相信不需多说,大家都清楚,经典的注入语句是' or 1=1--单引号而截断字符串,“or 1=1”的永真式的出现使得表的一些信息被暴露出来,如 ...

  3. vue权限控制菜单显示的简单实现

    为了对于不同角色显示不同的菜单 思路1: 本地放一份完整的菜单数据,通过后台返回角色的菜单列表.两者对比,筛选需要显示的菜单数据绑定, 这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输 ...

  4. Valgrind的用法

    Valgrind是执行在Linux上一套基于仿真技术的程序调试和分析工具,它包括一个内核──一个软件合成的CPU,和一系列的小工具,每一个工具都能够完毕一项任务──调试.分析,或測试等. Valgri ...

  5. 展示C代码覆盖率的gcovr工具简单介绍及相关命令使用演示样例

    (本人正在參加2015博客之星评选,诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...

  6. C#基础数据类型与字节数组（内存中的数据格式）相互转换（BitConverter 类）

      在某种通讯协议中(如 Modbus),可能需要把一些基本的数据类型内存中的表示形式转换成以字节数组的形式,方便传送.C/C++中可以利用指针等操作完成,但C#中没有指针,咋办呢?可以用BitCon ...

  7. set_fix_multiple_port_nets

    set_fix_multiple_port_nets   -all    -buffer_constants 加上这个命令之后 综合之后的网表就不会出现assign语句 否则会出现

  8. linux下设置密码复杂度限制，怎么设置？

    在linux,设置密码复杂度的方法有几个1. 一个是在/etc/login.defs文件,里面几个选项PASS_MAX_DAYS 90 #密码最长过期天数PASS_MIN_DAYS 80 #密码最小过 ...

  9. 让自己的软件实现拖拽打开文件（覆盖WM_DROPFILES，使用DragQueryFile，DragFinish API函数）

    作者: 帅宏军 //声明 protected    procedure WMDROPFILES(var Msg : TMessage); message WM_DROPFILES; --------- ...

  10. mybatis+springmvc缓存设置

    开始接触mybatis,本以为缓存设置好麻烦,在网上找了好多相关的资料,说得也都好复杂,经过自己亲自实践,其实很简单的. 首先引入需要的jar包,参照pom.xml配置: <!-- 缓存设置 s ...