前两天，《用JavaScript写了一款贪吃蛇》，接着趁热也写一款JavaScript版的拼图游戏，耗时四个小时，代码两百多行，滑动效果借助于jQuery animate函数，欢迎大家试玩。
拼图相比贪吃蛇，简单多了，但如果逻辑不清晰会容易迷糊，甚至卡死不知道如何继续下去。本文介绍的是九宫拼图，类似其它4乘4格的拼图跟我这里讨论的实现原理一致。
拆图
首先，要把图片拆成9格，这里以150px宽高一格为例子，为了让每一格都能显示不同的区域最终组成一张图片，这里使用创建150宽高div，然后背景图可以这么设置
那么:
- 第一格 background:url(图片.jpg) 0 0;
- 第二格 background:url(图片.jpg) -150px 0;
- 第三格 background:url(图片.jpg) -300px 0;
- 第四格 background:url(图片.jpg) 0 -150px;
用程序可以这么算
var i, k;
for (i = 0, k = 0; i < 9; i++) {
if (i > 0 && i % 3 === 0) {
k++;
}
x = i % 3 * 150;
y = k * 150;
}
通过以上程序即可便利算出没一张图片背景图的xy背景图坐标。
随机打乱
拆完图以后，接下来就要随机打乱顺序，并且默认把其中一格给去掉，实际只需要用的8张拆好的图片。至于去掉哪张通常默认是去掉边角上的，因为边角上的图片一般不显示主体，拼好后看起来还不错。
随机打乱的实现方法有很多种，for循环以后每次随机取一个数组长度内的值，然后交换一下即可。具体可以看我源码
实现点击滑动
在九宫里，有一张是空白的，以实现推动。这个判断的方法简单，甚至可以写死或者利用算法算出来。按照游戏规则，当点击某张图片后只有上下左右是空白的地方才能划过去，而且也只有一个空白的地方，那么得出的结论是点击图片后要么像 左、上、右、下 之一的一个方向滑动。
以这个案例说明，当用户点击某张图片以后，判断是否能滑动其实只要这么做
假设被点击的div为a 空白为b
if (a.x === b.x && Math.abs(a.y - b.y) === 150 || a.y === b.y && Match.abs(a.x - b.x) === 150) {
// 可以滑动
} else {
// 不可以滑动
}
每一次滑动后，都要把空白位置的xy坐标记录，以每一次次点击都能从重新判断
检测是否拼好
这个实现方法有很多，即每移动一次以后，可以遍历每个节点的xy坐标是否与正确的xy坐标匹配即可，如果中途有一个不匹配，那么就说明拼图没有拼好。
最后配上demo图:
