Hot For Coding
JavaScript版拼图游戏

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

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

Demo点这里

拆图

首先,要把图片拆成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图:

full

TITLE: JavaScript版拼图游戏

LINK: https://www.qttc.net/295_javascript_jigsaw.html

NOTE: 转载内容请注明出处