都说小时候盼着长大，长大了又念着童年。我怀念起，在那个简简单单的年代，似乎睡前能捧着个诺基亚玩会小游戏也算是当时孩生中一件趣事了，当时玩的比较多的是，拼图，贪吃蛇，桌上弹球等等。想到这里，我就渴望用自己所学的知识，做个拼图游戏出来……
游戏功能
1.游戏主体拼图
2.可更改的游戏难度
3.切换背景图片
4.来首轻松的BGM
游戏思想
-
从示例图中可以看出，拼图主体是一个网状的方形，我们需要移动拼块来完成图片的复原。我们在这里引入类比思想，我们可以用二维数组的操作去模拟拼块的移动，用增加二维数组的阶数来实现游戏困难程度的提升，那么这里的每一个拼块就是存在数组中的元素。
-
这是一个游戏刚开始时候的图片，图片中拼块是混乱的，我们需要写一个算法来模拟这种混乱。
(小插曲，我曾经想的很简单，我单纯的认为只是让数组乱序就行了，但是在我实现后，我 发现这是一个重大错误思想。正所谓杂乱无章的武功恰恰有其意想不到的章法，拼图的混 乱也是有规律的，如果给他随机的顺序，就会出现完成拼图后有拼块错位的问题，类似于魔方的角安错位置，因此我们要写的是模拟人为的混乱算法！）——用改变数组的下标来类比四个方位的移动。
- 脚本中的数组与HTML中盒子的连接，当盒子状态改变时，同时改变数组内容。
游戏实现
游戏初始
由于游戏中默认是最低难度，所以我们在这里就以最低难度为背景来制作。
在html中写一个容器container，在script里写一个3*3二维数组。使用循环给container添加9个类名为part-ease的div。给数组从1到8赋值，最后一个设为 "" 代表拼图的缺口。给part-ease类定义样式，定义9个类part-ease1到8最后一个为empty。
（注意事项：要将background-size，x,y方向都设为300%，因为part-ease的高度都定义为容器的三分之一，他的背景图理应也是1/3，所以，对放大3倍的图片进行position操作，才是原图的那一块图片，但是我不知道为何，就算不设置300%所得的图片也只是比原图少了一小部分……）。
效果图
自走算法
声明两个变量x,y，分别为二维数组的前置坐标和后置坐标的变化量。
向左走：x = -1，y = 0
向右走：x = +1，y = 0
向上走：x = 0，y = -1
向下走：x = 0，y = +1
使用switch来选择，将四种方向设为4个case，0到3，定义一个0到3的随机数来执行向哪个方向走。将switch选择置于while循环，定义一个计数器，每次执行有效步数，计数器+1，并同步数组值的交换操作，当计数器达到一定值后结束。
不同难度可以改变计数器的最大值已达到合理的混乱程度。（注意事项，避免数组越域，根据实际情况，可以设置一个值记录上次的走向，让拼块避免往返走节省循环浪费）
dom的操作
因为每一块的图片都是定义在类名里，所以改变拼块就是改变类名，对part-ease进行监听，发生鼠标事件，且是有效拼块时，将其part-ease(位置数字)与empty交换即可，同时改变二维数组的值。
这里插入一个一位数组位置转二维数组位置的算法，因为这个被点击的拼块返回的index是一个它在同为part-ease的一维数组的index所以需要转化。
二维前置坐标 = (index / 数组阶数) 的向下取整
二维后置坐标 = index - 二维前置坐标 * 阶数
拼图完成
只要数组的元素回到[1,2,3,4,5,6,7,8,""]的排列就可以判定拼图成功啦！拼图成功后，图片的缺口将会变成失去的那部分，并提醒。
拼图完成按钮操作
在html中给container写一个兄弟盒子用来存储按钮，分别为重新开始，选择难度，更换图片，查看原图。
效果图 重新开始：重新调用自走功能 选择难度：出现简单，中等，困难选择按钮，点击后，数组和拼图盒子都将初始化 效果图 中等难度 困难难度 更换图片：更改类名随机切换图片，并阻止使用原来图片 效果图 查看原图：对比原图进行游戏，点击返回，隐藏图片美化
最后我们更改css，将加个背景音乐，我们的拼图游戏就大功告成了!
功能函数
- init(num) 初始化html,和数组，不同难度传值不同。
- begin(arr) 根据数组的存值来操作div类名
- change(index) 根据div类名改变来操作数组
- go() 模拟人为打乱
- winner() 判断胜利条件
项目教训
-
jquery获取的类对象为静态获取，如果切换难度后将导致新生成的div没有添加click事件，所以不能单独拎出拼块对象，应该将click事件写在初始化里面
-
遇到了事件冒泡问题，我将难度按钮设置为选择难度的子元素，在点击时发生了事件冒泡，在查阅了资料后修正了Bug
-
类名与写在标签里的位置无关，与在css文件的位置有关如：
"part-hard part-hard1 bg2">
复制代码这里part-hard1 和 bg2都定义了一个样式，我曾经以为bg2会覆盖part-hard1,但是事实恰恰相反，因为我在css文件里把bg2写在了part-hard1前面，所以一定要注意啊。
项目源文件都在我的githup里，需要的可以下载。
github.com/colddayer/l…