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. Delphi部份函数,命令,属性中文说明

    Abort 函数 引起放弃的意外处理 Abs 函数 绝对值函数 AddExitProc 函数 将一过程添加到运行时库的结束过程表中 Addr 函数 返回指定对象的地址 AdjustLineBreaks ...

  2. 25.Spring @Transactional工作原理

    转自:http://www.importnew.com/12300.html 本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: prop ...

  3. 一个Java8模型的batch队列

    有点小问题,cpu过高,但是思路不错: http://www.tuicool.com/articles/URz2i2q

  4. TCP超时重传机制

    TCP协议在能够发送数据之前就建立起了"连接".要实现这个连接,启动TCP连接的那一方首先将发送一个SYN数据包.这只是一个不包含数据的数据包, 然后,打开SYN标记.如果另一方同 ...

  5. 编程一一C语言问题,指针函数与函数指针

    资料来源于网上: 一.指针函数:指返回值是指针的函数      类型标识符    *函数名(参数表)       int *f(x,y); 首先它是一个函数,只不过这个函数的返回值是一个地址值.函数返 ...

  6. CSS笔记 - fgm练习 2-9 - 播放列表收缩展开

    练习地址: http://www.fgm.cc/learn/lesson2/09.html <style> *{ margin: 0;padding: 0;font-size: 12px; ...

  7. PythonNET网络编程1

    # PythonNET 网络编程 ISO(国际标准化组织) 制定了 OSI(Open System Interconnectio),意为开放式系统互联.国际标准化组织(ISO)制定了OSI模型,该模型 ...

  8. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  9. java并发之生产者消费者模型

    生产者和消费者模型是操作系统中经典的同步问题.该问题最早由Dijkstra提出,用以演示它提出的信号量机制. 经典的生产者和消费者模型的描写叙述是:有一群生产者进程在生产产品.并将这些产品提供给消费者 ...

  10. 如何使stm32程序更好移植, 结构体相当于define

    原创:转载请标注引用地址 如何定义 led1对应于PA8  呢 :对于我一开始学习的方法:: #include "main.h" #define led1      GPIO_Pi ...