HTML5遊戲開發進階 11:WebSocket與多人對戰模式
我們將使用HTML5 WebSocket API向我們的RTS遊戲加入多人對戰支援
11.1 使用Node.js操作WebSocket API
之前瀏覽器與伺服器之間通訊的唯一方式就是通過逐個request序列,對伺服器進行輪詢或長輪詢。雖然這些方式確實有效,但是過高的頻寬佔用率和網路傳輸延遲使它們不適合在即時的多人對戰遊戲中使用。
WebSocket API的出現改變了這一切。它在單個的TCP socket中定義了雙向的全雙通訊管道,為我們在伺服器與瀏覽器之間提供了一種高效的、低頻寬佔用率通訊方式。
簡而言之,我們可以在瀏覽器與伺服器之間建立單一、持久的連線,更頻繁地傳送和接收資料。
11.2 建立多人對戰遊戲大廳
大廳將顯示一串游戲房間的列表。玩家可以在大廳中選擇進入或離開房間。如果兩個玩家都進入了同一個房間,多人對戰遊戲就會自動開始,兩個玩家將在遊戲中進行對決。
multiplayer.js
定義多人對戰大廳介面
遊戲房間列表
進入和離開房間
11.3 啟動多人對戰遊戲
當兩個玩家都進入同一個遊戲房間中時,多人對戰遊戲模式就會啟動。我們需要告訴客戶端來載入同一個關卡。一旦兩個瀏覽器都完成了關卡的載入,那就開始遊戲。
server.js
相關文章
- HTML5遊戲開發進階 12:多人對戰遊戲操作HTML遊戲開發
- HTML5遊戲開發進階 9:新增武器和戰鬥HTML遊戲開發
- HTML5遊戲開發進階 10:完成單人戰役HTML遊戲開發
- HTML5遊戲開發進階 5 :建立即時戰略遊戲世界HTML遊戲開發
- HTML5遊戲開發進階 6 :加入單位HTML遊戲開發
- HTML5遊戲開發進階 4 :物理引擎整合HTML遊戲開發
- HTML5遊戲開發進階 3 :物理引擎基礎HTML遊戲開發
- HTML5遊戲開發進階 7 :單位智慧移動HTML遊戲開發
- HTML5遊戲開發進階 8 :新增更多的遊戲元素HTML遊戲開發
- HTML5遊戲開發進階 2 :建立基本的遊戲世界HTML遊戲開發
- HTML5移動遊戲開發高階程式設計 11:自建Quintus引擎(3)HTML遊戲開發程式設計UI
- UI自動化實戰進階PO設計模式UI設計模式
- HTML5 進階系列:web StorageHTMLWeb
- 試玩 GOWOG ,初探 OpenAI(使用 NeuroEvolution 神經進化)與 Golang 多人線上遊戲開發OpenAIGolang遊戲開發
- MySQL 進階實戰MySql
- HTML5遊戲開發進階指南(亞馬遜5星暢銷書,教你用HTML5和JavaScript構建遊戲!)HTML遊戲開發亞馬遜JavaScript
- JVM效能調優與實戰進階篇-上JVM
- 前端開發入門到實戰:HTML5進階FileReader的使用前端HTML
- HTML5進階FileReader的使用HTML
- HTML5示例之WebSocketHTMLWeb
- Webpack 實戰:入門、進階與調優(中卷)Web
- HTML5 canvas遊戲開發實戰 5 : 石頭剪刀布HTMLCanvas遊戲開發
- 前端進階系列(三):HTML5新特性前端HTML
- HTML5 進階系列:indexedDB 資料庫HTMLIndex資料庫
- HTML5 新特性之 WebsocketHTMLWeb
- websocket(html5新規範)WebHTML
- HTML5 canvas遊戲開發實戰 6 : 俄羅斯方塊HTMLCanvas遊戲開發
- HTML5移動遊戲開發高階程式設計 3:試飛結束,向移動進發HTML遊戲開發程式設計
- 機器學習30天進階實戰機器學習
- [譯] iOS 設計模式進階iOS設計模式
- 模式行::Vim進階索引[1]模式索引
- java進階(40)--wait與notify(生產者與消費者模式)JavaAI模式
- 《戰地5》多人模式試玩:傘兵的一萬種死法模式
- HTML5 進階系列:canvas 動態圖表HTMLCanvas
- 進階的Redis之雜湊分片原理與叢集實戰Redis
- HTML5(十一)——WebSocket 基礎教程HTMLWeb
- 雷霆戰機 裝備進階材料攻略
- [練手專案]Gin+websocket 的多人聊天室Web