基于WebSocket的方格游戏(online)

该项目主要基于Node.js以及Vue开发完成，当前版本能够支持多人同时在线游玩、游戏匹配、消息通知等功能。

• 客户端和服务器通信使用WebSocket实现
• 客户端使用Vue+Element UI+Canvas实现

1 踩坑记录

虽然这是个很小的项目，但是在开发的过程中我们也遇到了很多的问题，我们将一些有意思的问题记录在这里。

• 如何使用VSCode网页版浏览Github项目？将原Github项目地址的github.com修改为github1s.com

• Vue中子组件同时向父组件传递多个值怎么实现？答案

• Vue怎么和WebSocket完美结合在一起，方便开发？答案

• 左右布局怎么实现？flex？absolute布局？答案

• websocket客户端在连接服务器的时候如何处理连接失败的情况？

• 子组件如何针对父组件中数值的改变进行相应的处理？

  • 使用watch或者computed即可更新

• 如何合理地设计该项目框架，尽可能降低各个模块之间的耦合性？

• vue中watch和computed的用法以及区别？

• 玩家建立游戏房间成功之后，应该怎样设计房间的通信？经过服务器进行通信还是将其中一个玩家作为服务器负责整个游戏过程中的通信？

  • 以我个人的理解，使用服务器作为通信中介或者使用某个玩家作为通信服务器没有本质的区别，仅仅是为了完成游戏过程中的信息传输。如果仍然使用服务器作为传输中介，则在更新玩家的游戏状态的时候需要附加上相应的游戏房间信息以便于服务器端对操作的合法性和逻辑的正确性进行判断，这个过程可能会加重服务器端的通信压力，不过在玩家数量较小的时候应该是完全没有问题的，可能需要进行压力测试找到极限值。而如果对房间内的玩家新建一个临时服务器，则能够有效地降低服务器的压力，从而使得单台服务器能够容纳更多的玩家。不过，在实现上的难度会略微较高，在游戏的前期开发过程中可以暂时不考虑这种实现方式。最后，考虑到该游戏的游戏特点，其最常见的使用场景是玩家自发开启局域网游玩，使用全局服务器进行游玩的玩家应该相对较少，因而优先实现使用服务器作为在线房间通信媒介的方法。

2 部分界面截图

3 客户端和服务器通信协议设计（TODO）

根据功能模块划分，客户端和服务器之间的通信内容主要包括如下几个模块：

1. 登录模块
2. 玩家状态更新模块
3. 匹配模块
4. 在线房间模块
5. 大厅聊天模块

下面，针对每一个模块的通信协议进行详细的设计。

3.1 登录模块

3.2 玩家状态更新模块

3.3 匹配模块

3.4 在线房间模块

该模块是整个项目的核心模块，也是开发难度最高的一部分。相比于其他模块，其复杂度主要体现在：

1. 客户端需要循环往复和服务器进行通信，从而确保游戏正常有序的进行；
2. 游戏过程中涉及到的状态转换较多，因而在设计实现的时候需要考虑的内容更多。

3.5 大厅聊天模块

4 总结

虽说这个在线游戏项目比较简单，但是麻雀虽小，五脏俱全，该游戏中包含了大多数项目开发过程中可能涉及到的问题，我印象深刻的几点包括：代码重用、模块划分、通信协议设计等等，在设计并开发该项目的过程中，很多时候就是因为前期的规划设计不到位，导致开发效率低、重复修改代码等等。因此，在开始动手实现之前，一定要详细的设计好整体的框架以及相关规范，这能够大大提升开发效率以及代码的可读性。