puzzle-game

js+html+css实现的拼图游戏

功能点

1. 旋转图片

使用canvas的旋转实现，为提高效率及小方格大小处理，先读取图片并旋转，然后再进行分割处理。

2. 打散图片

为保证可还原性，采用二维数组，将二维数组中的元素逐行逐列随机进行上下或左右移动。

3. 拖动及还原判断

在进行图像分割时记录每个元素的正确顺序，打散后标记每个元素的坐标位置。在进行拖动操作时，坐标差绝对值之和不得大于1(只能相邻元素直接移动)，拖动结束后交换当前元素与目标元素，并更新坐标，同时判断元素顺序是否与初始顺序一致，若一致则还原成功。

参考

• JS操作图片旋转角度并生成新图片

• JS图片压缩和旋转

• JavaScript实现拖动元素交换位置

• 使用js编写实现拼图游戏