javascript 拼图游戏

puzzle.js 

 

//节点对象 
function Node(id) 
{ 
    this.ID=id; 
    this.Top=null; 
    this.Bottom=null; 
    this.Left=null; 
    this.Right=null; 

    //当前节点与节点xNode是否相邻 
    this.IsAdjacent=function(xNode) 
    { 
        if(this.Top==xNode || this.Bottom==xNode || this.Left==xNode || this.Right==xNode) 
        return true; 
        return false 
    } 

    //在图g中id为idx的节点和id为idy节点是否在同一行 
    this.IsSameRow=function(g,idx,idy) 
    { 
        return parseInt(idx/g.colCount)==parseInt(idy/g.colCount); 
    } 

    //将当前图片链接到图中同时递归创建图 
    this.LinkToGraphics=function(g) 
    { 
        if(this.Top==null && this.ID-g.colCount>=0) 
        {  
            this.Top=g.GetNode(this.ID-g.colCount); 
            this.Top.Bottom=this; 
            this.Top.LinkToGraphics(g); 
        } 

        if(this.Bottom==null && this.ID+g.colCount<=g.nodeCount-1) 
        { 
            this.Bottom=g.GetNode(this.ID+g.colCount); 
            this.Bottom.Top=this; 
            this.Bottom.LinkToGraphics(g); 
        } 
        if(this.Left==null && this.IsSameRow(g,this.ID-1,this.ID) && this.ID-1>=0) 
        { 
            this.Left=g.GetNode(this.ID-1); 
            this.Left.Right=this; 
            this.Left.LinkToGraphics(g); 
        } 
        if(this.Right==null && this.IsSameRow(g,this.ID+1,this.ID) && this.ID+1<=g.nodeCount-2) 
        { 
            this.Right=g.GetNode(this.ID+1); 
            this.Right.Left=this; 
            this.Right.LinkToGraphics(g); 
        } 
    } 
} 


//节点连接后的图对象 
function Graphics(nc,cc) 
{ 
    this.nodeCount=nc;    //节点数 
    this.colCount=cc;    //列数 

    this.NodeArray=new Array(this.nodeCount); 

    //定位到某一节点 
    this.GetNode=function(j) 
    { 
        if(this.NodeArray[j]==null) this.NodeArray[j]=new Node(j); 
        return this.NodeArray[j]; 
    } 

    this.NodeArray[this.nodeCount-1]=new Node(this.nodeCount-1); 
    //用于交换的节点 
    this.SwapNode=this.NodeArray[this.nodeCount-1] 

    //将交换节点连接到图中 
    this.SwapNode.LinkToGraphics(this); 
} 


var gps; 
var elapse=0;         

window.onload=function() 
{ 
    //创建有17格每行四列的拼图 
    gps=new Graphics(17,4); 
     
    for(var i=0;i<gps.nodeCount;i++) 
    { 
        document.images[i].id=i; 
        document.images[i].src="res/"+i+".jpg"; 

        document.images[i].onclick=function() 
        { 
            var cid=this.id; 
            var sid=gps.SwapNode.ID; 
            var tmp; 
             
            //如果当前图片与空白相邻则与空白交换 
            if(gps.GetNode(cid).IsAdjacent(gps.SwapNode)) 
            { 
                tmp=document.images[cid].src; 
                document.images[cid].src=document.images[sid].src; 
                document.images[sid].src=tmp; 
                gps.SwapNode=gps.GetNode(cid); 
            } 
        } 
    } 
} 

//开始 
function Start() 
{ 
    elapse=0; 
    Confuse(document.all["Level"].value);     
    CheckWin();    //启动成功检查 
} 

//打乱顺序 
function Confuse(level) 
{ 
    for(var i=0;i<gps.nodeCount-1;i++) 
        document.images[i].src="res/"+Level[level][i]+".jpg"; 
    document.images[gps.nodeCount-1].src="res/"+(gps.nodeCount-1)+".jpg"; 
    gps.SwapNode=gps.GetNode(gps.nodeCount-1); 
} 

//对图片打乱的四个级别 
var Level= 
{ 
    child:        new Array(0,1,2,3,4,5,6,7,9,10,14,11,12,8,13,15), 
    easy:        new Array(1,2,3,7,0,5,6,11,4,9,10,15,12,8,13,14), 
    normal:        new Array(3,10,7,6,2,0,11,5,1,15,8,14,12,9,4,13), 
    hard:        new Array(3,7,6,5,8,9,0,11,15,10,14,13,12,1,2,4) 
} 

//检查是否已经排列成功 
function CheckWin() 
{ 
    elapse++; 
    document.all["Msg"].innerHTML=elapse; 
     
    //如果交换图片未在最后一格则停止检查 
    if(gps.SwapNode.ID==gps.nodeCount-1) 
    { 
        var isWin=true; 
        for(var i=0;i<gps.nodeCount-1;i++) 
        { 
            if(document.images[i].src.indexOf("/"+i+".")==-1)  
            { 
                isWin=false; 
                break; 
            } 
        } 
        if(isWin)  
        { 
            document.all["Msg"].innerHTML="你已经成功!"; 
            return; 
        } 
    } 
    window.setTimeout("CheckWin()",1000); 
} 

 puzzle.css

 

table 
{}{ 
    border-collapse:collapse; 
    border-color:#D4D0C8; 
    border-width:4px; 
    border-style:solid; 
} 
 
img 
{}{ 
 height:72; 
 width:50; 
} 
 
span,input,select 
{}{ 
    font-family:Arial; 
    font-size:9pt; 
    font-weight:bold; 
} 
 
#Msg 
{}{ 
    Color:red; 
} 

 

puzzle.htm

 

<html> 
<head> 
    <title>Puzzle</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <link type="text/css" rel="stylesheet" href="res/puzzle.css"> 
     <HTA:APPLICATION SCROLL="no" INNERBORDER="no" CONTEXTMENU="no" SINGLEINSTANCE="yes" BORDERSTYLE="sunken" BORDER="thin"/> 
    <SCRIPT LANGUAGE="JavaScript" src="res/puzzle.js"></SCRIPT> 
</head> 
    <body>  
            <h4>拼图</h4> 
            <select size="1" name="Level"> 
                <option value="child">child</option> 
                <option value="easy">easy</option> 
                <option selected value="normal">normal</option> 
                <option value="hard">hard</option> 
            </select> 
            <input type=button onclick="Start()" value=" 开始 "> <span id="Msg"></span><hr size=1> 
            <table cellspacing="0" cellpadding="0" border="1" align="center"> 
                <tr> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                </tr> 
                <tr> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                </tr> 
                <tr> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                </tr> 
                <tr> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                    <td><img></td> 
                </tr> 
                <tr> 
                    <td><img></td> 
                    <td colspan="3" bgcolor="#D4D0C8"></td> 
                </tr> 
            </table>  
    </body> 
</html>