基本信息
源码名称：Jquery jqPuzzle插件 实现滑动拼图的小游戏 完整实例源码
源码大小：0.33M
文件格式：.zip
开发语言：js
更新时间：2013-04-07
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

实现滑动拼图游戏，无须切割图片


 

jqPuzzle 这个jQuery插件可以帮助你在自己的网页上轻松生成滑动拼图游戏。选择一张图片放进你的网页中，然后给它来点小小的魔法——jqPuzzle 会帮你把它变成滑动拼图！你还可以根据自己的喜好对这个拼图进行各种定制。太COOL了！

 

使用方法相当的简单。首先，像所有jQuery插件一样，在<head> 标签中引用所需要的文件：

 

然后，在网页中插入一张图片，赋予它一个 jqPuzzle 类，一切OK!

 

 

 

进行过上面的两步之后，您应该可以看到您的拼图了。当然如果愿意，这个插件还有一些选项，允许您对这个拼图进行定制。使用语法如下：

 

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

 

把所有大写字母的单词变成您需要的值即可。另外，中括号[ ]中的部分都是可选的（包括中括号）。具体解释如下：

 

    * LANGUAGE: 界面语言代码。默认是英文。
    * ROWS: 拼图的行数 (从 3 到 9)。
    * COLS: 拼图的列数 (从3 到 9)。
    * HOLE: 拼图中“图眼”的位置（即缺的那一块的位置） (从 1 到 rows*columns), 默认是缺最右下角那块。
    * SHUFFLE ROUNDS: 把原图进行多少次打乱。默认是 3 次

    * FLAGS: 其它选项。您想用多少，就摆上多少，次序无所谓：
          o S: 把拼图的初始状态设为已被打乱。
          o N: 隐藏拼图上的数字。
          o A: 隐藏 'Shuffle' 按钮。
          o B: 隐藏 'Original' 按钮。
          o C: 隐藏 'Numbers' 按钮。
          o D: 隐藏 'moves' 移动步数。
          o E: 隐藏 'seconds' 游戏时间。

 

下面是一些例子：

 

三行五列，图眼在5的位置：

 

德语界面，五行五列：

 

四行四列，打乱一次：

 

法语界面，三行三列，图眼在5位置，初始隐藏拼图上的数字、移动步数和游戏时间：

 

德语界面，五行七列，初始拼图是打乱状态，隐藏“shuffle”按钮和游戏时间：

 

 

用我们熟悉的jQuery方式，在$(document).ready()中调用jqPuzzle()方法，则是另一种使用方式。来个例子：

 

使用这种方式，您可以对jqPuzzle这个插件的所有功能进行控制。

 

至于jqPuzzle()这个方法，可以带两个可选的参数：

jqPuzzle(settings, texts)

 

其中 setting 这个参数的默认值定义如下：

 

如果您需要定制自己的拼图，不用把这个 setting 整个重写一遍，只要指出与默认值不同之处即可。例如：

 

第二个参数 texts 的作用一目了然，就是定义界面上所有的文字内容：

 

此外，这个插件还支持使用CSS文件进行外观样式的修改。我就偷个懒不写了，您自己看看吧。当然最好的学习方法就是先看看演示，再下载这个插件，亲自动手修改各个参数观察变化：

 

演示网址：http://www.2meter3.de/jqPuzzle/demos.html