javascript拼图游戏

拼图游戏，在ie7 ，火狐，谷歌 测试通过。

HTML code

    
    

     
     <!
     
     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
     
     >
     
     无标题页
     
     </
     
     title
     
     >
     
     
    
     
     <
     
     script 
     
     type
     
     ="text/javascript"
     
     >
     
     
        
     
     var
     
      mapBlock
     
     =
     
     3
     
     ; 
     
     //
     
     3 * 3 个单元格
     
     

     
             
     
     var
     
      mapWH
     
     =
     
     300
     
     ;  
     
     //
     
     地图的大小
     
     

     
             
     
     var
     
      tabobj;
        
     
     var
     
      imgsrc
     
     =
     
     "
     
     http://i3.6.cn/cvbnm/35/b7/8f/4e78358bc9f1b80a62a749d04bf409d8.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
     
     ++
     
     ;
                    }
                }
                
     
     if
     
     (iswin
     
     ==
     
     false
     
     )
                    
     
     break
     
     ;
            }

            
     
     if
     
     (iswin)
            {
                alert(
     
     "
     
     恭喜你赢了！
     
     "
     
     );
                window.location.href
     
     =
     
     window.location.href;
            }
        }

        
     
     function
     
      setGameNan()
        {
            document.getElementById(
     
     "
     
     map_div
     
     "
     
     ).removeChild(tabobj);
            
            mapBlock
     
     =
     
     document.getElementById(
     
     "
     
     yxn
     
     "
     
     ).options[document.getElementById(
     
     "
     
     yxn
     
     "
     
     ).selectedIndex].value
     
     -
     
     0
     
     ;
            createMap();

            tabobj.focus();
        }
    
     
     </
     
     script
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body 
     
     onload
     
     ="createMap()"
     
      onkeydown
     
     ="keyDown(event)"
     
       style
     
     ="font-size:10pt;"
     
     >
     
     
    
     
     <
     
     form 
     
     id
     
     ="form1"
     
     >
     
     
        
     
     <
     
     center
     
     >
     
     
            
     
     <
     
     br
     
     >
     
     
            
     
     <
     
     table
     
     >
     
     
                
     
     <
     
     tr
     
     >
     
     
                    
     
     <
     
     td
     
     >
     
     
                        
     
     <
     
     div 
     
     id
     
     ="map_div"
     
      style
     
     ="border:rgb(231,24,220) solid 1px"
     
     >
     
     
                        
     
     </
     
     div
     
     >
     
     
                    
     
     </
     
     td
     
     >
     
     
                    
     
     <
     
     td
     
     >
     
     
                        
     
     <
     
     div 
     
     id
     
     ="message_div"
     
      style
     
     ="border:rgb(231,24,220) solid 1px"
     
      align
     
     ="center"
     
     >
     
     
                            
     
     <
     
     br
     
     ><
     
     font 
     
     color
     
     ="red"
     
     ><
     
     b
     
     >
     
     拼图游戏
     
     </
     
     b
     
     ></
     
     font
     
     ><
     
     br
     
     >
     
     
                            开始时间:
     
     <
     
     input 
     
     type
     
     ="text"
     
      id
     
     ="startDate"
     
      readonly style
     
     ="width:80px"
     
     ><
     
     br
     
     >
     
     
                            现在时间:
     
     <
     
     input 
     
     type
     
     ="text"
     
      id
     
     ="nowDate"
     
      readonly style
     
     ="width:80px"
     
     ><
     
     br
     
     >
     
     
                            游戏步数:
     
     <
     
     input 
     
     type
     
     ="text"
     
      id
     
     ="yxbs"
     
      readonly value
     
     ="0"
     
      style
     
     ="width:80px"
     
     ><
     
     br
     
     >
     
     
                            游戏难度:
     
     <
     
     select 
     
     id
     
     ="yxn"
     
      style
     
     ="width:86px"
     
      onchange
     
     ="setGameNan()"
     
     >
     
     
                                        
     
     <
     
     option 
     
     value
     
     ="3"
     
     >
     
     3 * 3
     
     </
     
     option
     
     >
     
     
                                        
     
     <
     
     option 
     
     value
     
     ="4"
     
     >
     
     4 * 4
     
     </
     
     option
     
     >
     
     
                                        
     
     <
     
     option 
     
     value
     
     ="5"
     
     >
     
     5 * 5
     
     </
     
     option
     
     >
     
     
                                        
     
     <
     
     option 
     
     value
     
     ="6"
     
     >
     
     6 * 6
     
     </
     
     option
     
     >
     
     
                                        
     
     <
     
     option 
     
     value
     
     ="10"
     
     >
     
     10 * 10
     
     </
     
     option
     
     >
     
     
                                     
     
     </
     
     select
     
     >
     
     
                                     
     
     <
     
     br
     
     ><
     
     br
     
     >
     
     

                            
     
     <
     
     font 
     
     color
     
     ="red"
     
     ><
     
     b
     
     >
     
     游戏规则
     
     </
     
     b
     
     ></
     
     font
     
     ><
     
     br
     
     >
     
     
                            (1)只要拼成如下图你就赢了:
                            
     
     <
     
     br
     
     ><
     
     br
     
     >
     
     
                            
     
     <
     
     img 
     
     id
     
     ="imgid"
     
      width
     
     ="100px"
     
      height
     
     ="100px"
     
      border
     
     ="1"
     
     >
     
     
                        
     
     </
     
     div
     
     >
     
     
                    
     
     </
     
     td
     
     >
     
     
                
     
     </
     
     tr
     
     >
     
     
            
     
     </
     
     table
     
     >
     
     
            
     
     <
     
     br
     
     >
     
     
        
     
     </
     
     center
     
     >
     
     
    
     
     </
     
     form
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >