设计思路:
设置一个大 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 前端的小伙伴非诚勿扰哦下面是部分资料截图:
来源: http://www.jianshu.com/p/44edec3735a9