九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用js简单写了一个。
游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后，将八张小图片拼接成一个完整的图。
html代码
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style>
body{
border: 0;
}
.out{
width: 606px;
height: 606px;
margin: 0 auto;
border: 1px solid black;
}
.in{
width: 200px;
height: 200px;
background-color:red;
float: left;
border: 1px solid black;
}
.no_see{
width: 200px;
height: 200px;
background-color:white;
float: left;
border: 1px solid black;
}
.btn{
width: 50px;
height: 25px;
margin: 50px auto;
}
.begin{
width: 50px;
height: 25px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>my game</title>
</head>
<body>
<div class="out">
<div class="in"><img src="1.png" alt="" /></div>
<div class="in"><img src="2.png" alt="" /></div>
<div class="in"><img src="3.png" alt="" /></div>
<div class="in"><img src="4.png" alt="" /></div>
<div class="in"><img src="5.png" alt="" /></div>
<div class="in"><img src="6.png" alt="" /></div>
<div class="in"><img src="7.png" alt="" /></div>
<div class="in"><img src="8.png" alt="" /></div>
<div class='no_see'></div>
</div>
</body>
</html>这里使用div来布局。具体实现就不啰嗦了。文章的重点是js的实现。
实现图片的互换
图片的互换其实就是html中的div互换。当点击图片时，和游戏中的空白图进行交换。
$('.in').click(function(){
var t = $(this).clone(); //复制当前点击的div
$('.no_see').before(t); //在空白div的前面插入复制的div
$(this).before($('.no_see')); //把空白div插入到点击div的前面
t.before($(this)) //把点击的div插入到复制div的前面
t.remove(); //移除复制的div
})这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中，发现clone()不会保留js操作节点。也就是点击的div所拥有的class，不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。
保证只有相邻才能互换
