Vue2 + Nodejs + WebSocket 完成你畫我猜多人在線遊戲

你畫我猜，相信大家對這個遊戲都很熟悉。

我用Vue2 + mint-ui + nodejs + websocket 實現了你畫我猜這個遊戲。

建議移動端打開效果更佳(可掃下方二維碼)，PC端需要使用谷歌開發者模式，然後使用移動調試工具，才可以正常使用（主要是一些touch事件，pc不支持）。

大家可以拉上一兩個人，來開個房間試試看，體驗體驗效果。

你畫我猜

http://yd.diamondfsd.com (二維碼自動識別)

主要實現了以下這些功能

大廳功能

個人信息顯示

頂部顯示個人昵稱，可以修改

暫時不支持上傳頭像，頭像用昵稱第一個字母代替

暫時使用 localStorage 儲存基本基本個人信息（昵稱,token等）

實施更新房間列表，在線人數等信息

創建遊戲房間

房間名稱:

房間類型：公開（可以在遊戲大廳被看到），私有（可以通過遊戲大廳左上角查找房間號進入）

加入房間

公開房間加入： 直接在首頁遊戲大廳的房間列表裡面點擊加入即可

私密房間加入： 掃秒二維碼或者輸入房間號 （二維碼由客戶端使用js生成，暫未實現）

房間人滿後不可加入

房間遊戲開始後不可加入

後期可加入觀戰功能

當遊戲人數大於等於2或者以上的時候，可以開始遊戲。

房間內可以聊天，默認第一個進入房間的人是房主，房主可以開始遊戲。

遊戲主功能

使用 canvas 做畫布，通過websocket實時發送動作，全圖數據來實現動態筆跡，和最終圖片一致性。

可以修改畫筆顏色，粗細，進行撤銷，恢復，清空等操作。

每輪遊戲結束後公布答案，預置了一些快捷短語可以恢復。 遊戲過程中 作畫者 不可以發文字聊天，其他玩家通過發文字猜答案。

第一個猜對的 3 分， 第二個猜對的 2 分。 剩下猜對的1分。 第一個猜完後，遊戲時間縮短為 30 秒。每個人猜對後，作畫者+1分

項目結構

這個遊戲由兩個項目組成，一個是前端，一個是服務端

前端 github-you-draw-i-guess

前端項目由 Vue2 + mint-ui + vuex + vue-router 完成的單頁面app。 使用 websocket 和服務端進行通訊，所有的介面都由 websocket 完成

WebSocket 服務端 github-ydig-websocket

服務端主要就是用了 ws 這個庫，和 babel 來支持一些 es6 的語法來完成的。

服務端承載了所有的遊戲相關邏輯和一些數據。 但是因為沒有經過足夠的測試，肯定還是有不少bug的。

另外，沒有做數據儲存，所有的數據都儲存在當次運行的服務內存里，所以服務重啟後，所有的數據就清空了，哈哈，主要是我懶，就沒做數據儲存了。

這個也就簡單介紹一下這個項目，以及開放出源代碼供大家參考研究。那個伺服器承載量不大，卡卡的也不要見怪。另外有什麼bug 大家可以在 github 上提 issue。 還有就是，歡迎大家貢獻代碼，雖然真箇項目也是我亂寫的，還是希望有人能看得懂呀。

項目源碼

前端: github-you-draw-i-guess

WebSocket 服務端: github-ydig-websocket

在線演示地址: 你畫我猜

在線演示二維碼:

http://yd.diamondfsd.com (二維碼自動識別)

個人博客: 村長日記

總結

從整個項目來說，前端，後端，UI，業務邏輯，都是我苦思冥想做出來的。剛開始是想做微信版的，使用微信登錄來儲存用戶數據，可是後來發現必須要企業服務號才能申請到相關介面。然後項目就停了一段時間。

這段時間比較空閑了，就想了一個簡單的辦法，既然是一個開放式的遊戲，就根本不需要登錄呀。所以變成了人人進入就可以玩的一個項目。 可以從微信打開，qq打開，微博打開，只要支持h5的瀏覽器都可以打開。

歡迎大家對項目的各方面做出的評價。

推薦閱讀：