使用jQuery轻松生成滑动拼图游戏——jqPuzzle插件简介

来源：互联网发布：什么电脑适合编程编辑：程序博客网时间：2024/05/21 20:29

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

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

[javascript] view plaincopyprint?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

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

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle" />

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

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的位置：

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r3-c5-h5" />

德语界面，五行五列：

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c5" />

四行四列，打乱一次：

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r4-c4-s1" />

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

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" />

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

[xhtml] view plaincopyprint?

<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c7-SAE" />

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

[xhtml] view plaincopyprint?

<script type="text/javascript">
$(document).ready(function() {
$('img').jqPuzzle(); // apply to all images
});
</script>

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

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

jqPuzzle(settings, texts)

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

[javascript] view plaincopyprint?

var settings = {
rows: 4, // 行数 [3 ... 9]
cols: 4, // 列数 [3 ... 9]
hole: 16, // 图眼位置 [1 ... rows*columns]
shuffle: false, // 初始状态打乱图片 [true|false]
numbers: true, // 在拼图上显示数字 [true|false]
language: 'en', // 用户界面代码 [language code]
// display additional gui controls
control: {
shufflePieces: true, // 显示 'Shuffle' 按钮[true|false]
confirmShuffle: true, // 打乱之前询问 [true|false]
toggleOriginal: true, // 显示 'Original' 按钮 [true|false]
toggleNumbers: true, // 显示 'Numbers' 按钮[true|false]
counter: true, // 显示移动步数 [true|false]
timer: true, // 显示计时器 [true|false]
pauseTimer: true // 按下 'Original' 按钮时暂停计数器
// [true|false]
},
// perform actions when the puzzle is solved sucessfully
success: {
fadeOriginal: false, // 原始图像交错淡变 [true|false]
callback: undefined, // 回调用户自定义函数 [function]
callbackTimeout: 300 // 回调函数被调用Timeout（单位：毫秒）
},
// animation speeds and settings
animation: {
shuffleRounds: 3, // 打乱次数 [1 ... ]
shuffleSpeed: 800, // 每次打乱所用的时间（单位：毫秒）
slidingSpeed: 200, // 单次移动所用的时间（单位：毫秒）
fadeOriginalSpeed: 600 // 原始图像交错淡变所用的时间（单位：毫秒）
},
// additional style information not specified via css
style: {
gridSize: 2, // 2块拼图之间的间距
overlap: true, // 如果为 true, 相邻两块拼图的边界重叠（仅当gridSize为0时有效）
backgroundOpacity: 0.1 // 原始图像的透明度
// [0 ... 1] (0 意为不显示原始图像)
}
}

var settings = {     rows: 4,                    // 行数 [3 ... 9]     cols: 4,                    // 列数 [3 ... 9]     hole: 16,                   // 图眼位置 [1 ... rows*columns]     shuffle: false,             // 初始状态打乱图片 [true|false]     numbers: true,              // 在拼图上显示数字 [true|false]     language: 'en',             // 用户界面代码 [language code]      // display additional gui controls     control: {         shufflePieces: true,    // 显示 'Shuffle' 按钮[true|false]         confirmShuffle: true,   // 打乱之前询问 [true|false]         toggleOriginal: true,   // 显示 'Original' 按钮 [true|false]         toggleNumbers: true,    // 显示 'Numbers' 按钮[true|false]         counter: true,          // 显示移动步数 [true|false]         timer: true,            // 显示计时器 [true|false]         pauseTimer: true        // 按下 'Original' 按钮时暂停计数器                                // [true|false]     },      // perform actions when the puzzle is solved sucessfully     success: {         fadeOriginal: false,    // 原始图像交错淡变 [true|false]         callback: undefined,    // 回调用户自定义函数 [function]         callbackTimeout: 300    // 回调函数被调用Timeout（单位：毫秒）     },      // animation speeds and settings     animation: {         shuffleRounds: 3,       // 打乱次数 [1 ... ]         shuffleSpeed: 800,      // 每次打乱所用的时间 （单位：毫秒）         slidingSpeed: 200,      // 单次移动所用的时间 （单位：毫秒）         fadeOriginalSpeed: 600  // 原始图像交错淡变所用的时间 （单位：毫秒）     },      // additional style information not specified via css     style: {         gridSize: 2,            // 2块拼图之间的间距         overlap: true,          // 如果为 true, 相邻两块拼图的边界重叠（仅当gridSize为0时有效）        backgroundOpacity: 0.1  // 原始图像的透明度                                 // [0 ... 1] (0 意为不显示原始图像)     } }

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

[javascript] view plaincopyprint?

$(document).ready(function() {
// 定制您自己的 settings 参数
var mySettings = {
cols: 5,
hole: 11,
numbers: false,
control: {
toggleNumbers: false,
counter: false,
timer: false
},
animation: {
shuffleRounds: 1,
slidingSpeed: 100,
shuffleSpeed: 200
}
};
$('#myImage').jqPuzzle(mySettings);

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

[javascript] view plaincopyprint?

var texts = {
shuffleLabel: 'Shuffle',
toggleOriginalLabel: 'Original',
toggleNumbersLabel: 'Numbers',
confirmShuffleMessage: 'Do you really want to shuffle?',
movesLabel: 'moves',
secondsLabel: 'seconds'
}

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

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

下载网址：http://download.csdn.net/source/2063938