這部分就是滑塊拼圖遊戲的教學。包括如何設定、進行遊戲、分享滑塊拼圖遊戲等操作。詳細內容可以看我寫的「你玩過滑塊拼圖嗎？可自訂的HTML5滑塊拼圖遊戲」這篇喔。 http://blog.pulipuli.info/2017/09/html5-customizable-sliding-puzzle-in.html

1. 畫完圖片就來玩：
滑塊拼圖遊戲 Sliding Puzzle
Part 4.
1

2. 2
滑塊拼圖
●移動空格上下左右的方塊
●以此重新組成原來的圖片

3. 3
滑塊拼圖遊戲 Image Puzzle
●純網頁的滑塊拼圖遊
戲
●可自行選擇作為拼圖
的圖片(使用圖片網址)
●可分享到Facebook、
Line等社群媒體

4. 4
開啟滑塊拼圖遊戲 Image Puzzle
滑塊拼圖遊戲
ImagePuzzle
https://pulipulichen.github.io/
Sliding-Puzzle/

5. 介面說明：設定畫面
5
A.選擇拼圖難度
B.開始遊戲的方式
1.輸入圖片網址
2.拖曳圖片到此
3.上傳圖片
4.範例圖片
(薑黃貓)
A
B

6. 介面說明：
遊戲畫面
6
B
A
C
A.功能列
1.分享到FB
2.觀看目標圖片
3.重新挑戰
4.換一張圖
B.拼圖遊戲區：點
選來移動拼圖
C.分享工具

7. 7
滑塊拼圖遊戲
Image Puzzle
1.輸入圖片網址
2.分享滑塊拼圖遊戲

8. 8
1. 輸入圖片網址
貼上圖片網址
http://i67.tinypic.com/30hxxfq.jpg
!

9. 9
開始拼圖遊戲囉

10. 10
2. 分享滑塊拼圖遊戲
!

11. 11
滑塊拼圖遊戲
Image Puzzle
上機囉！