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. drawerLayout-监听事件四个方法介绍

    1.首先我们看一下它的监听事件的生命周期 代码如下 mDrawerLayout.setDrawerListener(new DrawerListener() { @Override public vo ...

  2. 1.1 Introduction中 Apache Kafka™ is a distributed streaming platform. What exactly does that mean?（官网剖析）（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Apache Kafka™ is a distributed streaming p ...

  3. nuxt按需引入 element-UI、自定义主题色（终极按需引入）

    首先你要知道 nuxt.js怎么引入第三方插件 : 不多BB. 一.按需引入element-UI 第一步:安装 babel-plugin-component: npm install babel-pl ...

  4. Ubuntu14.04中踩过的坑

    今天安装Ubuntu 14.0.4,因为需要使用python3,所以就直接配置如下:sudo rm /usr/bin/pythonsudo ln -s /usr/bin/python3.5  /usr ...

  5. MSDN上的异步socket 服务端例子

    MSDN上的异步socket 服务端例子 2006-11-22 17:12:01|  分类: 代码学习 |  标签: |字号大中小 订阅     Imports SystemImports Syste ...

  6. c#下halcon配置

    1.在halcon中写入算子,实现函数过程 比如: read_image(Image,'D:/MyFile/halcon/数字识别/1.jpg') decompose3(Image, ImageR, ...

  7. JS实现动画的四条优化方法

    JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

  8. Python中的Sets数据结构

    Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...

  9. 3dmax入门

    动画 自己主动关键帧 设置关键帧 路径绑定 材质M打开 渲染f10 骨骼绑定. ..

  10. C语言深度剖析-----内存管理的艺术

    动态内存分配 为什么使用动态内存分配 例:记录卖出的商品 卖出商品最多只能记录1000个 两种改进的方法 都需要动态内存分配 第二种方法需要重置内存 calloc和realloc realloc重置内 ...