情怀cocos棋牌源代码解析(一）

简单聊一下大厅：

有没有遇到过这样的场景：一套棋牌类项目UI看起来花里胡哨，但一打开代码就抓瞎，全是打乱仗一样的节点，按钮事件散落各处，逻辑不成体系？

这次整理的这套情怀棋牌源码，至少从结构上是清爽的。前端这块是 Cocos Creator 做的，我用的是 v2.2.2 版本测试，一共600多个子模块，客户端界面多样，而且写得还挺规矩，适合拿来二开，也适合研究学习。

先从大厅说起。

经典大厅界面结构

这个大厅UI是挺典型的布局了，左边按钮栏，右边是几个功能卡片：加入房间、亲友圈、更多游戏，还有那种角色立绘女角色站C位打招呼的设定。

这套UI在资源目录下叫 UINewMain.prefab，主逻辑脚本是 UINewMain.js。我们看下最基础的按钮事件绑定逻辑是怎么写的：

onLoad() {
    this.initUI();
    this.registerBtnEvents();
}

registerBtnEvents() {
    this.node.getChildByName("btn_joinRoom")
        .on('click', this.onJoinRoomClicked, this);
    
    this.node.getChildByName("btn_createRoom")
        .on('click', this.onCreateRoomClicked, this);

    this.node.getChildByName("btn_moreGame")
        .on('click', this.onMoreGameClicked, this);
}

每个按钮都明确挂了函数，点击事件的命名也清晰，用的是 Cocos 标准方式，没有乱写在 update 里。this.node.getChildByName() 这套查找写法在早期版本比较常见，但更推荐的是后期直接用 cc.find() 或者用 @property 注入。

大厅Prefab结构编辑器

我们从图10可以看到这个Prefab结构，界面中分层明确，每个子节点命名基本规范（虽然不够强迫症标准），主要模块都集中在一个根节点下面，这样导出包体的时候比较清晰。

右边 Inspector 面板是这个节点的