都说小时候盼着长大，长大了又念着童年。我怀念起，在那个简简单单的年代，似乎睡前能捧着个诺基亚玩会小游戏也算是当时孩生中一件趣事了，当时玩的比较多的是，拼图，贪吃蛇，桌上弹球等等。想到这里，我就渴望用自己所学的知识，做个拼图游戏出来……

游戏功能

1.游戏主体拼图
2.可更改的游戏难度
3.切换背景图片
4.来首轻松的BGM

游戏思想

1. 从示例图中可以看出，拼图主体是一个网状的方形，我们需要移动拼块来完成图片的复原。我们在这里引入类比思想，我们可以用二维数组的操作去模拟拼块的移动，用增加二维数组的阶数来实现游戏困难程度的提升，那么这里的每一个拼块就是存在数组中的元素。

2. 这是一个游戏刚开始时候的图片，图片中拼块是混乱的，我们需要写一个算法来模拟这种混乱。

(小插曲，我曾经想的很简单，我单纯的认为只是让数组乱序就行了，但是在我实现后，我 发现这是一个重大错误思想。正所谓杂乱无章的武功恰恰有其意想不到的章法，拼图的混 乱也是有规律的，如果给他随机的顺序，就会出现完成拼图后有拼块错位的问题，类似于魔方的角安错位置，因此我们要写的是模拟人为的混乱算法！）——用改变数组的下标来类比四个方位的移动。

1. 脚本中的数组与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，将加个背景音乐，我们的拼图游戏就大功告成了!

功能函数

1. init(num) 初始化html,和数组，不同难度传值不同。
2. begin(arr) 根据数组的存值来操作div类名
3. change(index) 根据div类名改变来操作数组
4. go() 模拟人为打乱
5. winner() 判断胜利条件

项目教训

1. jquery获取的类对象为静态获取，如果切换难度后将导致新生成的div没有添加click事件，所以不能单独拎出拼块对象，应该将click事件写在初始化里面

2. 遇到了事件冒泡问题，我将难度按钮设置为选择难度的子元素，在点击时发生了事件冒泡，在查阅了资料后修正了Bug

3. 类名与写在标签里的位置无关，与在css文件的位置有关如：

    <div class="part-hard part-hard1 bg2"></div>
复制代码

这里part-hard1 和 bg2都定义了一个样式，我曾经以为bg2会覆盖part-hard1,但是事实恰恰相反，因为我在css文件里把bg2写在了part-hard1前面，所以一定要注意啊。

项目源文件都在我的githup里，需要的可以下载。
github.com/colddayer/l…