方格屋开发日记 — 2026年3月31日（周二）
修改于04/049 浏览开发日记
方格屋 · 上线后第 2 天
今日概况
| 项目 | 详情 |
|------|------|
| 开发时段 | 08:23 - 22:23 |
| 版本 | v0.9.32 → v0.9.42 |
| commit 数 | 25（含跨零点的 4/1 凌晨 commit） |
今天做了什么
今天的主题可以用两个字概括：视频和防抖。
视频播放的手机端适配是上午到下午的主旋律。先是做了视频预加载改为非阻塞（v0.9.33），避免卡住免责声明页。然后发现手机端视频播放根本就失败——根因是编码参数不对，花了一下午做了三种尝试：
- 视频格式根因修复（v0.9.34）：faststart + Main profile + 降码率。但手机端还是不行。
- CDN直连探测（v0.9.35）：写了一套探测式URL解析器想绕过blob URL。结果 AsyncLoad 假阳性 + base URL不可知，方案不通。
- 最终方案——撤回CDN探测（v0.9.36），改为移动端图片幻灯片模式（v0.9.37）：22张首尾帧截图 + crossfade动画，PlatformUtils自动检测平台切换模式。桌面端继续用视频，手机端用图片序列。这套方案彻底解决了问题。
手机端检测也折腾了一轮（v0.9.38）。最初用 User-Agent 判断，但 WASM 环境拿不到。最终用 DPR + 逻辑宽度推断——DPR >= 2 且逻辑宽度 <= 500px 就判定为手机。
点击防抖是下午到晚上的主题。手机端触摸会同时触发 Touch 事件和模拟的 Mouse 事件，导致一次点击被处理两次。做了三层加固：
Touch + 模拟Mouse双击去重，250ms窗口（v0.9.40）
Grid返回ignore防止重复扣分（v0.9.41）
终幕不扣分 + 桌面端isMobileWeb修复（v0.9.41）
另外发现 os.clock()
在 WASM 环境下返回值不对，防抖时间戳全部改用 time:GetElapsedTime()
今天卡过的地方
- 手机端视频播放：这个问题前后折腾了三种方案。最初以为是编码参数问题（码率/profile），后来怀疑是URL解析问题（blob URL），最终发现 WASM + 移动浏览器的视频支持本身就不靠谱。图片幻灯片方案虽然"笨"，但最稳。教训：面对平台兼容性问题，优雅的方案不如稳定的方案。
- os.clock() 的 WASM 陷阱：这个坑很隐蔽。os.clock() 在原生环境返回CPU时间，但在 WASM 里返回值完全不对（可能是0或者极小值），导致250ms的防抖窗口形同虚设。改用引擎的 time:GetElapsedTime() 之后立即好了。
- Touch/Mouse 双重触发：手机浏览器为了兼容性会把 Touch 事件模拟成 Mouse 事件。一次手指点击 = 1次Touch + 1次Mouse = 方格被点了两次。这种平台差异如果不在真机上测根本发现不了。
碎碎念
手机端适配真的是"表面上没几个bug，实际上每个都要命"。视频播放折腾了三种方案才找到稳的，点击防抖加了三层才堵住。这些问题在桌面端一个都不存在。
不过今天最大的收获是序幕系统v5的双模式架构——桌面端视频、移动端幻灯片，PlatformUtils自动切换。虽然做的过程很痛苦，但结果是一套真正跨平台可用的方案。以后遇到类似的视频兼容性问题可以直接复用这个思路。