這里使用div來布局。具體實(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
})

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

保證只有相鄰才能互換

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

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

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

通過算法保證互換條件

算法看起來會比較亂。簡單的說是通過求余和相除取最小整數(shù)的方式來計(jì)算。

畫幾個表可能就清楚了。

1.在九宮格下每個圖的順序如下。

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

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

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

jquery是什么

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。