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. ubuntu-工作环境配置（van）

    我们平时用到的工具主要vim,retag_app,提交代码,以及一些常用命令,他们主要对应一下几个文件 1.vim ->.vimrc 2.代码提交->gitconfig 3.常用命令-&g ...

  2. docker进入容器的几种方法

    一 启动进入容器指定bash 退出后容器关闭 [root@Centos-node3 ~]# docker run -it centos bash [root@83c6b25aca09 /]# 二 do ...

  3. v-for实现循环嵌套

    <!DOCTYPE html> <html lang="en"> <head> <title></title> < ...

  4. Python 极简教程（七）列表 list

    由于列表过于重要,请认真看完并保证所有代码都敲过一遍. 什么是列表 列表是 Python 中最常用的数据结构,也是一种数据类型,其样式如下: li = [1, 2, 3, 'a', 'b'] 列表是一 ...

  5. 怎么做好看的html5游戏界面

    怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...

  6. 使用ajax发送图片等文件

    1.使用H5的FormData()对象,append()添加文件 2.processData: false, // 告诉jQuery不要去处理发送的数据    contentType: false, ...

  7. ntp 服务器

    ntp.sjtu.edu.cn 202.120.2.101 (上海交通大学网络中心NTP服务器地址)s1a.time.edu.cn 北京邮电大学s1b.time.edu.cn 清华大学s1c.time ...

  8. qemu 参数简介

    参数 示例 说明 -hda -hda /data/windows.img 指定windows.img作为硬盘镜像 -cdrom -cdrom /data/windows.iso 指定windows.i ...

  9. 挖一挖不经常使用到而又非常有用的重载-Split

    Split这个基本上全部的程序开发者都用到,一般使用单字符和长字符串拆分字符串的较多.事实上另一个重载很好用.那就是多种组合字符来进行拆分. 比如: "aaaaaaaaaa{@}bbbbbb ...

  10. LA 3644 - X-Plosives ( 也即UVA 1160)

    LA看题 请点击:传送门 UVA 上也有这题 :UVA 1160 - X-Plosives 题目大意就是如果车上存在 k 个简单化合物,正好包含 k 种元素 ,那么它们将有危险,此时你应该拒绝装车. ...