前言
最近在用 AI 辅助开发一款微信小游戏（水排序解谜类型）。功能逻辑写完后自己反复体验，发现了9个影响用户体验的问题——不是崩溃级的Bug，而是那种「说不出哪里不对，但就是不够舒服」的细节。
这篇记录几个最有代表性的问题和我的解决思路。
问题1：瓶子装满后不自动入袋——时序竞争导致的死锁
现象： 游戏里有个机制——瓶子装满同色液体后，会自动盖塞然后飞进对应颜色的袋子里。但偶尔瓶子盖了塞就不动了，卡在原地。
根因： 原来的逻辑是瓶塞盖好后等1.2秒，尝试一次匹配袋子。如果这一次没匹配上（对应袋子正在切换中），就再也不会重试了。典型的单次触发 + 时序竞争问题。
解决方案：三重兜底。
- 瓶塞回调——600ms后首次尝试匹配
- 新袋子落入时——扫描所有已盖塞的瓶子，二次匹配
- 主循环定时扫描——每300ms兜底检查一遍
三道保险，不依赖单点触发，彻底消灭时序竞争问题。
启发： 异步操作 + 队列 + 动画三者组合时，时序问题会成倍复杂。与其把单个触发点做到100%可靠，不如多加几道兜底。
问题2：动画等待太久——2.25秒的隐形杀手
现象： 瓶子装满到飞入袋子，整个过程要等2.25秒。在手游里，每步操作后等2秒多，几步下来用户就觉得「这游戏好慢」。
优化过程： 逐环节拆解等待时间：
| 阶段 | 优化前 | 优化后 |
|---|---|---|
| 盖塞→匹配 | 1200ms | 600ms |
| 袋子高亮 | 300ms | 100ms |
| 瓶子抬起 | 150ms | 100ms |
| 弧线飞行 | 600ms | 450ms |
| 总计 | 2250ms | 1250ms |
原则： 不是删动画，是压缩无意义的等待。视觉反馈要保留（让用户看到发生了什么），但不让人干等。
问题3：打乱功能的层数突变——技术正确≠产品正确
现象： 游戏有个「打乱」功能，重新排列瓶子里的液体。用户反馈：「瓶子本来是2层颜色，打乱后变成3层了」。
根因： 原来的打乱方式是逐格随机。[红, 蓝, 蓝] 打乱后可能变成 [红, 蓝, 红]——颜色总量没变（1红+2蓝），但视觉从2层变成了3层交替。
修复： 改为按颜色段整体打乱。先识别连续同色段（蓝蓝是一段，红是一段），然后只交换段与段的顺序。颜色序列变了，但层数永远不变。
启发： 逻辑上的「正确」和用户感知的「正确」不是一回事。程序觉得颜色总量没变所以没错，但用户看到层数变了就觉得有Bug。做产品要站在用户的眼睛后面想问题。
问题4：瓶子外观升级——透明玻璃效果的实现
需求： 把旧的灰色圆柱瓶升级成透明玻璃瓶。核心挑战：图片是不透明的，直接贴上去会遮住里面的液体。
方案： 用 Canvas globalCompositeOperation = 'screen' 混合模式。原理：图片中深色部分自动变透明，亮色部分（高光、轮廓线）正常显示。先画液体，再用 screen 模式叠加玻璃瓶图片，就能实现「透过玻璃看液体」的效果。
连锁问题： 换了新瓶子后，液体渲染溢出到瓶颈区域——旧的几何参数是按旧瓶子比例设的。修复方式：逐个测量新瓶子各部位的像素比例，调整 neckH、shoulderH、rimW 等参数，让液体起始线精确对齐新瓶子的肩部底部。
其他优化点
| 问题 | 解决方案 |
|---|---|
| 装袋后不连锁触发 | 新袋子落入后自动扫描所有已盖塞瓶子 |
| 闯关后等太久 | 通关后0.4秒直接切页 |
| 排行榜位移错位 | 被超越者及下方所有人排名+1 |
| 袋子颜色随机 | 改为按难度固定排序 |
通用方法论：四步定位法
不管什么问题，我的处理步骤：
- 准确描述 — 不是「有Bug」，而是「在什么操作下出现什么结果，差了多少」
- 加日志找数据 — 不凭感觉猜，让程序输出关键环节的实际数据
- 从数据找根因 — 表面是A的问题，根源可能在B
- 精准修复+验证 — 只改该改的，改完回归测试
小结
这9个问题单个都不大，但加在一起就是用户对产品的全部感知。快一倍的速度、不卡住的流程、不会出错的功能、精致的视觉细节——这些「看不到」的东西，才是用户愿意继续玩下去的原因。
