1.要实现的内容：
- 图片上传
- 切割图片
- 移动文件选择图标和游戏图片框
- 打乱图片存储的顺序
- 移动乱序的图片
- 交换要移动的图片位置
- 成功提醒
- 实现点击事件
原理：
每个图靠定位放大展示不同的块，选中移动图片到相应位置。（3X3实际是九张相同的图片叠加，每个块展示不同的小块图）
过程：
1.图片上传
查看File API实现可以自主选择要进行拼图的图片
得到上传图片的路径，进行对图片的操作
2.图片切割
通过数组存储正序的图片索引数组 for循环i * 3 + j
创建节点(div)，设置样式，规定每张图片的索引i * 3 + j
设置每张图片的宽高：宽：总大小 / 3
设置每张图的 left：列 * 宽（width * j）
设置每张图的 top：行 * 高（height * i）
设置背景图片路径：上传的图片路径
设置每张背景大小：列*100%
设置每张图片的背景定位：-j * width + (-i) * height
让背景图从边框开始平铺：backgroundOrigin = "border-box";
将创建的div追加到父元素中
3.移动文件选择图标和游戏图片框
将选择文件图标移动到可视区域外
将游戏图片框移入可视区，tansform方法水平居中
设置水平的overflow
绑定点击事件，开始游戏
4.打乱图片索引
设置一个存储乱序的数组
for随机产生一个原数组基础上产生的索引下标，若乱序数组中没有则添加到原数组，若乱序数组中有该索引，则继续产生随机索引
将产生的原来没有的随机索引添加到乱序数组
比较乱序数组与原来数组是否相同，若是相同，则设置标志，退出，重新打乱图片索引
5.移动乱序的图片到正确位置
遍历所有新创建的div元素，设置每个元素的位置
设置 left ：当前元素索引 % 列 * 宽
设置 top：Math.floor（当前元素索引 / 列）*高
这个余数就是当前应该处在第几列（从0开始算）
再乘以一个格子的宽度 就是其left值，乘以一个格子的高度 就是top值
6.交换要移动的图片位置
通过传参，得到选中的两张图片
通过上面提到的 取整取余 的方法得到所选择的两张图片的位置
通过中间变量交换两张图片的位置
若是得到的两个数组的顺序相同，则调用成功函数
7.成功提醒
设置游戏点击标志（完成后可以再次进行）
设置成功提醒
8.实现点击事件
首先设置标志，表示没点击图片的索引状态
判断游戏是否开始（标志）
调用乱序数组，移动图片导致正确位置的方法
设置选中图片的样式（边框）
若是第一次点击图片，则改变他的点击索引状态，设置为当前点击的图片的索引
若是第二次点击，则去除选中样式，调用交换位置函数
若两次点击的图片索引相同，则不执行
结束恢复没点击图片的默认图片索引状态
难点：
图片定位
图片移动
