2013-03-27

JavaScript版拼图游戏

前两天，《用JavaScript写了一款贪吃蛇》，接着趁热也写一款JavaScript版的拼图游戏，耗时四个小时，代码两百多行，滑动效果借助于jQuery animate函数，欢迎大家试玩。

拼图相比贪吃蛇，简单多了，但如果逻辑不清晰会容易迷糊，甚至卡死不知道如何继续下去。本文介绍的是九宫拼图，类似其它4乘4格的拼图跟我这里讨论的实现原理一致。

拆图

首先，要把图片拆成9格，这里以150px宽高一格为例子，为了让每一格都能显示不同的区域最终组成一张图片，这里使用创建150宽高div，然后背景图可以这么设置

那么:

用程序可以这么算

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图:

full