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

2023-10-11 11:08
文章标签 使用 生成 轻松 jquery 插件 滑动 简介 拼图游戏 jqpuzzle

本文主要是介绍使用jQuery轻松生成滑动拼图游戏——jqPuzzle插件简介，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

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

 

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

[javascript] view plain copy print ?
  1. <script type="text/javascript" src="jquery.js"></script>   
  2. <script type="text/javascript" src="jquery.jqpuzzle.js"></script>   
  3. <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />  

 

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

[xhtml] view plain copy print ?
  1. <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 plain copy print ?
  1. <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r3-c5-h5" />  

 

德语界面，五行五列：

[xhtml] view plain copy print ?
  1. <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c5" />  

 

四行四列，打乱一次：

[xhtml] view plain copy print ?
  1. <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r4-c4-s1" />  

 

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

[xhtml] view plain copy print ?
  1. <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" />  

 

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

[xhtml] view plain copy print ?
  1. <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c7-SAE" />  

 

 

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

[xhtml] view plain copy print ?
  1. <script type="text/javascript">   
  2. $(document).ready(function() {  
  3. $('img').jqPuzzle(); // apply to all images   
  4. });  
  5. </script>  

 

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

 

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

jqPuzzle(settings, texts)

 

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

[javascript] view plain copy print ?
  1. var settings = {   
  2.     rows: 4,                    // 行数 [3 ... 9]    
  3.     cols: 4,                    // 列数 [3 ... 9]    
  4.     hole: 16,                   // 图眼位置 [1 ... rows*columns]    
  5.     shuffle: false,             // 初始状态打乱图片 [true|false]    
  6.     numbers: true,              // 在拼图上显示数字 [true|false]    
  7.     language: 'en',             // 用户界面代码 [language code]    
  8.    
  9.     // display additional gui controls    
  10.     control: {   
  11.         shufflePieces: true,    // 显示 'Shuffle' 按钮[true|false]    
  12.         confirmShuffle: true,   // 打乱之前询问 [true|false]    
  13.         toggleOriginal: true,   // 显示 'Original' 按钮 [true|false]    
  14.         toggleNumbers: true,    // 显示 'Numbers' 按钮[true|false]    
  15.         counter: true,          // 显示移动步数 [true|false]    
  16.         timer: true,            // 显示计时器 [true|false]    
  17.         pauseTimer: true        // 按下 'Original' 按钮时暂停计数器   
  18.                                 // [true|false]    
  19.     },   
  20.    
  21.     // perform actions when the puzzle is solved sucessfully    
  22.     success: {   
  23.         fadeOriginal: false,    // 原始图像交错淡变 [true|false]    
  24.         callback: undefined,    // 回调用户自定义函数 [function]    
  25.         callbackTimeout: 300    // 回调函数被调用Timeout（单位：毫秒）    
  26.     },   
  27.    
  28.     // animation speeds and settings    
  29.     animation: {   
  30.         shuffleRounds: 3,       // 打乱次数 [1 ... ]    
  31.         shuffleSpeed: 800,      // 每次打乱所用的时间 （单位：毫秒）    
  32.         slidingSpeed: 200,      // 单次移动所用的时间 （单位：毫秒）    
  33.         fadeOriginalSpeed: 600  // 原始图像交错淡变所用的时间 （单位：毫秒）    
  34.     },   
  35.    
  36.     // additional style information not specified via css    
  37.     style: {   
  38.         gridSize: 2,            // 2块拼图之间的间距    
  39.         overlap: true,          // 如果为 true, 相邻两块拼图的边界重叠（仅当gridSize为0时有效）   
  40.         backgroundOpacity: 0.1  // 原始图像的透明度    
  41.                                 // [0 ... 1] (0 意为不显示原始图像)    
  42.     }   
  43. }   

 

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

[javascript] view plain copy print ?
  1. $(document).ready(function() {   
  2.     // 定制您自己的 settings 参数   
  3.     var mySettings = {   
  4.         cols: 5,   
  5.         hole: 11,   
  6.         numbers: false,   
  7.         control: {   
  8.             toggleNumbers: false,   
  9.             counter: false,   
  10.             timer: false   
  11.         },   
  12.         animation: {   
  13.             shuffleRounds: 1,   
  14.             slidingSpeed: 100,   
  15.             shuffleSpeed: 200   
  16.         }   
  17.     };   
  18.     $('#myImage').jqPuzzle(mySettings);   

 

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

[javascript] view plain copy print ?
  1. var texts = {   
  2.     shuffleLabel:           'Shuffle',   
  3.     toggleOriginalLabel:    'Original',   
  4.     toggleNumbersLabel:     'Numbers',   
  5.     confirmShuffleMessage:  'Do you really want to shuffle?',   
  6.     movesLabel:             'moves',   
  7.     secondsLabel:           'seconds'   
  8. }   

 

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

 

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

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

这篇关于使用jQuery轻松生成滑动拼图游戏——jqPuzzle插件简介的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/187614。

相关文章

C++ Sort函数使用场景分析

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序
阅读更多...
Java String字符串的常用使用方法

Java String字符串的常用使用方法

《JavaString字符串的常用使用方法》String是JDK提供的一个类,是引用类型,并不是基本的数据类型,String用于字符串操作,在之前学习c语言的时候,对于一些字符串,会初始化字符数组表... 目录一、什么是String二、如何定义一个String1. 用双引号定义2. 通过构造函数定义三、St
阅读更多...
Pydantic中Optional 和Union类型的使用

Pydantic中Optional 和Union类型的使用

《Pydantic中Optional和Union类型的使用》本文主要介绍了Pydantic中Optional和Union类型的使用,这两者在处理可选字段和多类型字段时尤为重要,文中通过示例代码介绍的... 目录简介Optional 类型Union 类型Optional 和 Union 的组合总结简介Pyd
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
使用Python自建轻量级的HTTP调试工具

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建
阅读更多...
使用Python实现一键隐藏屏幕并锁定输入

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Java利用docx4j+Freemarker生成word文档

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr
阅读更多...
Linux中的计划任务(crontab)使用方式

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》：本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务（crontab）二、crontab基础1、cro
阅读更多...
kotlin中const 和val的区别及使用场景分析

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2