这几天写题比较少,做了一下网页设计的期末大作业。搞了个连连看,核心代码和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编写连连看的更多相关文章

  1. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  2. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  3. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. three.js是JavaScript编写的WebGL第 三方库

    three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...

  5. JavaScript编写了一个计时器

    初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...

  6. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  7. canvas :原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  8. JavaScript学习总结(十四)——JavaScript编写类的扩展方法

    在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...

  9. JavaScript学习总结(十二)——JavaScript编写类

    在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...

随机推荐

  1. UVA10537 Toll! Revisited

    difkstra + 路径输出 The Toll! Revisited Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & ...

  2. php中的$_GET怎样获取带有井号“#”的參数

    <?php echo $_GET['key']; ?> 当url为http://test.com/c.php?key=999时,正常输出:999 当url为http://test.com/ ...

  3. [Dev Blog] KCV插件 —— Provissy Tools 。

    承蒙各位支持! 正式版已推出,请前往http://tieba.baidu.com/p/3398574166 或者前往:http://provissy.com/?p=7 请不要在这里回复,我无法保证回复 ...

  4. Unity3D开发必备神器(Visual Studio Tools for Unity)

    Unity3D开发必备神器(Visual Studio Tools for Unity) 开发Unity3D程序你用的什么IDE呢? 1.MonoDevelop 2.VS 可能你的回答是这样的,我用的 ...

  5. 清空SQL Server数据库中所有表数据的方法

    原文:清空SQL Server数据库中所有表数据的方法 其实删除数据库中数据的方法并不复杂,为什么我还要多此一举呢,一是我这里介绍的是删除数据库的所有数据,因为数据之间可能形成相互约束关系,删除操作可 ...

  6. [翻译]初识SQL Server 2005 Reporting Services Part 4

    原文:[翻译]初识SQL Server 2005 Reporting Services Part 4 这一篇是关于SQL Server 2005 Reporting Services四篇文章中最后一篇 ...

  7. BitMap画图

    package com.example.examples_05_07; import android.content.Context; import android.graphics.Bitmap; ...

  8. 在线web编辑器

    真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...

  9. 大数据工具篇之Hive与MySQL整合完整教程

    大数据工具篇之Hive与MySQL整合完整教程 一.引言 Hive元数据存储可以放到RDBMS数据库中,本文以Hive与MySQL数据库的整合为目标,详细说明Hive与MySQL的整合方法. 二.安装 ...

  10. Asp.Net Web Api 与 Andriod 接口对接开发

    Asp.Net Web Api 与 Andriod 接口对接开发经验,给小伙伴分享一下!   最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用A ...