使用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。

相关文章

如何使用celery进行异步处理和定时任务(django)

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery
阅读更多...
使用Python绘制蛇年春节祝福艺术图

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》：本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3
阅读更多...
Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单

Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单

《Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单》：本文主要介绍Springboot的ThreadPoolTaskScheduler线... 目录ThreadPoolTaskScheduler线程池实现15分钟不操作自动取消订单概要1，创建订单后
阅读更多...
Jsoncpp的安装与使用方式

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数
阅读更多...
python使用watchdog实现文件资源监控

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用，其生态环境也
阅读更多...
Python中构建终端应用界面利器Blessed模块的使用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
springboot整合 xxl-job及使用步骤

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面，确认是否启动成功
阅读更多...
使用Nginx来共享文件的详细教程

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中，我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —
阅读更多...
Java中switch-case结构的使用方法举例详解

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》：本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者
阅读更多...
Golang使用minio替代文件系统的实战教程

Golang使用minio替代文件系统的实战教程

《Golang使用minio替代文件系统的实战教程》本文讨论项目开发中直接文件系统的限制或不足,接着介绍Minio对象存储的优势,同时给出Golang的实际示例代码,包括初始化客户端、读取minio对... 目录文件系统 vs Minio文件系统不足：对象存储：miniogolang连接Minio配置Min
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2