基于javascript制作经典传统的拼图游戏

本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码，供大家参考，具体内容如下

效果图：

拼出你喜欢的白雪公主和七个小矮人

实现代码：

 
  
   
  
  
  
   
  
   
  
*{ margin-bottom:0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 0px;
}
  
#box{    

      position:absolute;
      top:0px;
      left:0px;
      width: 300px;
      height: 300px;
      border: 1px solid red;
}
 
#box img{
  float:left;
  width: 100px;
  height: 100px;
}
 
 
#box .pj,#box .p2,#box .p3,#box .p4,#box .p5,#box .p6,#box .p7,#box .p8,#box .p9{
  position: absolute;
}
 
#box .pj,#box .p2,#box .p3{
  top:0px;
}
 
#box .p4,#box .p5,#box .p6{
  top:100px;
}
 
#box .p7,#box .p8,#box .p9{
  top:200px;
}
 
#box .pj,#box .p4,#box .p7{
left:0px;
}
 
#box .p2,#box .p5,#box .p8{
left:100px;
}
 
#box .p3,#box .p6,#box .p9{
left:200px;
}
 
#button{
 font-size:25px;
 font-weight:20px;
 float: left;
 position: absolute;
 top:400px;
 left:100px;
}
 
#output{
  position:absolute;
  width: 270px;
  height: 170px;
  top:130px; 
  left: 350px;
}
 
#output img{
 height: 170px;
 width:170px;
 float: right;
}
 
#notice{
 position: absolute;
 left: 650px;
 top:150px;
 width: 150px;
 height: 120px;
 border: 1px solid blue;
 font-size: 15px;
}
 
 
 
  
 
 
  
 
  
   
    
      

  
   
     
 
  
 
 目标图形：
 
 
 
 
 游戏提示：

 

 点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时，即可移动方块。。