js实现表格配对小游戏
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>   
<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实现表格配对小游戏的更多相关文章
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- 原生js写的flybird小游戏
游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html> <!-- This ...
- css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...
- 从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）
回顾 上一节我们搭建了游戏的骨架,添加了四个游戏场景,分别是加载.开始.游戏.结束.那么这一节我们来介绍加载这个场景,顺带丰富一下各个场景的基本内容. Phaser.Loader Phaser框架自带 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- js实现点气球小游戏
二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- js 考记忆力得小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 面向对象 打气球小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- setInterval()第一个参数带引号和不带引号的区别
setInterval()第一个参数带引号和不带引号的区别:关于定时函数setInterval()的基本用法这里就不做介绍了,查阅相关教程即可,这里主要介绍一下setInterval()函数的第一个参 ...
- JSP中的EL表达式详细介绍
一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 JSP 文件中嵌入 Java 代码的元素.它们通常用于对象操作以及执行那些 ...
- 洛谷—— P1069 细胞分裂
https://www.luogu.org/problem/show?pid=1069#sub 题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家.现在,他正在为一个细 ...
- 洛谷 P1657 选书
P1657 选书 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是每人有两本喜欢的书.老师事先让每个人将自己喜欢的书填写在一张表上.然后 ...
- 防止登录页面出如今frame中
在使用frame页面嵌套开发的时候,遇到重新启动了server的时候会出现登录页面在frame页面中出现, 所以须要在登录页面里面用js推断下当前的地址信息,然后跳转到登录的单独页面中. js代码例如 ...
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境
打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...
- SQL Server2008 Hierarchyid数据类型
以往我们在关系数据库中建立树状结构的时候,通常使用ID+ParentID来实现两条 纪录间的父子关系.但这种方式只能标示其相对位置.解决这类问题在SqlServer2005出现之前通常是采用游标来操作 ...
- 关于android的2.2与4.4的文件读取的一点发现
好久没有写文章了,本来想写的东西,时间一长,就感觉不想写了.没什么用,到用时.又不知道去哪找了或怎么解决. 有一句话说的好啊,好记性不如烂笔头. 我要做到善于总结.及时整理,额............ ...
- 对照jQuery和AngularJS的不同思维模
对照jQuery和AngularJS的不同思维模 Question 如果我已经熟悉了怎样使用jQuery来开发client应用.我如今打算使用AngularJS.请描写叙述一下有那些思维模式方面的东西 ...
- Android应用性能优化系列视图篇——隐藏在资源图片中的内存杀手
图片加载性能优化永远是Android领域中一个无法绕过的话题,经过数年的发展,涌现了很多成熟的图片加载开源库,比如Fresco.Picasso.UIL等等,使得图片加载不再是一个头疼的问题,并且大幅降 ...