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

posted @ 2015-06-08 14:27 Fighting_Heart 阅读(...) 评论(...) 编辑 收藏