# *Go Go PAINTING* --- [github](https://github.com/BroLeaf/GoGoPainting) --- [TOC] --- ## 開會紀錄 --- ### 2018/06/02 20:25 ~ 23:00 :::danger 本來打算使用beego的聊天框架,我們在上面有做了修改html以及去使用了該框架的controller操作,建立了聊天房間以及對話系統。可是今天討論時發現,該框架無法支援mouse event,於是開始google,找到了另一種用來製作遊戲的框架--Ebiten,這個框架支援mouse event, keyboard event,我們也測試了是否可以透過這種方式來用滑鼠作畫,結果是成功的,於是下一個要面對的問題就是,如何把聊天室與畫畫整合起來,並且弄一個server。 ::: 1. 畫畫的網頁,如何+進去其他網頁元件 2. 連線聊天功能,即時聊天傳送功能 github.io ---- ### 2018/06/05 21:00 ~ 23:30 * 用什麼方式把畫出來的資訊傳給其他 client 知道 * 畫布是由數百個點組成,每個點都有座標,每 0.1 秒讀取一次有改變的座標位置,廣播出去讓其他人的畫布都改變 * 怎麼樣讓別人進來玩 1. 區域網路 * apache2 * go web 框架 2. 固定 IP 架設 server * github.io ? #### **TODO** - [x] 確定用什麼是建立 server、繪畫跟 beego 聊天室的結合 ---- ### 2018/06/06 21:00 ~ 23:30 * 因為需要後端的 WebSocket 去傳送聊天室和繪圖資料,所以必須要用到後端操作,所以 github.io 跟 apache 直接 out !! * 因為 apache 跟 github.io 都只能用靜態網頁,雖然不是不可能,但難度太高,所以決定放棄 * 最後是決定用 html 跟 js 結合後端的 golang 弄出我們的架構 * 溝通部份前端 js 的 WebSocket 跟後端 golang 的 WebSocket 接收資料 * 實際使用需要連接到同一個 wifi 底下,連線到 server 的 IP 位置 * 用 GopherJS 技術,把 paint.go compile 成 .js 檔,最後整合到 beego聊天室 的 golang project 裡面 * 把專案第一次 commit 到 github 上作版本控制 #### **TODO** - [x] golang WebSocket - [x] js WebSocket - [x] 前端後端連線 - [x] Server 廣播給所有 client ---- ### 2018/06/12 21:00 ~ 01:30 * 完成進度: 1. server方面 * 能把user在paint畫的點座標傳送給server,同時傳送回來給user自己的畫圖板並畫上,先做初步debug 2. 聊天室答案方面 * 剖析beego聊天室框架,在msg的傳送中設定畫畫答案,如有user答對,則會將該訊息替換成"you got it!" * 方式說明: 1. server方面: * 本來想嘗試在paint的go中寫go的socket,結果gopherjs中會發生問題,無法順利轉到js中 * 因此使用node js的server,先使用gopherjs build產生js檔,再寫入其中 * update(),js中該func會持續運行,用來偵測mouse click,因此我們也將socket嵌入其中 2. 聊天室答案方面: * 在user鍵入字串(要說的話)時,判斷是否為正確答案,如果是就印出"I GOT IT"(不會印出答案),並切換答案,如果不是就只是印出打了什麼。 * 遇到的問題: 1. server方面: * 如果user畫太多線,會造成server崩潰 #### **TODO** - [x] 解決server崩潰問題 - [x] HTML 優化 - [x] Go Go painting 圖標 ---- ### 2018/06/14 15:30 ~ 17:30 * 網頁可以在區域網路上瀏覽(預計 demo 形式也會如此) * 做 socket 傳送 plot 的優化(因為本來有時 plot 會一點一點的分散) * 解決 server 崩潰問題(透過方法一二解決) * 方法: 1. 把能夠不要放在 update() 裡面的 socket 傳送全部都移動到 init() 裡面 * js 中的 update(): js 中該 func 會持續運行,用來偵測 mouse click * js 中的 init(): js 中會在 html 啟動該 js 時運行一次,用來初始化 2. 嘗試 server emit 時間區段是要小比較好 還是大,結果是要小 * 現在的問題: * 精準度沒有很精確,畫畫者與猜題者的畫面會略有不同,有些點沒有呈現出來,但不至於影響觀看 #### **TODO** - [x] 區分畫畫者,猜題者,先以第一個進來的就是猜題者下手 - [x] 一個點(int)傳送變成一次一堆點(list)傳送 - [x] HTML 前端界面優化 - [ ] beego 端(port:8080)與paint(port:9999)溝通,因為答對需要清空繪圖板,需要雙方的資訊 - [x] 傳送精確度優化 - [x] 遊戲模式優化 ### 2018/06/16 18:00 ~ 20:00 * 完成上次的前三個進度 * 修改遊戲方式,改成每 30 秒 (或 60 秒)變換一次題目,換完題目後將畫布清空 * 清空方式: server 端傳送 `clear` 觸發 client 端 event * 清空時間不一:是因為按照 socket 被創立的時間而定,也就是說跟何時近來遊戲有關,預計下次改善。 * 還沒有能夠換畫畫者 #### **TODO** - [ ] TODO port 9999 與 8080 要能溝通 ---- ### 2018/06/19 22:00 ~ 24:00 * 優化了每輪遊戲的間隔時間,現在 server 跟 client 清空時間間隔不到一秒 * 若 server 是不進行遊戲的話,那對所有玩家來說看到的畫面就會是一樣的 * 現在聊天室因為是用 bee go 去控制的,所以要能夠跟產生出來的 js 檔案做連結 * 最開始是想到用 javascript call go function 達到傳參數的目的 * [參考](https://github.com/dop251/goja) * 另一個解法是使用真實時間,達到兩邊都能夠同時輪替遊戲 * 現在能夠做到只要有人答對就會換題目 #### **TODO** - [x]TODO go 題目配合真實時間 - [x]TODO js 題目配合真實時間 - [x]題目的輸出 - [x]輪流畫畫 - [x]前端優化 ---- ### 2018/06/24 22:00 ~ 24:00 * 前端(聊天室)介面優化 * 之前因為是用 js 畫布合併到 go 聊天室的關係有覆蓋到背景的設定,所以在 websocket.html 最上層修改背景就不會有被 js 畫布影響的問題 * 實做輪流畫畫 * 但是現階段會有題目對不上,以及有時候畫出來的圖案不會傳到 server ,也無法顯示給其他人的 bug ![](https://i.imgur.com/g6PF60B.png) ![](https://i.imgur.com/LAaXHAp.png) * 輪流畫畫 #### **TODO** - [x]修正輪流畫畫的 bug - [x]整理程式碼,增加可讀性 --- ### 2018/06/24 22:00 ~ 24:00 * 將上禮拜輪流的 bug 去除 * 確認 project 完成度 * 做報告PPT #### **TODO** --- ## 架構 --- ### Server * 負責處理資料傳輸 * 不參與遊戲 * 根據規則:以進入房間的順序,找離上一個畫的人最近的號碼,如果是最大的,那就從第一個人重新開始。 * `socket.on('I want to draw'...` 其實就是定義說,當 server 收到這個事件就做這件事 ```javascript socket.on('I want to draw', function(client_drawer) { if (client_drawer < drawer_min) drawer_min = client_drawer; if (pre_drawer < client_drawer) { if (pre_drawer == drawer || client_drawer < drawer) { drawer = client_drawer; } } }); ``` * Server 傳送畫圖資訊時,傳的是一個 list (可以把他想像成一個 array) * 以前我們為了使別人呈獻時有動態感,所以是一個個點傳送過去,但是這樣做對 server 負擔太大了,所以才改用這種方式。 ```javascript socket.on('my XY list event', function (datax, datay) { ttmmppX.push(datax); ttmmppY.push(datay); ttmmppX = datax; ttmmppY = datay; }); ``` ---- ### Client * 畫畫者 * 可以看到題目 * 被允許畫畫 * ( 不允許聊天? ) * 猜題者 * 不能畫畫 * 可以聊天、猜題 * 與 server 溝通 ```sequence Client->Server: 加入遊戲 Server->Client: 決定號碼 Server->Server: 27秒後,下一輪 Client->Server: 我是幾號,我還在線上 Note right of Server: 用3秒整理決定下一個 Server->Client: (廣播) 下一個是 X 號 ``` * 我們讓每個 client 每秒中都會浸入這個 function * 如果你是畫畫者(drawer == my_Number),你就會把你化過的資料傳給 server * 如果你是其他人,你就會向 server 發出 `get data`請求 ```javascript setInterval(function(){ //console.log('send xy list to server every 1 sec') if (drawer == my_Number) { socket.emit('my XY list event', has_drewX, has_drewY); has_drewX.splice(0, has_drewX.length); has_drewY.splice(0, has_drewY.length); } else { socket.emit('get data', my_Number); } }, 1000); ``` ---- ### 連線實作 * port 9999 * 處理聊天資訊 * 確定猜中答案就不會把正確答案送出 * port 8080 * 傳送聊天室資訊 * 處理是否猜中答案 * client.html、client.js、main.js(111065) localhost -> IP 位置 ---- ### 聊天室 * 使用port: 8080 * Golang為後端作業(socket溝通、判斷答案、聊天功能) * js為中間溝通,html、css為前端呈現 * chatroom.go : * 包含題庫、答對判定、換題目倒數、進入房間、離開房間 ---- ### Web 框架 * 我們主要是使用 beego 這個框架 * 他是中國人開發的,所以其實很多資料找起來很容易 * 其實有著不易拓展的特性,適合用於入門 golang * beego 的一些 router、controller 都有整合起來,用 function 的型式幫你整理好了,但也是因為這個原因,才會有人說這樣不適合拓展 * 聊天室就是從原生框架開始修改,但是後面並和 golang 的畫板時,卻出現許多問題 * 因為解決不了所以改用其他方法,詳情請看 畫板 -> gopherjs ---- ### 畫板 * 改 position * z-index(html裡的深度) * left(html裡的位置) * 傳接畫過的點 * 用 list 紀錄下畫過的點,傳到 server 端 * 由 server 接受到所有畫過的點,傳給 client 端 * 實作node js client到畫板裡 * 將 client 的 socket.io 寫到 paint 的 js 檔中 * gopherjs * 可以將他視為一種 compiler ,將 golang 轉換成 javascript ,然後我們直接將這部份當作我們圖畫的後端 * 轉換後產生的困難就是,我們兩個 socket port 溝通問題,畫圖題目顯示跟比對答案 --- ## Reference [學習筆記:Go 語言](https://hackmd.io/c/HyP6KVZ1G/https%3A%2F%2Fhackmd.io%2FKzCGDMCZQRgTgLQGYAsBjSCWQOwwQBwqpZIBscZKADDmsAKYNA%3D%3D%3Fboth) [unrecognized import path](https://stackoverflow.com/questions/20458796/unrecognized-import-path-with-go-get) [Go Web 教學](https://github.com/astaxie/build-web-application-with-golang/blob/master/zh/preface.md) [gopherjs](https://github.com/gopherjs/gopherjs)
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up