100735760 發表於 2015-11-19 14:18:10

簡單的 3 × 3 滑塊拼圖 Part. 2

本帖最後由 100735760 於 2015-11-19 14:25 編輯

第一步驟的打亂拼圖我們已經完成,接下來進行移動拼圖,那以前比較舊的手機或是用電腦在玩拼圖的時候,大概都是使用鍵盤來進行,所以這邊先講解鍵盤移動拼圖的方法。那打亂後的拼圖,會缺一塊,接下來的拼圖移動都跟這塊空缺有關係,所以我們在每次按下方向鍵時,就確認空缺的位置,再判斷相對應的拼圖是否符合可移動的條件,如果可以移動,就把空缺跟拼圖的位置交換,反之,則不執行。圖解如下:http://d.share.photo.xuite.net/gn00779703/1dbd4e9/19699686/1105973251_l.jpg假如空缺在編號456789的位置,代表在空缺上方的拼圖可以往下,按方向鍵 ↓ 時,在空缺上方的拼圖,就跟空缺交換,也就是拼圖會往下的意思。http://d.share.photo.xuite.net/gn00779703/1dbd412/19699686/1105973548_l.jpg相對的空缺在編號124578的位置,代表在空缺右方的拼圖可以往左,按方向鍵 ← 時,在空缺右方的拼圖,就跟空缺交換,也就是拼圖會往左的意思。以此類推,就可以把四個方向的拼圖移動完成。接下來就可以開始加上程式碼囉,首先,先在 Update () 內加上一個判斷,我們要在拼圖還沒完成的時候才能夠進行拼圖的移動。http://d.share.photo.xuite.net/gn00779703/1dbd442/19699686/1105973084_l.jpg接下來,要取得空缺的位置,用一個迴圈去確認空格的索引值並儲存下來。http://d.share.photo.xuite.net/gn00779703/1dbd408/19699686/1105973282_l.jpg接下來在下方加入按鍵的判斷。http://d.share.photo.xuite.net/gn00779703/1dbd4af/19699686/1105975241_l.jpg如上述所說,拼圖的移動是跟空缺的位置交換,舉個例,如果空缺在5的位置,上面的拼圖往下,2 + 3 = 5;下面的拼圖往上,8 - 3 = 5;左邊的拼圖往右,4 + 1 = 5;右邊的拼圖往左,6 - 1 = 5;所以歸納一下就是,拼圖的上下是空缺的位置±3,左右則是空缺的位置±1。因為移動很有規律,所以我們可以另外使用函式來進行移動的部分,讓程式碼精簡且美觀。所以接下來按鍵判斷的地方,我們只要加入條件設定即可。http://d.share.photo.xuite.net/gn00779703/1dbd4c1/19699686/1105975259_l.jpg因為在程式碼的部分拼圖編號是0~8,這個部份要注意 - 1 轉換。每次按下 W 時,如果空缺的位置在123456,代表下方的拼圖可以往上,這時候就會執行函式 MovePuzzle ,函式帶兩個參數,第一個參數是空缺的索引值,第二個參數則是要交換的拼圖位置,因為拼圖要往上,所以要 + 3。最後則是函式的內容,http://d.share.photo.xuite.net/gn00779703/1dbd4e9/19699686/1105974787_l.jpg如果,空缺在 8,要跟上方的 拼圖5 交換,那函式的參數就會是 7 跟 - 3,帶入函式的話,就會變成 7 跟 7+(-3) = 4 的位置交換,所以空格就會往上走,拼圖則會往下;交換的方式跟打亂拼圖的方式一樣,只要將空缺(tmpindex)跟拼圖(tmpindex+MoveValue)的位置與陣列交換即可。以上就是使用鍵盤來移動拼圖的方法。
待續....
頁: [1]
查看完整版本: 簡單的 3 × 3 滑塊拼圖 Part. 2