你玩過滑塊拼圖嗎？可自訂的HTML5滑塊拼圖遊戲 / Customizable Sliding Puzzle in HTML5
畫了一張圖、拍了漂亮的照片，還可以做什麼加值應用呢？我參考Venkat Pola的程式碼，將我很喜歡玩的遊戲「滑塊拼圖」做成了可直接在瀏覽器執行的線上遊戲，而滑塊拼圖的圖片還可以由使用者自訂喔。這篇就來說明我做的這個滑塊拼圖遊戲吧。
- Sliding Puzzle: https://github.com/pulipulichen/Sliding-Puzzle
什麼是滑塊拼圖遊戲？ / What is "Sliding Puzzle"?
(圖片來源：Cross-cultural Perspectives on Knowledge Management)
滑塊拼圖遊戲有很多名稱，英文有稱為Sliding puzzle、15 puzzle、n-puzzle，中文有滑塊類遊戲、數字推盤遊戲、數字拼圖、九宮格拼圖、n-拼圖、15拼圖(移十五拼圖)、8拼圖(移八拼圖)等等。以下是維基百科的介紹：
滑塊類遊戲(Sliding puzzle)，是種在平面上滑動數塊平滑的板塊以拼成特定排列的智力遊戲，最早類型是1874年Noyes Palmer Chapman的數字推盤遊戲，華容道、塞車時間(Rush Hour)也屬於此類。
(圖片來源：維基百科 Knight's tour)
不像其他巡迴類的拼圖遊戲(tour puzzle)，滑塊拼圖遊戲禁止任何一塊拼圖離開盤面，僅能在有空格的地方移動。這個特性有別於現今較為常見的重新排列類的拼圖遊戲。
n拼圖 / n-puzzle
(圖片來源：維基百科 15 puzzle)
15拼圖(15 puzzle，移十五)是最古老的滑塊類遊戲，發明者是Noyes Chapman。該遊戲風靡於1880年代。Sam Loyd常被誤認為15拼圖的發明者，因為他謊稱自己發明了15拼圖遊戲。除了15拼圖之外，常見的還有小一圈的8拼圖 (九宮格拼圖)，這類拼圖遊戲統稱為n拼圖。這類型的拼圖常被用於測試人工智慧演算法的效能，可用啟發式策略(heuristic optimization algorithms)來求得最佳解。15拼圖最佳解最多為80步，8拼圖最佳解至多為31步。
華容道 / Klotski
(圖片來源：維基百科 華容道)
在華人世界比較有名的對應遊戲是「華容道」。這款英國人John Harold Fleming在1932發明的遊戲，融入了中國歷史的三國背景之後，成為一種另類的滑塊遊戲。華容道是在方形盒子內放置大小不同的方塊，一般是4x5大小。方塊裡面有一個最大的特殊方塊，遊戲目標是將它移動至指定地點才能結束遊戲，這點跟前述的n拼圖並不相同。
但跟n拼圖相同的是，玩家依然不允許拿起方塊，只能在空格周圍以平行或垂直方向移動。而玩家的目標就是用最少的移動次數、或使用最少時間來將最大的方塊移動到指定地點。
可自訂的HTML5滑塊拼圖遊戲 / Customizable Sliding Puzzle in HTML5
看完上面對滑塊拼圖遊戲的介紹，下面就來玩玩看滑塊拼圖遊戲吧：
- 滑塊拼圖遊戲：設定
- 滑塊拼圖遊戲：展示圖片 (停車場的薑黃喵)
我做的這款滑塊拼圖遊戲是以n拼圖的方式遊玩，但是盤面上的方塊並非是數字，而是可由玩家自訂的照片。上面的預設展示畫面是用我拍攝的政大停車場的薑黃喵。
程式碼儲存庫 / Repository
- Github儲存庫：Slide-Puzzle https://github.com/pulipulichen/Sliding-Puzzle
所有程式碼都已經放到GitHub保存庫中，供有興趣的朋友自行研讀。雖然這是一個簡單的小遊戲，但裡面用到了很多JavaScript技術，包括拖曳圖片上傳、CSS圖片分塊顯示、分享功能。本來我還在想要在裡面實作自動解答的人工智慧，但後來並沒有完成。
使用說明 / Usage
整個滑塊拼圖遊戲的操作如上圖所示。讓我們一步一步來看它怎麼玩吧。
不管怎樣，都先從設定畫面進入吧：
設定拼圖：載入圖片 / Puzzle setup: Loading an image
設定畫面中主要有兩個地方要設定：
- 難度：預設為4x4。這是滑塊拼圖遊戲的尺寸，如果是4x4，那就是(4*4)-1=15拼圖。而5x5就是24拼圖。依此類推，數字越多，拼圖的難度就越高。
- 拼圖圖片：你可以用四種方式載入拼圖的圖片：
- 上傳圖片並輸入圖片網址 (推薦做法)
- 從您的電腦上拖曳圖片檔案到這個位置
- 上傳圖片檔案
- 使用範例圖片：使用的是這個網址：https://pulipulichen.github.io/Sliding-Puzzle/?img=demo.png
因為這個遊戲的目標是讓大家將自己的畫作或照片做成遊戲後分享給其他好友，所以我推薦大家使用「上傳圖片並輸入圖片網址」來開始遊戲。
附帶一提，圖片的尺寸儘可能是「高度」大於「寬度」的瘦長型圖片，這樣子滑塊拼圖遊戲才能正常顯示喔。
上傳圖片 / Image upload
上傳圖片到圖床並取得網址的方法很多，我之前介紹的是用tinypic空間：
- TinyPic: http://tinypic.com/
但是TinyPic上傳圖片的驗證方式常常在變更，之前的教學好像也沒多大用處了。就請有興趣的同學自行研究看看如何上傳。
如果最後上傳成功的話，就會得到一個圖片網址，舉例來說像是：
將網址貼到上圖「輸入圖片網址」的這個位置，按下「開始」按鈕即可。
開始遊戲 / Playing
接下來就會開啟滑塊拼圖遊戲本身。你可以先按下「目標圖片(z)」按鈕(快速鍵z)來看看完成圖長什麼樣子，然後移動深灰色空格旁邊的方塊，讓整個拼圖排列成目標圖片的樣子。
移動方塊的方式有四種：
- 用滑鼠將空格旁邊的方塊拖曳到空格上。
- 用滑鼠點選空格旁邊的方塊，該方塊會移動到空格上。
- 用滑鼠點選跟空格位於相同水平或垂直位置的方塊，這會一口氣移動整排方塊。
- 用鍵盤的方向鍵：上下左右來移動空格旁邊的方塊。
請記得時常用快速鍵「z」來觀看目標圖片長什麼樣子。
遊戲過程會記錄你現在的難度(4x4)、使用時間(00:04:38)、移動步數(10步)。請試著挑戰在最短時間跟最少步數內完成拼圖吧！
這個滑塊拼圖遊戲也可以在手機上用網頁開啟喔。
你可以按「換一張圖」回到設定畫面，重新設定滑塊拼圖遊戲。
分享滑塊拼圖遊戲 / Sharing Customized Game
如果你是用「輸入圖片網址」開始遊戲，那你就能將滑塊拼圖遊戲分享到Facebook。
分享的訊息是這樣的。這個分享到Facebook的技術是我在寫「訂製Facebook分享連結：Facebook 分享連結產生器」這篇的時候完成的。
附帶一提，如果是完成拼圖之後再來分享，那麼分享的訊息就會變成「完成成就記錄」，像是「我花了00:00:36跟用80步就完成了這張3x3的拼圖，你做得到嗎？」。不過現在似乎Facebook禁止做這樣的設定了，真是可惜。
如果想分享到其他地方，像是LINE或Twitter，那也可以用網頁下方的AddThis工具列分享喔。
不過，如果是用拖曳開啟或是本機選擇圖片的話，就不能用分享功能了。
結語 / Conclusion
小時候我蠻喜歡玩滑塊拼圖遊戲。這個遊戲簡單、不複雜，又有很多變化。不過小時候在玩滑塊拼圖遊戲的時候，因為做滑塊拼圖的遊戲不多，所以老是在玩那幾個圖面。再者，最麻煩的是，一旦將滑塊拼圖拼完之後，就得要很麻煩地打亂拼圖才能重新再玩。如果打亂拼圖的時候不用心多走幾步，那麼下次就會很容易完成拼圖，讓人覺得沒有什麼成就。這次做了這個滑塊拼圖遊戲，算是圓了小時候的一個夢想吧。
跟Venkat Pola所做的原始版程式相比，我在眾多地方有所改進：
- 拼圖的起始狀態是由人工智慧來設置，而非固定樣式：這個滑塊拼圖開始的時候，人工智慧會隨機將拼圖換置100次，最後成為一個亂數的起始狀態。
- 用許多方式載入拼圖圖片：原始的拼圖僅提供選擇檔案跟拖曳上傳，我增加了從指定圖片網址跟範例圖片開始遊戲的方式。
- 分享拼圖：我使用Facebook分享連結跟AddThis來讓大家分享客製化的滑塊拼圖遊戲。
在製作的時候尚未完成的功能有：
- 解開拼圖的人工智慧：這個功能可以由啟發式最佳化演算法來完成。
- 改善在手機上的運作：雖然這個滑塊拼圖遊戲可以在手機上開啟，但是在移動拼圖的時候卻容易連帶地捲動網頁，只能用點選的方式移動拼圖。
未來我應該會在很多跟圖片、照片製作相關的課程中加入滑塊拼圖遊戲的加值應用吧，還蠻有趣的。不過現在似乎很多人都不知道這種滑塊拼圖遊戲，許多同學都只會用傳統拼塊拼圖的方式，想用直接移動方塊的方式完成拼圖。難道這就是城鄉差異嗎？
4x4/00:03:30/396步
回覆刪除天啊4x4好難
不對我到底在幹什麼