原则：
按照下面的效果图观察和思考开始游戏按钮素材，我们要做的就是设置一个大DIV把小DIV包裹在里面，然后在里面设置8个小DIV，从1开始编号。右边有两个按钮。点击开始计时，完成拼图后停止计时，弹出框提示完成。重启键是当用户觉得当前难度比较难的时候，点击重启开始一个新的拼图，将所有的方块打乱，然后开始计时。
我们的重点是判断当鼠标点击其中一个方格时开始游戏按钮素材，当前方格是否可以移动。如果它可以移动，它将移动到相应的位置。如果无法移动，则什么也做不了。移动一块后，需要判断拼图是否完成。
我们把大DIV想象成一个盒子，它有九个位置，从1开始编号到9，它们的位置和编号不会改变。把里面的8个小DIV想象成8个小盒子，设置top和left让它们控制自己的位置。每个小 DIV 编号从 1 到 8。它们的位置可以随意改变。所以当小DIV的个数和大DIV的个数全部重合时，拼图就完成了。
所以只有一点。这就是判断它是否可移动的方法。这也很简单。我们设置一个一维数组变量来保存大 DIV 中包含的小 DIV 的数量。如果大DIV没有小方块，即为空白块，设置为0。如果当前大DIV有小DIV3D动画，设置为小DIV的编号。然后设置一个二维数组变量来保存大DIV的可移动数。那就是把这个大的DIV保存到它可以去的地方。比如大DIV号是2，只能在1号、3号、5号三个方向移动。再比如5，可以在2、4、6四个方向移动, 和 8. 我们遍历这个变量。如果对应方向没有正方形，即值为0，则可以在这个方向移动。
在puzzle.html 中，我们有以下代码：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Puzzletitle>
<link rel="stylesheet" type="text/css" href="puzzle.css" />
<script type="text/javascript" src="puzzle.js">script>
head>
<body>
<div id="container">
<div id="game">
<div id="d1" onclick="move(1)">1div>
<div id="d2" onclick="move(2)">2div>
<div id="d3" onclick="move(3)">3div>
<div id="d4" onclick="move(4)">4div>
<div id="d5" onclick="move(5)">5div>
<div id="d6" onclick="move(6)">6div>
<div id="d7" onclick="move(7)">7div>
<div id="d8" onclick="move(8)">8div>
div>
<div id="control">
<p>
<rowspan id="timeText">总用时rowspan>
<rowspan id="timer">rowspan>
p>
<p>
<rowspan id="start" onclick="start()">开始rowspan>
<rowspan id="reset" onclick="reset()">重来rowspan>
p>
div>
div>
body>
html>
布局文件完成。在这里，为了简化逻辑，让代码更容易写，我们封装了所有的操作。只要执行move(2)，点击编号为2的小方块，就完成了下面的一系列操作。
写作风格 - CSS
布局完成，现在让我们为游戏设置样式，使其更漂亮。在这一步，大家可以自由发挥，你可以写出自己的风格，让游戏更加美观。也可以添加更多元素来装饰您的游戏。但是要注意，如果游戏DIV的大小发生变化，一定要记得修改js代码像素游戏素材，后面我们会详细讲解。
拼图.css
* {
padding: 0;
margin: 0;
border: 0;
}
/* *是通配符，给所有的元素去掉默认样式，因为有的浏览器会默认加上一些样式，这可能会给布局带来问题 */
body {
width: 100%;
height: 100%;
}
/* 给body设置100%的高度和宽度，这样就会根据浏览器屏幕大小自动适配 */
#container {
position: relative;
width: 620px;
height: 450px;
margin: 0 auto;
margin-top: 100px;
border-radius: 1px;
}
/* 这是包裹所有元素的DIV，给他设置620px的宽和450px的高，这个大小可以设置为更大，但是不能小，至少要能包含里面所有的元素 */
#game {
position: absolute;
width: 450px;
height: 450px;
border-radius: 5px;
display: inline-block;
background-color: #ffe171;
box-shadow: 0 0 10px #ffe171;
}
/* 这是游戏区的DIV，这个大小是计算出来的，取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px，所以这个大小是150px*3，为450px */
#game div {
position: absolute;
width: 149px;
height: 149px;
box-shadow: 1px 1px 2px #777;
background-color: #20a6fa;
color: white;
text-align: center;
font-size: 150px;
line-height: 150px;
cursor: pointer;
-webkit-transition: 0.3s; /*浏览器前缀，兼容其他浏览器 chrome*/
-moz-transition: 0.3s; /*firefox*/
-ms-transition: 0.3s; /*ie*/
-o-transition: 0.3s; /*opera*/
transition: 0.3s;
}
/* 这就是小方块的大小了，定位为绝对定位，这样改变位置不会影响其他元素的位置。宽高都是149px。注意了，我们还设置了box-shadow:1px 1px 2px #777 ；
它还有边框阴影，所以149px 加上边框1px，它的总宽度是150px 下面的transition：0.3s是设置过渡时间，这是css3的属性，它会让属性改变呈现过渡动画，所以
当我们改变方块的位置时，它会有一个动画，我们不必自己编写动画函数，这回让你疯狂*/
#game div:hover {
color: #ffe171;
}
/*给方块设置鼠标悬停动画，当鼠标悬停在元素上面时，会用这里的属性替换上面的属性，移开后又会变为原来的，这里我们是把字体颜色改变*/
#control {
width: 150px;
height: 450px;
display: inline-block;
float: right;
}
/*控制区，display:inline-block会让元素呈现块状元素的特性，使得可以改变大小，同时也会具有行内元素的特性，使得不会占据一行空间，float:right让元素浮动到
右边*/
#control rowspan {
height: 25px;
font-size: 20px;
color: #222;
margin-top: 10px;
}
/*设置控制区按钮的共同样式*/
#start {
display: inline-block;
font-size: 28px;
width: 100px;
height: 28px;
background-color: #20a6fa;
color: #ffe171;
text-shadow: 1px 1px 2px #ffe171;
border-radius: 5px;
box-shadow: 2px 2px 5px #4c98f5;
text-align: center;
cursor: pointer;
}
/*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状，pointer是手型*/
#reset {
display: inline-block;
font-size: 28px;
width: 100px;
height: 28px;
background-color: #20a6fa;
color: #ffe171;
text-shadow: 1px 1px 2px #ffe171; /*字体阴影*/
border-radius: 5px; /*圆角属性*/
box-shadow: 2px 2px 5px #4c98f5; /*盒子阴影*/
text-align: center; /*文字居中*/
cursor: pointer;
}
/*给Reset按钮设置属性*/
#d1 {
left: 0px;
}
#d2 {
left: 150px;
}
#d3 {
left: 300px;
}
#d4 {
top: 150px;
}
#d5 {
top: 150px;
left: 150px;
}
#d6 {
top: 150px;
left: 300px;
}
#d7 {
top: 300px;
}
#d8 {
left: 150px;
top: 300px;
}
/*这是预先给每个小方块按照顺序排好位置*/
嗯，风格也写了。最后，写一段js控制代码，我们的拼图就可以使用了。写风格的时候先跟我来，等你完成了整个游戏，理解了游戏的逻辑后，就可以发挥你的想象力来改变风格，否则可能会出现未知错误。
完成这一步后，打开puzzle.html，应该会看到如下效果：
这里解释一下，因为实现中使用的算法很简单，但是有bug，有50%的概率无法恢复生成顺序。此时只能点击重启。
源码获取：
