UI 布局、适配与状态呈现
级别：首作必学。 先确定信息与操作的关系，再选择布局组件。视觉基础可读 UI Power：从零完成一套界面。
从设计稿到节点
把画面分成 HUD、棋盘、结果面板和全局提示。HUD 关注剩余回合与暂停，棋盘承载主要操作，结果面板解释输赢并提供下一步。每个区域有明确父节点和约束。
| 需求 | 常用实现 | 检查点 |
|---|---|---|
| 跟随屏幕边缘 | Widget | 是否位于安全区域内 |
| 卡牌均匀排列 | Layout 或显式网格计算 | 尺寸变化后是否仍可点 |
| 有层次的弹窗 | 独立节点、遮罩与输入阻断 | 背景不能穿透操作 |
| 可伸缩面板 | 九宫格 Sprite | 边角是否变形 |
| 动态数字与文字 | Label | 长文案、字号、截断 |
不要在同一个维度上同时让布局组件和每帧脚本争夺节点尺寸。先确定谁拥有宽高和位置。
设计分辨率不是设备像素
设计尺寸是布局依据，最终呈现会经过 Canvas 适配和设备像素比映射。不要按一张截图的像素坐标把所有对象摆死。短屏、长屏、安全区和横竖方向变化都要纳入验证。
固定棋盘的宽高比，用可用区域计算整体缩放，保留 HUD 和底部操作区。必要时限制最大棋盘尺寸，避免大屏上牌面过分分散。
微信窗口信息可从 wx.getWindowInfo() 获取，但不能假定所有机型都有安全区字段。引擎布局中的单位与平台返回的窗口坐标还要正确转换。见微信运行环境。
用完整状态渲染
render(state) 同时更新剩余回合、每张牌的正反与配对状态、结算面板和交互开关。局部增量更新可以优化，但必须保留可重建一致画面的路径。
不要让错误提示只存在一帧，也不要用颜色作为唯一输赢信号。可配合文本、图形、状态与声音。静音和色觉差异不应阻碍玩家理解核心规则。
验收动作
用长文案、双位数回合和最小目标屏幕试一次；开启弹窗后点背景；检查顶部操作是否被胶囊或安全区遮挡。拿掉口头解释，让玩家找到开始、目标和重开。
完成标准：关键文案可读，主要操作不重叠，状态转换时没有旧结果残留。