jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的jQuery插件。该插件通过jQueryUI来实现图片的拖拽，你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。它的特点有：

  • 可以调游戏的整难度级别
  • 可以在响应式设计的页面中使用
  • 支持拖拽
  • 提供游戏成功后的回调函数

拼图游戏

使用方法

该图片拼图游戏插件依赖于jQueryUI，在使用时需要引入jQuery，jQueryUI和jquery.snap-puzzle.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.snap-puzzle.js"></script>
调用插件

在页面DOM元素加载完毕之后，你可以在任何图片上调用snapPuzzle()方法来初始化该拼图游戏插件。

$(selector).snapPuzzle({key1: value1, key2: value2});

配置参数

该拼图游戏插件接收键值对对象作为参数，下面是可用的配置参数。

  • pile：默认值：null。图片碎片容器的选择器。
  • containment：默认值：'document'。限制图片碎片在某个元素中。
  • rows：默认值：5。图片碎片的行数。
  • columns：默认值：5。图片碎片的列数。
  • onComplete(elem)：当拼图游戏成功完成之后的回调函数。

应用举例

$('img.puzzle').snapPuzzle({ rows: 4, columns: 3 })