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. HDU 3131 One…Two…Five! （暴力搜索）

    题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...

  2. UVa 11015 - 05-2 Rendezvous

    題目:有一個班級的學生要一起寫作業,所以他們要到一個統一的地點.現在給你他們各自的位置, 問集合地點定在哪,能够讓全部人走的總路徑長度最小. 分析:圖論.最短路.直接利用Floyd計算最短路,找到和值 ...

  3. Spring RootBeanDefinition，ChildBeanDefinition，GenericBeanDefinition

    转自:https://blog.csdn.net/joenqc/article/details/68942972 RootBeanDefinition,ChildBeanDefinition,Gene ...

  4. 1.7 Python基础知识 - 模块初识

    在Python中有很多模块,模块对应的就是python源代码文件.模块中有Python程序自己附带的标准模块,还有很多其他人共享的第三方模块.模块中可以定义变量.函数和类.而多个功能类似的模块可以组织 ...

  5. Redis原理（二）

    运维 快照使用子进程是通过一个子进程完成, 它会比较的浪费资源的操作. 1.遍历整个内存,会增加系统负担. 2.io操作,降低redis性能. 一般都是主备,备用的进行持久化. Redis 4.0混合 ...

  6. [selenium]-处理滚动条

    转载于:https://blog.csdn.net/lilongsy/article/details/76142497 1.先把driver 强制转换为js,如下 JavascriptExecutor ...

  7. 常用加密算法的Java实现总结(二)

    常用加密算法的Java实现总结(二) ——对称加密算法DES.3DES和AES 摘自:http://www.blogjava.net/amigoxie/archive/2014/07/06/41550 ...

  8. Flask项目之手机端租房网站的实战开发（二）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  9. Cocos2d-X开发中国象棋《八》走棋

    在上一节中实现了新局,至此中国象棋的准备工作差点儿相同都完毕了,在接下来的博客中将介绍玩家的走棋和一些游戏属性的设置,今天先介绍走棋和走棋规则 老规则,先看走棋的效果图,然后依据效果图一步一步分析游戏 ...

  10. ARM+linux学习过程（2）安装vmware-tool过程与错误解决

    安装: 点击Ubuntu VMware菜单的-VM-Install VMware Tools 这时,在Ubuntu下会自动加载Linux版的VMware Tools的安装光盘镜像.你会看到虚拟机的桌面 ...