[心得] 分享最近做的作品
作品連結 :
http://dkbo.github.io
場景編輯器連結 :
http://dkbo.github.io/RPG-Map-Maker
追加線上互動版 :
http://dkbo-rpg-online.herokuapp.com/
透過Socket.io 方式,只是..沒有做任何優化,伺服器可能會殘留人物。
聊天框也是陽春的放上去而已。別傷到眼睛,手機沒 RWD 聊天框。
------------------------------------------------------------------
初始在 CodePen 試作的
遊戲作品 :
http://codepen.io/dkbo/pen/vOvWox
地圖編輯器 :
http://codepen.io/dkbo/pen/eNoKem
最近想練習寫 ReactJS 主題以 RPG 製作大師風格呈現,邊學邊寫的途中,
也寫了大概兩個禮拜。在製作過程中遇到最棘手的問題就是直接 Coding
JSON 畫出地圖,之後做了一個簡易的地圖編輯器。
地圖編輯器
熱鍵
(地圖區)
1. w、s、a、d 及方向鍵 控制地圖位移動
2. g 地圖格線切換
3. f 前層物件視圖 顯示/隱藏
4. b 後層物件視圖 顯示/隱藏
5. 滑鼠左鍵 畫物件至後層
6. 滑鼠右鍵 畫物件至前層
7. Alt + c 清除地圖及碰撞區域 ## 隱藏時將無法清除
8. Alt + s 儲存地圖
9. Alt + l 讀取地圖紀錄
10.Alt + 滑鼠左鍵 碰撞區域設定 ## 在拼圖區塊未選取時
(圖庫區)
1.滑鼠滾輪 圖庫上下位移
2.滑鼠左鍵 選取要繪製的圖庫區塊
3.滑鼠右鍵 取消選取
(上方文字區塊)
左方 為 物件存取為 JSON
右方 為讀取 JSON 並繪製
簡單來說就是繪製好的地圖就要保存好左方的Code
不斷的實作累積經驗,前端真的蠻有趣的。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.174.0.186
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1440064009.A.DCA.html
推
08/20 18:23, , 1F
08/20 18:23, 1F
推
08/20 19:06, , 2F
08/20 19:06, 2F
推
08/20 19:57, , 3F
08/20 19:57, 3F
推
08/20 20:02, , 4F
08/20 20:02, 4F
推
08/20 20:30, , 5F
08/20 20:30, 5F
推
08/20 20:42, , 6F
08/20 20:42, 6F
推
08/20 20:50, , 7F
08/20 20:50, 7F
推
08/20 20:56, , 8F
08/20 20:56, 8F
→
08/20 23:23, , 9F
08/20 23:23, 9F
※ 編輯: DKBO (180.217.222.36), 08/20/2015 23:37:32
推
08/20 23:51, , 10F
08/20 23:51, 10F
→
08/21 00:48, , 11F
08/21 00:48, 11F
→
08/21 00:49, , 12F
08/21 00:49, 12F
推
08/21 01:41, , 13F
08/21 01:41, 13F
推
08/21 02:36, , 14F
08/21 02:36, 14F
推
08/21 08:31, , 15F
08/21 08:31, 15F
推
08/21 08:33, , 16F
08/21 08:33, 16F
推
08/21 10:03, , 17F
08/21 10:03, 17F
→
08/21 10:23, , 18F
08/21 10:23, 18F
※ 編輯: DKBO (1.174.0.186), 08/21/2015 13:34:25
→
08/21 16:41, , 19F
08/21 16:41, 19F
推
08/22 01:44, , 20F
08/22 01:44, 20F
※ 編輯: DKBO (180.217.206.40), 08/22/2015 10:54:48
推
08/22 21:14, , 21F
08/22 21:14, 21F
→
08/22 21:14, , 22F
08/22 21:14, 22F
推
08/23 00:53, , 23F
08/23 00:53, 23F
推
08/23 04:40, , 24F
08/23 04:40, 24F
→
08/23 04:41, , 25F
08/23 04:41, 25F
→
08/23 04:41, , 26F
08/23 04:41, 26F
→
08/23 04:42, , 27F
08/23 04:42, 27F
→
08/23 04:43, , 28F
08/23 04:43, 28F
推
08/23 17:54, , 29F
08/23 17:54, 29F
推
08/24 00:30, , 30F
08/24 00:30, 30F
→
08/24 01:32, , 31F
08/24 01:32, 31F
推
08/24 08:47, , 32F
08/24 08:47, 32F
推
08/24 14:07, , 33F
08/24 14:07, 33F
※ 編輯: DKBO (111.254.119.222), 08/24/2015 16:54:51
推
08/26 01:25, , 34F
08/26 01:25, 34F
→
08/26 01:26, , 35F
08/26 01:26, 35F
→
08/26 09:35, , 36F
08/26 09:35, 36F
→
08/26 11:01, , 37F
08/26 11:01, 37F
※ 編輯: DKBO (180.217.212.185), 09/02/2015 21:29:07
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章