Question

九宫格拼图教程一步一步图解

Answer 1

九宫格拼图教程一步一步图解如下：

1. 九宫格拼图的起点比较简单，我们一定要从外围开始拼。1号和2号拼图比较容易就可以归位，第三块拼图相对较难。

2. 我们将3号拼图移动到正确位置的相邻位置，此时不能直接将3号拼图归位。我们要先将拼图全部下移，为1好拼图留下空间。

3. 1号拼图有空间后，就可以直接向右移动，然后2号拼图跟着1号拼图移动。这样3号拼图周围就没有干扰的拼图，可以为3号拼图提供换位的空间。

4. 直接以3号拼图为中心，将3块拼图进行顺时针或者逆时针的换位，直到3号拼图进入到正确的位置。随后2号拼图和1号拼图原路返回。

5. 完成前3号拼图的复原后，我们就可以先放置4号拼图。5号拼图类似3号拼图，放置到正确位置的附近后，为1号拼图留下空间。

6.完成后，将所有拼图原路返回进行复原，这样九宫格拼图的外围就全部完成。内部剩下的3个拼图，直接旋转，就可以恢复到正确的位置。

将1张图采用3*3的方式，分成9部分，将第3行3列的小图取出，打乱剩余的8个部分的位置，然后开始游戏，将打乱的8个位置的图片通过左右挪动的方式复位，成功后，将第9张图归位，即游戏结束。.

编程时同样采取了这个逻辑，将切割后的小图片存放入容器中，然后随机拜访，给每一张小图设置点击事件，点击后可根据所缺空隙进行挪动，直到全部正确归位为止，我引入了计时功能，可以记录完成游戏时间。