成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

XanaHopper / 3291人閱讀

摘要：使用即可完成一個(gè)很有意思的在線游戲作品。你畫我猜，相信大家對(duì)這個(gè)游戲都很熟悉。我用實(shí)現(xiàn)了你畫我猜這個(gè)游戲?？梢孕薷漠嫻P顏色，粗細(xì)，進(jìn)行撤銷，恢復(fù)，清空等操作。第一個(gè)猜完后，游戲時(shí)間縮短為秒。

使用 websocket + vue2 即可完成一個(gè)很有意思的在線游戲作品。
你畫我猜，相信大家對(duì)這個(gè)游戲都很熟悉。
我用Vue2 + mint-ui + nodejs + websocket 實(shí)現(xiàn)了你畫我猜這個(gè)游戲。
建議移動(dòng)端打開(kāi)效果更佳(可掃下方二維碼)，PC端需要使用谷歌開(kāi)發(fā)者模式，然后使用移動(dòng)調(diào)試工具，才可以正常使用（主要是一些touch事件，pc不支持）。

大家可以拉上一兩個(gè)人，來(lái)開(kāi)個(gè)房間試試看，體驗(yàn)體驗(yàn)效果。
http://yd.diamondfsd.com

主要實(shí)現(xiàn)了以下這些功能

大廳功能

個(gè)人信息顯示
頂部顯示個(gè)人昵稱，可以修改
暫時(shí)不支持上傳頭像，頭像用昵稱第一個(gè)字母代替
暫時(shí)使用 localStorage 儲(chǔ)存基本基本個(gè)人信息（昵稱,token等）
實(shí)施更新房間列表，在線人數(shù)等信息

創(chuàng)建游戲房間
房間名稱:
房間類型：公開(kāi)（可以在游戲大廳被看到），私有（可以通過(guò)游戲大廳左上角查找房間號(hào)進(jìn)入）

加入房間
公開(kāi)房間加入： 直接在首頁(yè)游戲大廳的房間列表里面點(diǎn)擊加入即可
私密房間加入： 掃秒二維碼或者輸入房間號(hào) （二維碼由客戶端使用js生成，暫未實(shí)現(xiàn)）
房間人滿后不可加入
房間游戲開(kāi)始后不可加入
后期可加入觀戰(zhàn)功能
當(dāng)游戲人數(shù)大于等于2或者以上的時(shí)候，可以開(kāi)始游戲。
房間內(nèi)可以聊天，默認(rèn)第一個(gè)進(jìn)入房間的人是房主，房主可以開(kāi)始游戲。

游戲主功能

使用 canvas 做畫布，通過(guò)websocket實(shí)時(shí)發(fā)送動(dòng)作，全圖數(shù)據(jù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)筆跡，和最終圖片一致性。
可以修改畫筆顏色，粗細(xì)，進(jìn)行撤銷，恢復(fù)，清空等操作。


每輪游戲結(jié)束后公布答案，預(yù)置了一些快捷短語(yǔ)可以恢復(fù)。 游戲過(guò)程中 作畫者 不可以發(fā)文字聊天，其他玩家通過(guò)發(fā)文字猜答案。
第一個(gè)猜對(duì)的 3 分， 第二個(gè)猜對(duì)的 2 分。 剩下猜對(duì)的1分。 第一個(gè)猜完后，游戲時(shí)間縮短為 30 秒。每個(gè)人猜對(duì)后，作畫者+1分

項(xiàng)目結(jié)構(gòu)

這個(gè)游戲由兩個(gè)項(xiàng)目組成，一個(gè)是前端，一個(gè)是服務(wù)端
前端 github-you-draw-i-guess
前端項(xiàng)目由 Vue2 + mint-ui + vuex + vue-router 完成的單頁(yè)面app。 使用 websocket 和服務(wù)端進(jìn)行通訊，所有的接口都由 websocket 完成

WebSocket 服務(wù)端 github-ydig-websocket
服務(wù)端主要就是用了 ws 這個(gè)庫(kù)，和 babel 來(lái)支持一些 es6 的語(yǔ)法來(lái)完成的。
服務(wù)端承載了所有的游戲相關(guān)邏輯和一些數(shù)據(jù)。 但是因?yàn)闆](méi)有經(jīng)過(guò)足夠的測(cè)試，肯定還是有不少bug的。

另外，沒(méi)有做數(shù)據(jù)儲(chǔ)存，所有的數(shù)據(jù)都儲(chǔ)存在當(dāng)次運(yùn)行的服務(wù)內(nèi)存里，所以服務(wù)重啟后，所有的數(shù)據(jù)就清空了，哈哈，主要是我懶，就沒(méi)做數(shù)據(jù)儲(chǔ)存了。

這個(gè)也就簡(jiǎn)單介紹一下這個(gè)項(xiàng)目，以及開(kāi)放出源代碼供大家參考研究。那個(gè)服務(wù)器承載量不大，卡卡的也不要見(jiàn)怪。另外有什么bug 大家可以在 github 上提 issue。 還有就是，歡迎大家貢獻(xiàn)代碼，雖然真?zhèn)€項(xiàng)目也是我亂寫的，還是希望有人能看得懂呀。 :)

項(xiàng)目源碼

前端: github-you-draw-i-guess
WebSocket 服務(wù)端: github-ydig-websocket
在線演示地址: http://yd.diamondfsd.com
在線演示二維碼:

個(gè)人博客: https://diamondfsd.com

總結(jié)

從整個(gè)項(xiàng)目來(lái)說(shuō)，前端，后端，UI，業(yè)務(wù)邏輯，都是我苦思冥想做出來(lái)的。剛開(kāi)始是想做微信版的，使用微信登錄來(lái)儲(chǔ)存用戶數(shù)據(jù)，可是后來(lái)發(fā)現(xiàn)必須要企業(yè)服務(wù)號(hào)才能申請(qǐng)到相關(guān)接口。然后項(xiàng)目就停了一段時(shí)間。
這段時(shí)間比較空閑了，就想了一個(gè)簡(jiǎn)單的辦法，既然是一個(gè)開(kāi)放式的游戲，就根本不需要登錄呀。所以變成了人人進(jìn)入就可以玩的一個(gè)項(xiàng)目。 可以從微信打開(kāi)，qq打開(kāi)，微博打開(kāi)，只要支持h5的瀏覽器都可以打開(kāi)。
歡迎大家對(duì)項(xiàng)目的各方面做出的評(píng)價(jià)。 能改的地方盡量會(huì)改，也希望大家貢獻(xiàn)自己的代碼。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81673.html

相關(guān)文章

  • 使用 Taro 寫一個(gè)你畫我猜的小程序

    摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺(tái)用寫，使用選來(lái)做。這里使用做畫布是有問(wèn)題的，它不支持。游戲同步問(wèn)題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺(tái)用php寫，websocket使用選workman來(lái)做。 這里使用Taro做畫布是有問(wèn)題的，它不支持h5。 選型的問(wèn)題 taro 不支持畫布的H5...

    jkyin 評(píng)論0 收藏0

  • 使用 Taro 寫一個(gè)你畫我猜的小程序

    摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺(tái)用寫，使用選來(lái)做。這里使用做畫布是有問(wèn)題的，它不支持。游戲同步問(wèn)題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺(tái)用php寫，websocket使用選workman來(lái)做。 這里使用Taro做畫布是有問(wèn)題的，它不支持h5。 選型的問(wèn)題 taro 不支持畫布的H5...

    TANKING 評(píng)論0 收藏0

  • 基于 socket.io 實(shí)現(xiàn)實(shí)時(shí)你畫我猜游戲

    摘要：演示地址實(shí)時(shí)畫板聊天室你畫我猜聊天室圖片搶先看解釋關(guān)于是基于實(shí)現(xiàn)的套接字前端后端數(shù)據(jù)交互的庫(kù)，通過(guò)它的封裝，使用者可以很方便的開(kāi)發(fā)，而且支持長(zhǎng)輪詢等方法，兼容低版本瀏覽器。最后推薦一個(gè)實(shí)時(shí)的更加優(yōu)秀的游戲。 前言 一直都想好好的學(xué)習(xí)運(yùn)用node，一直都不知道要做什么東西，最近Java Web老師要求做個(gè)前端的應(yīng)用，既然是前端應(yīng)用，那肯定得是單頁(yè)應(yīng)用了，而且node很適用于高并發(fā)的實(shí)時(shí)應(yīng)...

    jsummer 評(píng)論0 收藏0

  • 聊一聊Web端的即時(shí)通訊

    摘要：聊一聊端的即時(shí)通訊端實(shí)現(xiàn)即時(shí)通訊的方法有哪些短輪詢長(zhǎng)輪詢流輪詢客戶端定時(shí)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接。介紹是開(kāi)始提供的一種在單個(gè)連接上進(jìn)行全雙工通訊的協(xié)議。 聊一聊Web端的即時(shí)通訊 Web端實(shí)現(xiàn)即時(shí)通訊的方法有哪些? - 短輪詢 長(zhǎng)輪詢 iframe流 Flash Socket 輪詢 客戶端定時(shí)向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返...

    KevinYan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<