效果如下：

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的珠暉網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

代碼如下：

 
 
 


 

 
  

  
   
1
   
   
2
   
3
   
4
   
5
   
6
   
7
   
8
  
  

  
   

    總用時(shí)
    
   
   
   

    開(kāi)始
    重來(lái)
   
   
  
 
 

設(shè)計(jì)思路：

我們要做的就是設(shè)置一個(gè)大 DIV 用來(lái)包裹里面的小 DIV，然后在里面設(shè)置 8 個(gè)小 DIV，從 1 開(kāi)始給他們編號(hào)。右邊設(shè)置兩個(gè)按鈕，點(diǎn)擊開(kāi)始的時(shí)候開(kāi)始計(jì)時(shí)，完成拼圖后停止計(jì)時(shí)，并彈出一個(gè)框，提示完成了。重來(lái)按鈕是當(dāng)用戶覺(jué)得當(dāng)前有難度的時(shí)候，點(diǎn)擊重來(lái)可以重新開(kāi)始一個(gè)新的拼圖，把所有方塊打亂順序，然后開(kāi)始計(jì)時(shí)。我們的重點(diǎn)就是當(dāng)鼠標(biāo)點(diǎn)擊其中一個(gè)方塊時(shí)，要判斷當(dāng)前方塊是否可移動(dòng)，如果可移動(dòng)，則移動(dòng)到相應(yīng)的位置，如不可移動(dòng)，則不做任何事。當(dāng)移動(dòng)完一塊后，要判斷是否完成拼圖。我們把那個(gè)大 DIV 想象成一個(gè)盒子，它有九個(gè)位置，從 1 開(kāi)始，到9編號(hào)，他們的位置和編號(hào)都是不會(huì)變的。把里面的 8 個(gè)小 DIV 想象成 8 個(gè)小盒子，給他們?cè)O(shè)置 top 和 left 就可以控制他們的位置。每個(gè)小 DIV 從 1 開(kāi)始到 8 編號(hào)。他們的位置是可以隨意改變的。所以當(dāng)小 DIV 的編號(hào)和大 DIV 的編號(hào)全部重合時(shí)，就完成了拼圖。

所以重點(diǎn)就只有一個(gè)了。那就是如何判斷是否可移動(dòng)。這個(gè)也簡(jiǎn)單。我們?cè)O(shè)置一個(gè)一維數(shù)組變量，用來(lái)保存大 DIV 它里面裝的小 DIV 的編號(hào)。如果大 DIV 沒(méi)有小方塊，也就表面它是空白塊，那么就設(shè)為 0。如果當(dāng)前大 DIV 有小 DIV，那就設(shè)置為小 DIV 的編號(hào)。然后再設(shè)置一個(gè)二維數(shù)組變量，用來(lái)保存大 DIV 的可移動(dòng)編號(hào)。也就是保存這個(gè)大 DIV 它所有的可去的位置。比如大 DIV 編號(hào)為 2 的，它只能向 1號(hào)，3號(hào)，5號(hào)這三個(gè)方向移動(dòng)。又比如 5，它能向 2、4、6、8 這四個(gè)方向移動(dòng)。我們循環(huán)遍歷這個(gè)變量，如果對(duì)應(yīng)的方向它 沒(méi)有方塊，也就是值為 0，那么它就可以往這個(gè)方向移動(dòng)了。

提示：因?yàn)閷?shí)驗(yàn)中使用的隨機(jī)打亂方塊的算法非常簡(jiǎn)單，但是存在 bug，有 50% 的概率生成的順序是無(wú)法復(fù)原的，這個(gè)時(shí)候就只能點(diǎn)擊重新開(kāi)始。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！