JavaScript版拼圖小游戲

慕課網上准備開個新的jQuery教程，花了3天空閑時間寫了一個Javascript版的拼圖小游戲，作為新教程配套的分析案例

拼圖游戲網上有不少的實現案例了，但是此源碼是我自己的實現，所以不做太多的比較

在線預覽(Chrome)：http://sandbox.runjs.cn/show/pcwfu7i5

 

拼圖游戲其實挺簡單，主要是涉及到一些細節的處理，以下是我的自己在實現中涉及到的問題：

1. 圖片的切割與拼接
2. 如何隨機布局
3. 如何切換圖片
4. 拖動圖片溢出處理
5. 怎么知道圖片是否還原成功

 

實現思路：

為了簡單，我只做了3組選擇，3*3 ， 6*6 ， 9*9 當然你要設4*4都是可以了，維持這個思路與算法就OK了

在一個容器中，我們把布局按照3*3切割，可以把這個看做一個二維矩陣

row = 3   //3行
col = 3  //3列

二維矩陣會形成一張九宮格的圖，如下：

 

初始化：3*3的矩陣圖

0	1	2
3	4	5
6	7	8

給每一個碎片圖排一個序，3*3 = 9個

頁面上的每一次碎片圖的變化，其實完全可以映射成內存中對應的originalOrder這個數組的變化

此時碎片圖的真實排序就是 originalOrder= [ 0,1,2,3,4,5,6,7,8,9 ]

 

移動結束：新3*3矩陣圖

8	4	2
3	1	7
6	5	0

新的映射表 randomOrder = [ 8,4,2,3,1,7,6,5,0 ]

每一次變化后，計算下原始的矩陣排序與變化后的矩陣排序是否一致

originalOrder == randomOrder  判斷是否還原成功

 

具體的細節實現可以直接參考源碼

附上我的git下載地址: https://github.com/JsAaron/puzzleGame

如果需要更詳細的教程，可以之后關注下慕課上的新課程~~