pandax-6646 / jigsaw-puzzle

jQuery 面向对象的拼图游戏

拼图小游戏

主要实现功能：

• 图片拖动后位置的变换效果
• 拼图成功进入更难一级游戏
• 游戏计时

技术栈：

• jQuery、面向对象方式编程

实现原理：

• 在多个子元素上利用backgroundPosition来实现多张图片拼成一张完整的图片。

• 根据生成的子元素的数组索引来渲染出一张完整的图片，根据子元素数组的索引乱序来渲染出一张打乱的图片。（根据子元素的left和top值打乱）。

• 子元素发生拖拽，当鼠标在棋盘外，元素不交换位置，并回到原位置；当鼠标在棋盘内，将拖动的元素和当前鼠标位置上的元素的位置发生交换。

具体讲解：

• 初始化页面

  • 根据传进来的行数与列数来生成一个棋盘，第一个for循环可以理解为生成行（i）的空间（没有元素生成），第二个for循环理解为每一行的(每一小列或者说每一个元素（j）)；然后保存当前子元素在父级上（oImgArea）的索引。（因为sort方法改变原数组，所以存了两个，一个是标准的，用于复原图片，一个是用于乱序的，用于打乱图片）。

• 乱序方法

  • 将乱序数组里的数进行乱序，当初始化后由于生成的数组的长度较短，有小概率不能将数组打乱，所以需要多次调用打乱方法。

• 游戏开始

  • 实现点击按钮的变换，给所有子元素实现拖拽；在鼠标点击到子元素时，记录当前点击到的子元素的在标准数组里的索引；
  • 鼠标抬起时，记录鼠标相对于父元素（oImgArea）的坐标，取消事件；
  • 根据上面得到的坐标，调用获取拖拽运动的子元素在鼠标抬起时，鼠标该位置上子元素的在乱序数组里的索引
    • 得到的索引与鼠标点击到子元素的索引相同，就直接调用子元素运动方法，让子元素运动到原来的位置上
    • 得到的索引与鼠标点击到子元素的索引不同，就调用子元素位置交换方法

• 获取拖拽运动的鼠标抬起时该位置上元素的乱序数组里的索引

  • 鼠标的位置越出棋盘
    • 直接返回拖拽的子元素在标准数组里的索引
  • 鼠标的位置在棋盘里
    • 根据鼠标当前相对于父级元素（oImgArea）左顶点为原点的坐标值求出鼠标下面的子元素的索引(未乱序)，再根据这个索引求出该子元素在乱序数组里的索引
    • 梨子: 标准[0, 1, 2，3, 4] --求-->[4, 1, 0, 2, 3]
    • 主要是根据两个数组里的数字是一样的，只是索引的位置不同，假如传进来的索引是3，求法可理解为[4, 1, 0, 2, 3]里第几个的值是3；多理解几遍就知道了。

• 子元素运动函数

  • 这个方法是自己封装的，三个参数分别代表：依照正序数组还是乱序数组进行运动、拖动的元素运动到乱序数组里索引为to的元素上，乱序数组里索引为to的元素远动到乱序数组里索引为from的元素上；

  • 规则就是将数组里的索引转换为行与列，然后再根据子元素的宽和高来求出需要运动到的left和top的值，（注意：在标准数组里index = 标准数组[index],乱序数组里是index = 乱序数组[i]），即： 第（index - index % this.td) / this.td 行，第（index % this.td)列，然后top = 子元素的高 * 行数，left = 子元素 * 列数

  • 如果子元素有位置的调换，就需要将拖动的子元素在乱序数组的索引传入from，然后调换也需要在乱序数组里将这两个值进行调换；如果没有元素位置的调换，那么第三参数的值与第二是参数的值一样，即让拖动的元素回到元素回到原来的位置。

• 渲染进行游戏时间

  • 主要是将一个毫秒时间数字转为00：00：00格式的时间，并在页面刷新一次就渲染一次时间。

• 检测拼图是否成功

  • 将标准数组和乱序数组进行比对，如果两个数组里的数字顺序相同，则拼图成功，然后清空两个数组，进入下一个难度的游戏