HTML+JS+websocket 实现联机“游戏王”对战（二）- 联机模式

---

目录：

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置，战场更新
游戏王联机卡牌对战 7 - 墓地，副控制面板
游戏王联机卡牌对战 8 - 返回手卡，牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

概览

在介绍详细的游戏实现思路之前，先来谈谈游戏的核心——联机模式的实现思路。虽然游戏主体是HTML+JS且运行在浏览器上，但比起页游，该游戏的实现更像是端游，即游戏的主要文件及素材（卡牌图片，音效等）都是提安放（下载）到本地，需要的时候从本地调用。而负责实现联机的服务端只存储少量的用户信息（如用户id），用于玩家间的信息传递。具体的联机流程如下：

整体的联机模式很简易，采用前后端分离的方法。服务端在存储了双方玩家的信息之后只负责玩家间的信息传递（一般为JSON字符串），服务端本身几乎不对接收的信息做任何解析，也不参与客户端中游戏逻辑的运行，反之，客户端中的修改也不会影响服务端接收、转发信息，二者之间相互独立。

举个例子，在P1执行抽卡的时候，P1的手牌+1，此时在P2的屏幕中，显示P1手牌的那个区域就要多出一张卡片。这个流程映射到联机模式中就是，P1在执行抽卡操作的时候会同时编辑一条指令，表示自己多了一张手牌。之后P1在更新自己手牌的同时，也会将这条编辑好的指令发送给服务端，服务端首先对这条指令信息做一个简单的解析，判断它来源于P1，之后将这条指令原封不动的发给P2。P2接收服务端发来的指令后完整的解析指令的内容，并且执行相应的操作，即在显示对方（P1）手卡的区域里多加载一张卡牌。

前后端分离的方式使应用的开发和维护都更为便利。编写前端布局和游戏逻辑的时候，我可以专注于打磨游戏界面或者完善游戏功能而不需要考虑这些改动是否会影响服务端的运行，进而对联机造成影响，毕竟这个游戏的服务端本质上只负责存储少量玩家信息和转发指令，只要我们保持客户端与服务端之间信息传递的规范一致就不会有问题。

此外，在处理游戏bug时，前后端分离的写法也能帮助我们更加快捷的定位问题的所在。比如出现图片加载或者游戏逻辑的bug，基本可以定位问题在客户端上，而如果出现对方操作我方没有及时更新的bug，就需要率先检查一下客户端与服务端间的连接是否畅通，信息传递是否ok。具体的联机交互的实现方式我们放到后面专门介绍联机的章节中来讨论。

接下来的章节就从客户端UI开始，结合游戏代码具体谈谈游戏的结构，运行逻辑等的实现思路吧。