Lizhiyu's Blog

Lizhiyu's Blog

Make a multiplayer card game - Episode 5 | Create 2D graphical interface with Cocos Creator

Lizhiyu's photo
·Apr 3, 2022·

This chapter is almost a month away from the previous chapter. During this period, it is mainly about the transformation and reconstruction of the client. The content of the overall client is almost completely different from the command-line version of the previous chapter.

According to the previous plan, I converted all the code written in JS to TS and transplanted the command-line interactive interface to the conventional game interactive interface (using cocos creator game engine).

Previously, in order to quickly realize the function, the server and client used only one file to encode. Up to now, the client code of the project has been modularized, and the classic PureMVC library has been introduced to completely decouple the UI interaction and data, network messages and game operation logic, so as to create conditions for extracting the code of the framework independent of the game engine (it is planned to use one framework to access different view layer engines).

PureMVC has been introduced in previous articles. The core idea is to decouple view and data. The data is processed by proxy and the facade is controlled by proxy.

Compared with the previous version, some changes are involved: -The difference between socket and web socket API. It mainly includes the names of several monitored events and the interfaces for sending messages. -UI display layer independent. Command line output and game engine rendering view interactive operation interface.

demo url



之前为了快速实现功能,服务器和客户端分别只用一个文件进行编码。 截至目前,项目客户端代码进行了模块化改造,引入了经典的PureMVC库,将UI交互和数据,网络消息和游戏操作逻辑完全解藕,为后面提取与游戏引擎无关的框架(计划用一个框架接入不同视图层引擎)代码创造条件。

在之前的文章里面已经介绍过PureMVC,核心的思想就是视图与数据解藕。 通过一个门面类(Facade)来统管框架,用视图代理(Mediator)控制显示组件逻辑,用数据模型代理(Proxy)存储和处理数据。


  • socket 和 web socket api 的区别。主要是几个监听的事件名字,和发送消息的接口。
  • ui显示层独立。命令行输出和游戏引擎渲染视图交互操作界面。

demo url

Did you find this article valuable?

Support Lizhiyu by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors