這里使用div來(lái)布局。具體實(shí)現(xiàn)就不啰嗦了。文章的重點(diǎn)是js的實(shí)現(xiàn)。

實(shí)現(xiàn)圖片的互換

圖片的互換其實(shí)就是html中的div互換。當(dāng)點(diǎn)擊圖片時(shí)，和游戲中的空白圖進(jìn)行交換。

$('.in').click(function(){
  var t = $(this).clone(); //復(fù)制當(dāng)前點(diǎn)擊的div
  $('.no_see').before(t); //在空白div的前面插入復(fù)制的div
  $(this).before($('.no_see')); //把空白div插入到點(diǎn)擊div的前面
  t.before($(this)) //把點(diǎn)擊的div插入到復(fù)制div的前面
  t.remove(); //移除復(fù)制的div
})

這里可能會(huì)有疑問(wèn)。為什么后邊要多一步 “把點(diǎn)擊的div插入到復(fù)制div的前面”。測(cè)試過(guò)程中，發(fā)現(xiàn)clone()不會(huì)保留js操作節(jié)點(diǎn)。也就是點(diǎn)擊的div所擁有的class，不能被繼承。所以多這一步是為了點(diǎn)擊過(guò)的div后面還能再繼續(xù)點(diǎn)擊。

保證只有相鄰才能互換

當(dāng)然，只有在空白div旁邊的圖片才能與其互換。不然游戲就太簡(jiǎn)單了。如何實(shí)現(xiàn)？下面先使用一種比較笨的方式來(lái)實(shí)現(xiàn)。

是的，這種方法很蠢，但是可以實(shí)現(xiàn)。通過(guò)數(shù)組的方式，先找到空白div，再查看空白div所在位置四周有哪些位置的圖片可以與其交換。

當(dāng)然，九宮格使用這樣的方式來(lái)實(shí)現(xiàn)沒(méi)有問(wèn)題，畢竟數(shù)組是可列的。但是如果變成16宮格，36宮格呢？先不說(shuō)要去列數(shù)組，還要修改代碼。這樣就很費(fèi)勁了。所以我需要通過(guò)別的方式，讓代碼以后擴(kuò)展更容易。

通過(guò)算法保證互換條件

算法看起來(lái)會(huì)比較亂。簡(jiǎn)單的說(shuō)是通過(guò)求余和相除取最小整數(shù)的方式來(lái)計(jì)算。

畫幾個(gè)表可能就清楚了。

1.在九宮格下每個(gè)圖的順序如下。

2.在九宮格下每個(gè)位置求余后的值如下。

3.在九宮格下每個(gè)位置除法取最小整數(shù)的值如下。

現(xiàn)在看起來(lái)應(yīng)該簡(jiǎn)單多了。當(dāng)取余相等時(shí)，兩個(gè)位置在一列上。當(dāng)除法取最小整數(shù)相等時(shí)，兩個(gè)位置在一行上。
但是此時(shí)還存在一個(gè)問(wèn)題，在一行或者一列上也有可能中間有間隔。所以采取當(dāng)取余相等時(shí)，用除法的結(jié)果+1或者-1。此時(shí)就可以判斷是否有間隔值了。

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開(kāi)發(fā)網(wǎng)站。

以上是“基于jquery如何實(shí)現(xiàn)九宮格拼圖小游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！