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 >