資訊專欄INFORMATION COLUMN
摘要：使用即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用實現了你畫我猜這個游戲。可以修改畫筆顏色，粗細，進行撤銷，恢復，清空等操作。第一個猜完后，游戲時間縮短為秒。
使用 websocket + vue2 即可完成一個很有意思的在線游戲作品。
你畫我猜，相信大家對這個游戲都很熟悉。
我用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
在線演示二維碼:
個人博客: https://diamondfsd.com
總結從整個項目來說，前端，后端，UI，業務邏輯，都是我苦思冥想做出來的。剛開始是想做微信版的，使用微信登錄來儲存用戶數據，可是后來發現必須要企業服務號才能申請到相關接口。然后項目就停了一段時間。
這段時間比較空閑了，就想了一個簡單的辦法，既然是一個開放式的游戲，就根本不需要登錄呀。所以變成了人人進入就可以玩的一個項目。 可以從微信打開，qq打開，微博打開，只要支持h5的瀏覽器都可以打開。
歡迎大家對項目的各方面做出的評價。 能改的地方盡量會改，也希望大家貢獻自己的代碼。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81673.html
摘要：選擇技術類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態同步的方法。最后使用的還是挺爽的 選擇技術類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
摘要：選擇技術類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態同步的方法。最后使用的還是挺爽的 選擇技術類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
摘要：演示地址實時畫板聊天室你畫我猜聊天室圖片搶先看解釋關于是基于實現的套接字前端后端數據交互的庫，通過它的封裝，使用者可以很方便的開發，而且支持長輪詢等方法，兼容低版本瀏覽器。最后推薦一個實時的更加優秀的游戲。 前言 一直都想好好的學習運用node，一直都不知道要做什么東西，最近Java Web老師要求做個前端的應用，既然是前端應用，那肯定得是單頁應用了，而且node很適用于高并發的實時應...
摘要：聊一聊端的即時通訊端實現即時通訊的方法有哪些短輪詢長輪詢流輪詢客戶端定時向服務器發送請求，服務器接到請求后馬上返回響應信息并關閉連接。介紹是開始提供的一種在單個連接上進行全雙工通訊的協議。 聊一聊Web端的即時通訊 Web端實現即時通訊的方法有哪些? - 短輪詢 長輪詢 iframe流 Flash Socket 輪詢 客戶端定時向服務器發送Ajax請求，服務器接到請求后馬上返...
閱讀 1793·2021-11-18 10:02
閱讀 3524·2021-11-16 11:45
閱讀 1786·2021-09-10 10:51
閱讀 2106·2019-08-30 15:43
閱讀 1372·2019-08-30 11:23
閱讀 1484·2019-08-29 11:07
閱讀 1892·2019-08-23 17:05
閱讀 1394·2019-08-23 16:14
