这里使用div来布局。具体实现就不啰嗦了。文章的重点是js的实现。

实现图片的互换

图片的互换其实就是html中的div互换。当点击图片时，和游戏中的空白图进行交换。

$('.in').click(function(){
  var t = $(this).clone(); //复制当前点击的div
  $('.no_see').before(t); //在空白div的前面插入复制的div
  $(this).before($('.no_see')); //把空白div插入到点击div的前面
  t.before($(this)) //把点击的div插入到复制div的前面
  t.remove(); //移除复制的div
})

这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中，发现clone()不会保留js操作节点。也就是点击的div所拥有的class，不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。

保证只有相邻才能互换

当然，只有在空白div旁边的图片才能与其互换。不然游戏就太简单了。如何实现？下面先使用一种比较笨的方式来实现。

是的，这种方法很蠢，但是可以实现。通过数组的方式，先找到空白div，再查看空白div所在位置四周有哪些位置的图片可以与其交换。

当然，九宫格使用这样的方式来实现没有问题，毕竟数组是可列的。但是如果变成16宫格，36宫格呢？先不说要去列数组，还要修改代码。这样就很费劲了。所以我需要通过别的方式，让代码以后扩展更容易。

通过算法保证互换条件

算法看起来会比较乱。简单的说是通过求余和相除取最小整数的方式来计算。

画几个表可能就清楚了。

1.在九宫格下每个图的顺序如下。

2.在九宫格下每个位置求余后的值如下。

3.在九宫格下每个位置除法取最小整数的值如下。

现在看起来应该简单多了。当取余相等时，两个位置在一列上。当除法取最小整数相等时，两个位置在一行上。
但是此时还存在一个问题，在一行或者一列上也有可能中间有间隔。所以采取当取余相等时，用除法的结果+1或者-1。此时就可以判断是否有间隔值了。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

以上是“基于jquery如何实现九宫格拼图小游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流