JavaScript编写连连看
这几天写题比较少，做了一下网页设计的期末大作业。搞了个连连看，核心代码和hdu 1175那个题目一样。
越来越觉得学ACM是十分有用的，软件的核心是数据结构和算法，学会了DFS，连连看就水到渠成了。
下载地址：http://pan.baidu.com/s/1pJspnWR
下面放出源码：
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lianliankan~~~</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body background="images/bj.jpg">
<table width="100%" border="0">
<tr>
<td height="15" align="center" class="zt">连连看</td>
</tr>
</table> <div id="main"></div>
<script type="text/javascript" src="lianliankan.js"></script>
</body>
</html>
js部分：
alert("欢迎来玩连连看~~~~");
alert("请先自定义难度 （要求：(行数*列数)%2==0）！！");
var row=prompt("请输入行数","")-'0';
var col=prompt("请输入列数","")-'0';
var totimage = 13;
var totrow=row+2;
var totcol=col+2;
var ii,jj;
var jieguo;
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var start=h*60*60+m*60+s;
var end;
var zg=row*col;
var mapp = new Array(totcol);
for(var j = 0; j < totcol; j++) mapp[j] = new Array(totrow);
var flag = new Array(totcol);
for(var j = 0; j < totcol; j++) flag[j] = new Array(totrow);
var image = row * col / 2;
var imagesz=new Array(image);
var bianhao=1,nn=0;
for(var i=0;i<image;i++)
{
if(bianhao>totimage) bianhao=1;
imagesz[nn]=bianhao;
imagesz[nn+1]=bianhao;
nn=nn+2;
bianhao++;
}
imagesz=randomOrder(imagesz);
var html="<table>\n";
var n=0;
var c,r;
for(c=0;c<totcol;c++)
{
html += "<tr>\n";
for(r=0;r<totrow;r++)
{
html += "<td>\n";
if(c==0||r==0||r==(totrow-1)||c==(totcol-1)) mapp[c][r]=0;
else
{
mapp[c][r]=imagesz[n];
n++;
html += "<img src=\"images/"+ mapp[c][r] +".jpg\" onclick=\"jiancha(this, " + c + ", " + r + ")\">\n";
}
html += "</td>\n";
}
}
document.getElementById("main").innerHTML = html;
var temp1 = null;
var twopic = new Array({x:0,y:0}, {x:0,y:0});
function jiancha(temp2,x,y)
{
if(mapp[x][y]!=0)
{
if(temp1==null)
{
temp1=temp2;
temp1.parentNode.style.background ="#FFFFFF";
twopic[0].x = x;
twopic[0].y = y;
}
else if(temp2!=temp1)
{
temp1.parentNode.style.background = "transparent";
twopic[1].x = x;
twopic[1].y = y;
if(mapp[twopic[0].x][twopic[0].y]==mapp[twopic[1].x][twopic[1].y])
{
for(ii=0;ii<totcol;ii++)
{
for(jj=0;jj<totrow;jj++)
{
flag[ii][jj]=0;
}
}
flag[twopic[0].x][twopic[0].y]=1;
jieguo=0;
panduan(twopic[0].x,twopic[0].y,0,-1);
if(jieguo==1)
{
mapp[twopic[0].x][twopic[0].y] = 0;
mapp[twopic[1].x][twopic[1].y] = 0;
temp1.parentNode.removeChild(temp1);
temp2.parentNode.removeChild(temp2);
zg=zg-2;
if(zg==0)
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
end=h*60*60+m*60+s;
alert("恭喜你，通关成功，用时："+(end-start)+"秒！！请按F5重新开始游戏！！");
}
}
}
temp1 = null;
}
}
}
var direct =new Array(5);
for(j=0;j<5;j++) direct[j]= new Array(3);
direct[0][0]=1;direct[0][1]=0;
direct[2][0]=-1;direct[2][1]=0;
direct[1][0]=0;direct[1][1]=1;
direct[3][0]=0;direct[3][1]=-1;
//接下来用到的是DFS(深度优先搜索)对两个点进行判断能不能消除
function panduan(nowx,nowy,tj,father)
{
var i;
if(tj>2) return;
if(nowx==twopic[1].x&&nowy==twopic[1].y&&tj<=2)
{
jieguo=1;
return;
}
for(i=0;i<4;i++)
{
var xxx=nowx+direct[i][0];
var yyy=nowy+direct[i][1];
if(xxx>=0&&xxx<totcol&&yyy>=0&&yyy<totrow)
{
if((flag[xxx][yyy]==0&&mapp[xxx][yyy]==0)||(xxx==twopic[1].x&&yyy==twopic[1].y))
{
if(i%2==father%2||father==-1)
{
flag[xxx][yyy]=1;
panduan(xxx,yyy,tj,i);
flag[xxx][yyy]=0;
}
else
{
flag[xxx][yyy]=1;
panduan(xxx,yyy,tj+1,i);
flag[xxx][yyy]=0;
}
}
}
}
}
function randomOrder(targetArray)
{
var arrayLength = targetArray.length
var tempArray1 = new Array();
for (var i = 0; i < arrayLength; i ++)
{
tempArray1[i] = i;
}
var tempArray2 = new Array();
for (var i = 0; i < arrayLength; i ++)
{
tempArray2[i] = tempArray1.splice(Math.floor(Math.random() * tempArray1.length) , 1)
}
var tempArray3 = new Array();
for (var i = 0; i < arrayLength; i ++)
{
tempArray3[i] = targetArray[tempArray2[i]];
}
return tempArray3;
}
CSS部分：
*
{
margin:;
padding:;
font-size:12px;
}
#main table
{
border:0px solid #f0f0f0;
margin:100px auto;
border-collapse:collapse;
}
#main table td
{
width:45px;height:48px;
border:0px solid #f0f0f0;
border-collapse:collapse;
text-align:center;
padding:2px;
}
#main table td img
{
cursor:pointer;
} .zt {
font-size:30px;
font-weight: bold;
text-decoration: none;
color: #666;
font-family: "微软雅黑";
}
JavaScript编写连连看的更多相关文章
- artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- three.js是JavaScript编写的WebGL第 三方库
three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...
- JavaScript编写了一个计时器
初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
在JavaScript中可以使用类的prototype属性来扩展类的属性和方法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...
- JavaScript学习总结(十二)——JavaScript编写类
在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...
随机推荐
- leetcode[50] N-Queens
题目:给定一个n,那么在n*n的棋盘里面放国际象棋的皇后,皇后之间互不在攻击范围.(皇后的攻击范围是她所在位置的哪一行,那一列,和她的正负1的对角线) The n-queens puzzle is t ...
- C#将XML转换成JSON转换XML
原文:C#将XML转换成JSON转换XML using System; using System.Collections.Generic; using System.Linq; using Syste ...
- oracle中sql语句的优化
oracle中sql语句的优化 一.执行顺序及优化细则 1.表名顺序优化 (1) 基础表放下面,当两表进行关联时数据量少的表的表名放右边表或视图: Student_info (30000条数据)D ...
- SQL Server中如何备份存储过程（SP）和函数（Fun）
考虑到安全因素,我们经常需要对数据库的存储过程(SP)和函数(Fun)进行备份 下面提供了一种简单的方式, 存储过程(SP)SQL代码如下: select p.name as SpName,m.def ...
- 【AngularJS】 2.0 版本发布
[AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布 w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...
- error: C1083: 无法打开包括文件:“QDomDocument”“QAxObject”
包含了头文件但是提示无法打开包括文件,是需要在项目的.pro里面手动加上一个变量 针对QAxObject是 QT += axcontainer 针对QDomDocument是 QT ...
- 关于ListView中convertView的缓存个数的探究
在面试的时候经常会被问到一个有关ListView的问题:一个ListView的高度最多可以显示5个item,但是却有20条数据要显示,问最多会有多少个convertView会被复用?或者如在ListV ...
- 2014.3.4-C语言学习小结
位操作: 知识点: 1.位运算符 2.位移运算符 1.将指定位设置为12.将指定位设置为03.获取指定位的内容 ==========================复习二进制 1.二进制转换 10-- ...
- linux下开机启动脚本的方法
1.准备好要随机启动的程序,例如 /root/test.sh .确保其可执行. 2.在目录 /etc/init.d/ 下编写控制脚本 test . #!/bin/sh ### BEGIN INIT I ...
- D5
今天的题目跟前几天的比起来简单了许多 由于T1没有开long long 所以T1全部WA掉了...只悲催的A了第二题 T1:多重背包 其实这一题我真心不会,DP各种弱,简直欲哭无泪... 不过认真的看 ...