基于jquery的九宫格益智游戏的实现

九宫格拼图是童年最常见的游戏之一。无聊的时候干脆用js写一个。

这个游戏的玩法很简单。九宫格有八张小图。经过随机置乱，将8张小图片拼接成一张完整的图片。

Html代码

html xmlns=' http://www . w3 . org/1999/XHTML ' XML : lang=' en ' style body { border : 0；} .out { width: 606px高度： 606 px；margin: 0 autoborder: 1px纯黑；} .在{ width: 200px高度： 200 px；背景色：红色；向左浮动：border: 1px纯黑；} .no _请参见{ width: 200px高度： 200 px；背景-颜色：白色；向左浮动：border: 1px纯黑；} .btn { width: 50px高度： 25px；margin: 50px自动；} .begin { width: 50px高度： 25px；}/style head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' title my game/title/head body Div class=' out ' Div class=' in ' img src=' http :1 . png ' alt=' '//Div class=' in ' img src=' http:3 . png ' alt=' '//Div class=' in ' img src=' http:3 . png ' alt='//Div class=' in ' img src=' http:4 . png '。具体实现就不啰嗦了。本文主要研究js的实现。

实现图片的互换

图片交换实际上是html中的div交换。当你点击图片时，用游戏中的空白图片交换。

$('.in ')。单击(function(){ var t=$(this))。clone()；//复制当前单击的div $('。no _ see’)。之前；//插入复制的div $(这个)。在($()之前。空白div前的no _ see ')；//在被点击的div t .之前插入空白div($(this))//在被复制的div t.remove()之前插入被点击的div；//移除复制的div})这里可能有问题。为什么要多走一步“在复制的div前面插入被点击的div”？测试过程中发现clone()没有保留js操作节点。也就是说，不能继承被单击的div所拥有的类。因此，这个额外的步骤是在单击div后继续单击。

确保只有相邻的可以互换

当然，只有空白div旁边的图片可以与之互换。不然游戏会太简单。如何实现？让我们用一种相当愚蠢的方式来实现它。

script $(function(){ var menu={ ' 1 ' :[' 2 '，' 4']，' 2':['1 '，' 3 '，' 5']，' 3':['2 '，' 6']，' 4':['1 '，' 5 '，' 7']，' 5':['2 '，' 4 '，' 6 '，' 8']，' 6':['3 '，' 5 '，' 9']，' 7 ' 3:[' 7 'in ')。click(function(){ var click _ num=$(this))。索引()1；var no_see_num=$('。no _ see’)。索引()1；var arr=menu[no _ see _ num]；If (jquery。inarray (string (click _ num)，arr)='-1 '){//这是不能对换位置的逻辑。你可以做点什么。}else{ var t=$(this)。clone()；$('.no _ see’)。(t)之前；$(这个)。在($()之前。no _ see’)；t . before($(this))t . remove()；} })})/脚本是的，这个方法很蠢，但是可以实现。通过数组的方式，先找到空白div，然后检查空白div周围有哪些图片可以与之交换。

当然，九宫格这样实施是没有问题的。毕竟，阵列是列出来的。但是如果变成16格36格呢？先不说列数组，还要修改代码。所以很难。所以我需要其他的方法来使将来扩展代码变得更容易。

交换条件由算法保证

script $(function(){ $(')。in ')。click(function(){ var tmp=false；var click_num=$(这个)。index()；var no_see_num=$('。no _ see’)。index()；var click _ x=click _ num % 3；var click _ y=math . floor(click _ num/3)；var no _ see _ x=no _ see _ num % 3；var no _ see _ y=math . floor(no _ see _ num/3)；If (click_x==no_see_x) {//同一行if(click _ y==no _ see _ y 1 | | click _ y==no _ see _ y-1){ tmp=true；//确保邻接} }else if (click_y==no_see_y) {//同列if(click _ x==no _ see _ x 1 | | click _ x==no _ see _ x-1){ tmp=true；//确保相邻}} if (tmp) {var t=$(this)。clone()；t . addCLaSS(' bit ')；$('.no _ see’)。(t)之前；$(这个)。在($()之前。no _ see’)；t . before($(this))t . remove()；} })})/脚本算法看起来会很乱。简单来说，就是求余数取最小的整数除以。

画几张表，可能就清楚了。

1.九格下各图顺序如下。

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

3.将九宫格中的每个位置进行划分，取最小整数值如下。

现在看起来应该简单多了。当余数相等时，两个位置在一列中。当除法中最小的整数相等时，这两个位置在一条线上。不过，这个时候还是有问题的。一行或一列的中间可能有间隙。因此，当余数相等时，除法的结果是1或-1。此时可以判断是否存在区间值。

最后的

在这里，游戏的主体就完成了。当然，如果你想丰富游戏，可以添加计时器，完成步骤等等。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。