网页拼图游戏

减小字体

增大字体作者：佚名来源：本站整理发布时间：2010-11-30 16:38:03

本程序演示了网页拼图游戏的制作方法

<!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 runat="server">
    <title>翔宇亭乐园——拼图游戏（http://www.biye5u.com）</title>
    <script type="text/javascript">
        var mapBlock=3; //3 * 3 个单元格
        var mapWH=300; //地图的大小
        var tabobj;
        var imgsrc="http://www.biye5u.com/article/UploadPic/2010-11/2010113016375278235.jpg";

        var backgroundPositionArr;

        function createMap()
        {
            backgroundPositionArr=new Array();
            document.getElementById("imgid").src=imgsrc;

            tabobj=document.createElement("table");
            tabobj.style.width=mapWH+"px";
            tabobj.style.height=mapWH+"px";

            tabobj.border="0";
            tabobj.cellspacing="0";
            tabobj.style.backgroundColor="rgb(223,223,223)";

            var tbodyobj=document.createElement("tbody");

            for(var i=0;i<mapBlock;i++)
            {
                var trobj=document.createElement("tr");

                for(var j=0;j<mapBlock;j++)
                {
                    var tdobj=document.createElement("td");
                    tdobj.id=i+"_"+j

                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {
                        tdobj.style.backgroundImage="url("+imgsrc+")";
                        tdobj.style.backgroundRepeat="no-repeat";
                        tdobj.style.backgroundPosition=(-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px";

                        backgroundPositionArr.push((-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px");
                    }

                    var txt=document.createTextNode(" ");
                    tdobj.appendChild(txt);

                    trobj.appendChild(tdobj);
                }

                tbodyobj.appendChild(trobj);
            }

            tabobj.appendChild(tbodyobj);

            document.getElementById("map_div").appendChild(tabobj);

            randomMap();

            setMessageDivSize();

            startDate();
            nowDate();
        }

        function setMessageDivSize()
        {
            document.getElementById("message_div").style.width="180px";
            document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";
        }

        function startDate()
        {
            document.getElementById("startDate").value=new Date().toLocaleTimeString();
        }

        function nowDate()
        {
            document.getElementById("nowDate").value=new Date().toLocaleTimeString();

            setTimeout("nowDate()",1000);
        }

        function yxbs()
        {
            document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;
        }

        function keyDown(e)
        {
            var keyvalue=e.keyCode;

            if(keyvalue==38)   //上
            {
                blockMove(1,0);
            }
            else if(keyvalue==39) //右
            {
                blockMove(0,-1);
            }
            else if(keyvalue==40)   //下
            {
                blockMove(-1,0);
            }
            else if(keyvalue==37) // 左
            {
                blockMove(0,1);
            }
        }

        function blockMove(x,y)
        {
            var blockx=-1;
            var blocky=-1;

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(document.getElementById(i+"_"+j).style.backgroundImage=="")
                    {
                        blockx=i;
                        blocky=j;

                        break;
                    }
                }
                if(blockx!=-1 && blocky!=-1)
                    break;
            }

            if(blockx+x>mapBlock-1 || blockx+x<0 || blocky+y>mapBlock-1 || blocky+y<0)
                return;
            else
            {
                document.getElementById(blockx+"_"+blocky).style.backgroundImage="url("+imgsrc+")";
                document.getElementById(blockx+"_"+blocky).style.backgroundPosition=document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundPosition;
                document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundImage="";

                isWin();
                yxbs();
            }
        }

        function randomMap()
        {
            var randomarr=new Array();
            var maparr=new Array();

            for(var i=0;i<mapBlock*mapBlock-1;i++)
            {
                randomarr[i]=i;
            }

            for(var i=mapBlock*mapBlock-2;i>=0;i--)
            {
                var a=Math.round(Math.random()*i);
                maparr.push(randomarr[a]);

                randomarr.splice(a,1);
            }

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {
                        document.getElementById(i+"_"+j).style.backgroundPosition=backgroundPositionArr[maparr.pop()];
                    }
                }
            }
        }

        function isWin()
        {
            var k=0;
            var iswin=false;

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {//alert(document.getElementById(i+"_"+j).style.backgroundPosition+" == "+backgroundPositionArr[k]);
                        if(document.getElementById(i+"_"+j).style.backgroundPosition==backgroundPositionArr[k])
                        {
                            iswin=true;
                        }
                        else
                        {
                            iswin=false;
                            break;
                        }
                        k++;
                    }
                }