这几天写题比较少，做了一下网页设计的期末大作业。搞了个连连看，核心代码和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. mysql 基础之CURD

    原文:mysql 基础之CURD 增删改查基本语法学习 增: insert Insert 3问: 1: 插入哪张表? 2: 插入哪几列? 3: 这几列分别插入什么值? Insert into Tabl ...

  2. mysql基础之对库表操作

    原文:mysql基础之对库表操作 查看一下所有的库,怎么办? Mysql>Show databases; 选库语句: Use 库名 创建一个数据库: create database 数据库名 [ ...

  3. AjaxPro实现无刷新更新数据

    使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...

  4. Java(5/6和8)中interface和Abstract Class

    这篇文章主要是自己在使用java的过程中对自己一些之前常困惑的问题的一些总结. 正如题目所言,这篇博客主要是讨论java中的接口与抽象类的区别,有自己的使用心得,以及自己平时在使用的过程中遇到的问题及 ...

  5. AutoPostBack通过现象看本质

    在做人事档案管理系统时遇到一个功能需要实现前台数据(实时)与后台进行交互,解决这个问题首先想到的是应用控件的AutoPostBack属性.本以为这个问题就这样解决了(不用javascript.jque ...

  6. C语言练习-学生信息管理系统

    题目要求: 学生信息管理系统struct studentInfo{ int id; char name[128]; int age; char sex; int c_score; int cpp_sc ...

  7. Dynamics CRM 多个Form显示不同的Ribbon按钮

    昨天群里熊宸(Microfoft MVP)给大家分享了以“Dynamics CRM 客户端编程概况”为主题,在群里给大家做了一次精彩的分享. 一些朋友聊到了Ribbon按钮在Form上的显示问题,因为 ...

  8. HTTP method GET is not supported by this URL(转）

    源地址:http://blog.csdn.net/qfs_v/article/details/2545168 Servlet  eroor:HTTP method GET is not support ...

  9. OJ题目JAVA与C运行效率对比

    [JAVA]深深跪了,OJ题目JAVA与C运行效率对比(附带清华北大OJ内存计算的对比) 看了园友的评论之后,我也好奇清橙OJ是怎么计算内存占用的.重新测试的情况附在原文后边. ----------- ...

  10. 一键搭键php网站环境的系统

    QzzmServer v2.0正式版发布 首先,感谢网友的热情的测评及反馈,现QzzmServer 2.0正式版已发布.有些朋友反馈制作一个服务器专用版本,在下已将此列入计划中,敬请大家耐心等候. Q ...