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:0; padding:0; 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: "微软雅黑"; }
