js实现表格配对小游戏

一、总结

一句话总结：

二、js实现表格配对

1、配对游戏案例说明

  • 实例描述：

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

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

2、截图

3、代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>演示文档-配对游戏</title>
  6     <style type="text/css">
  7     table{  8         margin:15px auto 15px;
  9         background: rgba(60,180,100,0.3);
 10         color: blue;
 11         width: 500px;
 12         height: 500px;
 13     }
 14     hr{ 15             width: 600px;
 16             height: 5px;
 17             background: orange;
 18     }
 19     h2{text-align: center;}
 20     td{ 21         text-align: center;
 22         background: rgba(160,80,10,0.1);
 23         width: 100px;
 24         height: 100px;
 25     }
 26     footer{ 27         margin:0px auto;
 28             text-align: center;
 29             background: rgba(0,100,100,0.2);
 30             padding: 10px;
 31             width: 500px;
 32     }
 33     </style>
 34 </head>
 35 <body>
 36 <h2>配对游戏<hr></h2>
 37     <table>
 38         <script>
 39             var cols=5,rows=4;
 40             for(var i=0;i<rows;i++){
 41                 str="<tr>";
 42                 for(var j=0;j<cols;j++){
 43                     var sid="img"+((cols*i)+j)
 44                     str+='<td  id="'+sid+'" οnclick="showimg('+((cols*i)+j)+')"'+'>'
 45                     str+='</td>'
 46                 }
 47                 str+="</tr>";
 48                 document.write(str)
 49             }
 50         </script>
 51     </table>
 52     <footer>
 53         用时：<span id="gameTime"></span>&nbsp&nbsp&nbsp
 54         <input type="button" value="开始游戏" onclick="init()">
 55     </footer>
 56     <script type="text/javascript">
 57         var length=cols*rows //表格单元格数目
 58         var map=[] //存储单元格里的内容
 59         var user=[] //存储每个单元格是否可以翻开的状态
 60         var times=0;
 61         var newsatrt;
 62         var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
 63         var ctr=0;
 64         var finished;
 65         function $(x){
 66              return document.getElementById(x)
 67         }
 68         for(var i=0;i<length/2;i++){ 69             map[i]=i;
 70             map[length/2+i]=i
 71         }
 72         // alert(map)
 73         function init(){
 74             for (var i=0;i<length;i++){
 75                 $("img"+i).innerHTML=''
 76                 user[i]=0;//是否显示图片，0为显示背面
 77             }
 78             // alert(map)
 79             map.sort(function(){return Math.random()-0.5})
 80             // alert(map)
 81             times=0; //计时器变量清零
 82             $("gameTime").innerHTML=times+'秒'
 83             newsatrt=true; //标记为新开局
 84         }
 85
 86         function showimg(x){
 87             if (newsatrt) {
 88                 start()
 89                 newsatrt=false;
 90             }
 91
 92              $("img"+x).innerHTML=map[x]
 93             // alert(x)
 94             if (ctr==0) {
 95                 ctr++
 96                 firstIndex=x //记录第一张图片索引
 97             }else{
 98                 if (firstIndex!=x) {
 99                 secondIndex=x;//记录第二张图片索引
100                 ctr=0;
101                 check()
102                 }
103             }
104
105
106         }
107
108         function start(){
109             times+=1
110             $("gameTime").innerHTML=times+'秒';
111             setTimeout('start()',1000)
112         }
113
114         function check(){
115             if (map[firstIndex]==map[secondIndex]) {
116                 finished++;
117                 user[firstIndex]=1;
118                 user[secondIndex]=1;//不能再翻
119                 ctr=0;
120             }else if(user[firstIndex]==0){
121                 $('img'+firstIndex).innerHTML=' ';
122                 firstIndex=secondIndex;
123                 secondIndex=0;
124                 ctr++ //标记已经点击了一张
125             }
126             if (finished==length/2) {127                 clearTimeout(startTime);
128                 if(confirm("恭喜你！再来一局？")==true){
129                     init()
130                 }
131             }
132         }
133
134      </script>
135 </body>
136 </html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9144825.html

js实现表格配对小游戏相关推荐

  1. 基于JQuery Flip实现的图片配对小游戏

    背景 先放出效果链接 这里是DEMO! 一个简单的图片配对小游戏,要实现基本的计数功能. 当时的要求是可以用JQuery Flip 这个插件来完成,时间只有五个小时. 好在完成了!记录下! 正文 思路 ...

  2. php 设计五子棋游戏,基于js+canvas实现五子棋小游戏

    本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...

  3. 利用js写的见缝插针小游戏

    利用js写的见缝插针小游戏 今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图 失败时 代码如下 js代码 index.js 测试游 ...

  4. JS实现简单农场小游戏

    JS实现简单农场小游戏 简介 效果展示 代码实现 在线预览 简介 最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...

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

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

  6. HTML+js实现猜字小游戏

    HTML+js实现猜字小游戏 代码实现: <!DOCTYPE html> <html><head><meta charset="utf-8" ...

  7. JS青蛙吃害虫小游戏

    下载地址 JS青蛙吃害虫小游戏是一款简单的HTML5喂青蛙小游戏源码,可以当做微信小程序. dd:

  8. html5小游戏主要用的js,用js+HTML5实现的小游戏-- 捕鱼达人游戏

    大家基本上都玩过捕鱼达人这款游戏吧,下面我就来一个用js+HTML5实现的小游戏 2.[代码] body, p, canvas { image-rendering: optimizeSpeed; -w ...

  9. 使用Pixi.js编写JavaScript网页小游戏

    Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...

  10. Three.js初探之微信小游戏---第一篇

    最近在捣鼓 Three.js 相关知识,同时觉得微信小游戏是个不错的试错场呢.不错,本项目就是为了试错而存在. 先来一张 场景图, 这个格局是不是很眼熟,就是网页游戏2048的变版呢.乍一看,2D的呀 ...

最新文章

  1. 启动ipython出错_python-在异常情况下启动IPython shell
  2. python 读取配置文件config_python中读取配置文件ConfigParser
  3. python中List的sort方法（或者sorted内建函数）的用法
  4. 按窗口文件php代码,在Windows命令行窗口中输入并运行PHP代码片段(不需要php文件)的方法...
  5. C++：从C继承的标准库
  6. （acm）C++加速输入的几种方法
  7. 材料凝固计算机模拟,金属基复合材料凝固过程计算机模拟Ⅲ.pdf
  8. 互联网晚报 | 2月8日 星期二 | 上海微电子交付中国首台光刻机；广东诞生全国首个万亿工业强区；东芝宣布分拆为两家公司...
  9. php中国天气api接口,免费天气预报API接口使用教程（信息来源权威及时）
  10. Linux下iptables屏蔽IP和端口号
  11. Linux之间ssh免密码登录
  12. 新闻管理系统——系统管理员模块(一)
  13. 银行转账java mysql_一个银行转账业务模型分析：大魏Java记5-7
  14. 串行通信的电子密码锁设计全套资料
  15. 新概念英语（第一册）复习（原文及全文翻译）——Lesson 111 - Lesson 130
  16. 压缩图片大小怎么弄？这样压缩不改变清晰度
  17. PyQt5搭建图书馆管理系统（4）——管理员主页设计
  18. 面向对象的基础知识总结
  19. K-means原理、优化及应用
  20. IDEA左侧的project目录中，看不到项目的文件结构图，项目目录不见了

热门文章

  1. 拓端tecdat|R语言中实现层次聚类模型
  2. 基于React和SpringBoot做一个记事本
  3. Spring cloud Gateway介绍
  4. m1芯片 服务器,今天来说说苹果M1 和华为ARM PC芯片
  5. 【算法】常见排序算法效率比较和代码
  6. 2019-02-26-GCN介绍
  7. Python中创建守护进程
  8. 【转载】对SVM的个人理解---浅显易懂
  9. 服务器 通知系统设计,组列表管理服务器的设计与实现
  10. java .class文件和.class文件区别是什么？