本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码，供大家参考，具体内容如下
效果图：
拼出你喜欢的白雪公主和七个小矮人
实现代码：
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="this is my page">
<Meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
*{ 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 .p3{
top:0px;
}
Box .p4,#Box .p6{
top:100px;
}
Box .p7,#Box .p9{
top:200px;
}
Box .pj,#Box .p7{
left:0px;
}
Box .p2,#Box .p8{
left:100px;
}
Box .p3,#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;
}
<img class="pj" src="img1/pj.png">
<img class="p2" src="img1/p2.png">
<img class="p3" src="img1/p3.png">
<img class="p4" src="img1/p4.png">
<img class="p5" src="img1/p5.png">
<img class="p6" src="img1/p6.png">
<img class="p7" src="img1/p7.png">
<img class="p8" src="img1/p8.png">
<img class="p9" src="img1/p9.png">
<div id="output">
目标图形：
<img alt="" src="img1/output.jpg">
<div id="notice">
游戏提示：
点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时，即可移动方块。。
