zoukankan      html  css  js  c++  java
  • 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>
    ";
    
    var n=0;
    var c,r;
    for(c=0;c<totcol;c++)
    {
        html += "<tr>
    ";
        for(r=0;r<totrow;r++)
        {
            html += "<td>
    ";        
            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 + ")">
    ";
            }
            html += "</td>
    ";
            
        }
    }
    
    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: "微软雅黑";
    }

  • 相关阅读:
    快速排序
    C# String.Format
    理解C++ static
    程序地址空间
    map的实现
    【S4】使用empty()而不是判断size()是否为0
    RHEL6.4 NFS文件共享服务器搭建
    使用UDEV绑定ASM多路径磁盘
    MySQL的启动程序
    [ERROR] Fatal error: Please read "Security" section of the manual to find out how to run mysqld as root!
  • 原文地址:https://www.cnblogs.com/zufezzt/p/4560838.html
Copyright © 2011-2022 走看看