資訊專欄INFORMATION COLUMN
摘要：使用即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用實現(xiàn)了你畫我猜這個游戲?？梢孕薷漠嫻P顏色，粗細(xì)，進(jìn)行撤銷，恢復(fù)，清空等操作。第一個猜完后，游戲時間縮短為秒。
使用 websocket + vue2 即可完成一個很有意思的在線游戲作品。
你畫我猜，相信大家對這個游戲都很熟悉。
我用Vue2 + mint-ui + nodejs + websocket 實現(xiàn)了你畫我猜這個游戲。
建議移動端打開效果更佳(可掃下方二維碼)，PC端需要使用谷歌開發(fā)者模式，然后使用移動調(diào)試工具，才可以正常使用（主要是一些touch事件，pc不支持）。
大家可以拉上一兩個人，來開個房間試試看，體驗體驗效果。
http://yd.diamondfsd.com
主要實現(xiàn)了以下這些功能
大廳功能個人信息顯示
頂部顯示個人昵稱，可以修改
暫時不支持上傳頭像，頭像用昵稱第一個字母代替
暫時使用 localStorage 儲存基本基本個人信息（昵稱,token等）
實施更新房間列表，在線人數(shù)等信息
創(chuàng)建游戲房間
房間名稱:
房間類型：公開（可以在游戲大廳被看到），私有（可以通過游戲大廳左上角查找房間號進(jìn)入）
加入房間
公開房間加入： 直接在首頁游戲大廳的房間列表里面點擊加入即可
私密房間加入： 掃秒二維碼或者輸入房間號 （二維碼由客戶端使用js生成，暫未實現(xiàn)）
房間人滿后不可加入
房間游戲開始后不可加入
后期可加入觀戰(zhàn)功能
當(dāng)游戲人數(shù)大于等于2或者以上的時候，可以開始游戲。
房間內(nèi)可以聊天，默認(rèn)第一個進(jìn)入房間的人是房主，房主可以開始游戲。
使用 canvas 做畫布，通過websocket實時發(fā)送動作，全圖數(shù)據(jù)來實現(xiàn)動態(tài)筆跡，和最終圖片一致性。
可以修改畫筆顏色，粗細(xì)，進(jìn)行撤銷，恢復(fù)，清空等操作。
每輪游戲結(jié)束后公布答案，預(yù)置了一些快捷短語可以恢復(fù)。 游戲過程中 作畫者 不可以發(fā)文字聊天，其他玩家通過發(fā)文字猜答案。
第一個猜對的 3 分， 第二個猜對的 2 分。 剩下猜對的1分。 第一個猜完后，游戲時間縮短為 30 秒。每個人猜對后，作畫者+1分
這個游戲由兩個項目組成，一個是前端，一個是服務(wù)端
前端 github-you-draw-i-guess
前端項目由 Vue2 + mint-ui + vuex + vue-router 完成的單頁面app。 使用 websocket 和服務(wù)端進(jìn)行通訊，所有的接口都由 websocket 完成
WebSocket 服務(wù)端 github-ydig-websocket
服務(wù)端主要就是用了 ws 這個庫，和 babel 來支持一些 es6 的語法來完成的。
服務(wù)端承載了所有的游戲相關(guān)邏輯和一些數(shù)據(jù)。 但是因為沒有經(jīng)過足夠的測試，肯定還是有不少bug的。
另外，沒有做數(shù)據(jù)儲存，所有的數(shù)據(jù)都儲存在當(dāng)次運行的服務(wù)內(nèi)存里，所以服務(wù)重啟后，所有的數(shù)據(jù)就清空了，哈哈，主要是我懶，就沒做數(shù)據(jù)儲存了。
這個也就簡單介紹一下這個項目，以及開放出源代碼供大家參考研究。那個服務(wù)器承載量不大，卡卡的也不要見怪。另外有什么bug 大家可以在 github 上提 issue。 還有就是，歡迎大家貢獻(xiàn)代碼，雖然真?zhèn)€項目也是我亂寫的，還是希望有人能看得懂呀。 :)
項目源碼前端: github-you-draw-i-guess
WebSocket 服務(wù)端: github-ydig-websocket
在線演示地址: http://yd.diamondfsd.com
在線演示二維碼:
個人博客: https://diamondfsd.com
總結(jié)從整個項目來說，前端，后端，UI，業(yè)務(wù)邏輯，都是我苦思冥想做出來的。剛開始是想做微信版的，使用微信登錄來儲存用戶數(shù)據(jù)，可是后來發(fā)現(xiàn)必須要企業(yè)服務(wù)號才能申請到相關(guān)接口。然后項目就停了一段時間。
這段時間比較空閑了，就想了一個簡單的辦法，既然是一個開放式的游戲，就根本不需要登錄呀。所以變成了人人進(jìn)入就可以玩的一個項目。 可以從微信打開，qq打開，微博打開，只要支持h5的瀏覽器都可以打開。
歡迎大家對項目的各方面做出的評價。 能改的地方盡量會改，也希望大家貢獻(xiàn)自己的代碼。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81673.html
摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
摘要：演示地址實時畫板聊天室你畫我猜聊天室圖片搶先看解釋關(guān)于是基于實現(xiàn)的套接字前端后端數(shù)據(jù)交互的庫，通過它的封裝，使用者可以很方便的開發(fā)，而且支持長輪詢等方法，兼容低版本瀏覽器。最后推薦一個實時的更加優(yōu)秀的游戲。 前言 一直都想好好的學(xué)習(xí)運用node，一直都不知道要做什么東西，最近Java Web老師要求做個前端的應(yīng)用，既然是前端應(yīng)用，那肯定得是單頁應(yīng)用了，而且node很適用于高并發(fā)的實時應(yīng)...
摘要：聊一聊端的即時通訊端實現(xiàn)即時通訊的方法有哪些短輪詢長輪詢流輪詢客戶端定時向服務(wù)器發(fā)送請求，服務(wù)器接到請求后馬上返回響應(yīng)信息并關(guān)閉連接。介紹是開始提供的一種在單個連接上進(jìn)行全雙工通訊的協(xié)議。 聊一聊Web端的即時通訊 Web端實現(xiàn)即時通訊的方法有哪些? - 短輪詢 長輪詢 iframe流 Flash Socket 輪詢 客戶端定時向服務(wù)器發(fā)送Ajax請求，服務(wù)器接到請求后馬上返...
閱讀 1867·2021-11-18 10:02
閱讀 3589·2021-11-16 11:45
閱讀 1884·2021-09-10 10:51
閱讀 2194·2019-08-30 15:43
閱讀 1432·2019-08-30 11:23
閱讀 1545·2019-08-29 11:07
閱讀 1962·2019-08-23 17:05
閱讀 1567·2019-08-23 16:14
