JavaScript版拼图游戏

JavaScript 2013-03-27 JavaScript,拼图,游戏,jQuery,animat

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

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

DEMO 地址 http://www.qttc.net/static/demo/pintu20130326/

一、拆图

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

那么:

第一格 background:url(图片.jpg) 0 0;

第二格 background:url(图片.jpg)  -150px 0;

第三格 background:url(图片.jpg)  -300px 0;

第四格 background:url(图片.jpg) 0 -150px;

...

用程序可以这么算

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 or a.y==b.y && Match.abs(a.x-b.x)==150

// 可以滑动

else

// 不可以滑动

每一次滑动后,都要把空白位置的xy坐标记录,以每一次次点击都能从重新判断

四、检测是否拼好

这个实现方法有很多,即每移动一次以后,可以遍历每个节点的xy坐标是否与正确的xy坐标匹配即可,如果中途有一个不匹配,那么就说明拼图没有拼好。

 

最后配上demo图:

 

文字链接:《JavaScript版拼图游戏

文章地址:http://www.qttc.net/201303295.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1