目錄
HTML+JS+websocket 實例，聯機“游戲王”對戰 1
HTML+JS+websocket 實例，聯機“游戲王”對戰 2 - 聯機模式
HTML+JS+websocket 實例，聯機“游戲王”對戰 3 - 界面布局
HTML+JS+websocket 實例，聯機“游戲王”對戰 4 - 卡組系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 5 - 卡片選中系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 6 - 卡片放置，戰場更新
HTML+JS+websocket 實例，聯機“游戲王”對戰 7 - 墓地，副控制面板
HTML+JS+websocket 實例，聯機“游戲王”對戰 8 - 返回手卡，卡組
HTML+JS+websocket 實例，聯機“游戲王”對戰 9 - 實現簡單 websocket 通信
HTML+JS+websocket 實例，聯機“游戲王”對戰 10 - 搭建游戲服務端
HTML+JS+websocket 實例，聯機“游戲王”對戰 11 - 客戶端消息的收發
HTML+JS+websocket 實例，聯機“游戲王”對戰 12 - 消息發送具體場景
HTML+JS+websocket 實例，聯機“游戲王”對戰 13 - 實機演示
概覽
在介紹詳細的游戲實現思路之前，先來談談游戲的核心——聯機模式的實現思路。雖然游戲主體是 HTML+JS 且運行在瀏覽器上，但比起頁游，該游戲的實現更像是端游，即游戲的主要文件及素材（卡牌圖片，音效等）都是提安放（下載）到本地，需要的時候從本地調用。而負責實現聯機的服務端只存儲少量的用戶信息（如用戶id），用于玩家間的信息傳遞。具體的聯機流程如下：
整體的聯機模式很簡易，采用前后端分離的方法。服務端在存儲了雙方玩家的信息之后只負責玩家間的信息傳遞（一般為JSON字符串），服務端本身幾乎不對接收的信息做任何解析，也不參與客戶端中游戲邏輯的運行，反之，客戶端中的修改也不會影響服務端接收、轉發信息，二者之間相互獨立。
舉個例子，在P1執行抽卡的時候，P1的手牌+1，此時在另一位玩家P2的屏幕中，顯示P1手牌的那個區域就要多出一張卡片。這個流程映射到聯機模式中就是，P1在執行抽卡操作的時候會同時編輯一條指令，表示自己多了一張手牌。之后P1在更新自己手牌的同時，也會將這條編輯好的指令發送給服務端，服務端首先對這條指令信息做一個簡單的解析，判斷它來源于P1，之后將這條指令原封不動的發給P2。P2接收服務端發來的指令后完整的解析指令的內容，并且執行相應的操作，即在顯示對方（P1）手卡的區域里多加載一張卡牌。
前后端分離的方式使應用的開發和維護都更為便利。編寫前端布局和游戲邏輯的時候，我可以專注于打磨游戲界面或者完善游戲功能而不需要考慮這些改動是否會影響服務端的運行，進而對聯機造成影響，畢竟這個游戲的服務端本質上只負責存儲少量玩家信息和轉發指令，只要我們保持客戶端與服務端之間信息傳遞的規范一致就不會有問題。
此外，在處理游戲 bug 時，前后端分離的寫法也能幫助我們更加快捷的定位問題的所在。比如出現圖片加載或者游戲邏輯的 bug，基本可以定位問題在客戶端上，而如果出現對方操作我方沒有及時更新的 bug，就需要率先檢查一下客戶端與服務端間的連接是否暢通，信息傳遞是否 ok。具體的聯機交互的實現方式我們放到后面專門介紹聯機的章節中來討論。
接下來的章節就從客戶端UI開始，結合游戲代碼具體談談游戲的結構，運行邏輯等的實現思路吧。
