2017年1月15日 星期日

[Graffitalk] Day-0 網頁RPG和 Socket.io


因為我喜歡玩RPG也喜歡有社交元素的遊戲,所以先從相關的專案開始著手,第一個找到的是一個PHP做的RPG網頁,玩法很像早期的MUD,透過靜態網頁切換來選擇行為,另外一個找到的專案就是這個 Browser Quest.這個遊戲畫面完全就是早期ARPG的風味,直接在畫面上與敵人戰鬥,也可以直接和畫面上的人聊天.
本來很有興致地想找人合作開發,但是一時之間也找不到人,就想說來翻翻code看有沒有辦法自己改.結果當然是完全不行.對於一個完全沒js html前端經驗的人來說,這根本是大boss等級的專案,而且還有動畫和地圖模組,果斷放棄這種幼稚的想法.



既然找不到人合作,就自己先練習看看吧.這個遊戲主要是 HTML5,Javascript 和 Socket.io的應用.把這幾個關鍵字丟到網路上,socket.io 最多的應用是拿來作即時聊天室.而這個遊戲用了 HTML5 中的 Canvas 作為主要畫面呈現,這兩者的結合除了像這樣的遊戲之外,就是像這種協作畫圖的應用 A collaborative drawing canvas with node.js and socket.io.透過 node.js ,socket.io 和 HTML5 就能同步的畫圖.裡面每個名詞對我來說都是全新的技術,比起去找網路課程,還是直接研究人家的程式碼比較符合我的風格.

把資料 fork 一份下來後,照表操課在機器上裝了 node.js,套件跟著安裝好啟動,真的可以動的瞬間有點感動(到底感動什麼,沒一個是自己寫的).看著兩個瀏覽的圖可以互相傳遞,突然靈機一動有了想法,如果讓傳統聊天室加上畫圖的功能,好像是一個滿酷的主意!?現在有文字聊天,語音聊天,視訊聊天,但是好像還沒有畫圖聊天(就算是直播小畫家也只是單方面的畫圖+即時語音互動)?心裡有這個想法之後就想說邊做邊學吧,做不成多學一樣也不吃虧,就開始了 Graffitalk 的第一行程式碼.