设计思路：
设置一个大 DIV 用来包裹里面的小 DIV，然后在里面设置 8 个小 DIV，从 1 开始给他们编号。右边设置两个按钮，点击开始的时候开始计时，完成拼图后停止计时，并弹出一个框，提示完成了。
重来按钮是当用户觉得当前有难度的时候，点击重来可以重新开始一个新的拼图，把所有方块打乱顺序，然后开始计时。
重点：如何判断是否可移动？
设置一个一维数组变量，用来保存大 DIV 它里面装的小 DIV 的编号。如果大 DIV 没有小方块，也就表面它是空白块，那么就设为 0。如果当前大 DIV 有小 DIV，那就设置为小 DIV 的编号。然后再设置一个二维数组变量，用来保存大 DIV 的可移动编号。也就是保存这个大 DIV 它所有的可去的位置。比如大 DIV 编号为 2 的，它只能向 1号，3号，5号这三个方向移动。又比如 5，它能向 2、4、6、8 这四个方向移动。我们循环遍历这个变量，如果对应的方向它 没有方块，也就是值为 0，那么它就可以往这个方向移动了。
效果如下：
代码如下：
如果有想学习web前端的同学，可来我们的web前端技术学习QQ群：608334068，免费送整套系统的web前端视频教程！我每晚上8点还会在群内直播讲解前端知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图：
欢迎关注胖胖爱前端的简书号，可视化学习web前端，每天更新文章，让web前端学习更加简单。
声明：本文内容来源于网络，如有侵权请联系删除
网友评论