网页游戏前端开发：19年交互设计师的避坑指南

文章配图，仅供参考

　　我说优胜劣汰是优点，不是客气话。是真淘汰得快，快得你连补丁都来不及打完，用户就切走了。上个月上线那个H5卡牌项目，上线第三天DAU跌穿警戒线，运营喊救命，我打开Chrome DevTools，看到fetch请求发了三次才拿到JSON——第一次timeout，第二次返回了个空数组，第三次才对。但UI层早把“已加载”状态锁死了，用户点十次抽卡按钮，只响一次音效，后台却在默默堆队列。这个我敢打包票：音频上下文没销毁，重复resume()报错被console.error吞了，而我们监听的是click，不是canplaythrough。可谁去查音频？大家都盯着canvas帧率。

　　机房空调坏了三天，整层楼靠两台立式扇吹。张工蹲在服务器机柜前用手机热点测CDN节点延迟，衬衫后背湿透一片，像拓印了一张中国地图。他接电话时说“嗯…对…再压两百K”，挂了回头冲我咧嘴笑，门牙上沾着韭菜。我没接话，盯着他身后屏幕上飘过的WebAssembly编译警告：wasm-function[1432] stack overflow —— 但游戏还能跑，血条动得挺欢。我说不准这是不是真正的问题。可能是，也可能只是V8一个优化陷阱，在Chrome 124里自动绕开了。谁知道呢。

　　我原以为手势识别层只要接好Hammer.js就能稳，结果安卓微信X7.0.22里双指缩放直接触发两次touchcancel，中间间隔十八秒——等等，十八秒？不对，是三秒。我刚查了录像。反正用户滑动半屏，精灵位置突变，战斗动画跳帧，然后静音了。静音？对，静音。AudioContext suspend了，没人告诉前端要监听页面可见性变化时手动resume。但美术总监当时在隔壁敲桌子：“音效师说配乐没问题！”——他敲的是实木桌沿，三下，很脆，像骨牌倒。后来我才发现他左手小指缠着创可贴，昨天切西瓜划的。

　　有个坑我不提心里痒：Canvas2D上下文在Safari 16+里resize画布后，不重置transform，所有坐标全偏移。我们调了十七个小时，最后是实习生用iPad Air（第4代）连着Mac录屏，慢放逐帧发现——人物从左往右跑，跑到屏幕中线时，影子突然向左甩出去半米。就是那一帧。不是动画逻辑错，是ctx.setTransform(1,0,0,1,0,0)漏写了。这个漏，不是代码没写，是写了，但被webpack split chunk时，误判成“未使用模块”给tree-shaking掉了。为什么？因为那个函数名叫resetCtxMatrix，而项目里另一处用了resetMatrix——俩名字太像，Tree Shaker手滑了。我们没加/#__PURE__/注释。纯手工失误。我吐了口浊气，外卖盒还搁桌上，红油凝在凉掉的酸辣粉表面，浮着三颗花椒。

　　有人非要说PWA缓存策略能救加载速度。扯淡。缓存清单里漏了一张技能图标，base64编码写错两位，导致整个manifest.json解析失败——然后所有资源退化回HTTP明文请求，缓存完全失效。可用户根本不知道发生了什么，只觉得“进游戏慢”。他们点退出，换竞品。这哪是技术问题？这是交互信任崩塌的起点。就像你给人递杯水，杯子底儿裂了，水渗进他袖口——他不会怪杯子，他下次直接绕开你。

　　陈默那天凌晨两点发来截图，是玩家在TapTap评论区扒出来的bug：连续快速点击锻造炉，角色模型会叠成三重影，其中一影的武器朝向是镜像翻转的。我放大看，发现是Three.js的Object3D.rotation.y被累加了-π而不是π，但渲染层用了quaternion.slerp插值……算了。他截图底下还粘了张便利贴照片：“妈问啥时候回家。”我没回。盯着自己右手指甲盖里那点墨水——上次修矢量图标留的，洗不净。

　　优胜劣汰不是赞美，是描述。它不讲体面，不给试错周期，更不区分“设计决策”和“实现妥协”。用户手指悬停0.3秒就触发tooltip？行。但tooltip里的文字字号如果设成rem，iOS Safari会偷偷把行高缩到0.8，字压在一起像挤地铁——这个我说不准是不是iOS通病，还是我们用了旧版PostCSS插件。反正删了font-size: 1.2rem那行，改用px，tooltip活了。我也不清楚原理，就记得当时窗外开始下雨，雨刮器在停车场那辆灰色比亚迪车窗上左右左右左右地扫，节奏很稳。

　　别信“渐进增强”。真遇到WebGL fallback到Canvas2D，再fallback到DOM，三层之间切换时的输入延迟能让你怀疑人生。我们曾为一个旋转陀螺控件写过五套实现，最后线上跑的是第二套——不是因为它最稳，是因为第一套在OPPO Reno5上崩溃，第三套在小米12里触控坐标错乱37像素，第四套……算了，第四套的作者离职了，git log里只留了一句commit message：“累了，用setTimeout兜一下”。兜住了。用户觉得丝滑。这就够了。

　　我上周重装了VS Code，插件全删，只留ESLint和Prettier。打开老项目，光标停在index.html第一行，没动。桌上外卖盒空了，塑料盖掀开盖在盒上，像一座歪斜的小坟。隔壁工位李婷在哼《晴天》，跑了三个调，最后一个音破了。她剪指甲，咔、咔、咔，三声。我没抬头。

　　现在我只做一件事：每次PR合入前，自己用三台真机——iPhone SE二代、Redmi Note9、Pixel 4a——各点二十次“进入副本”。不看日志，不连debugger。就点。点完，看有没有一次没响应，有没有一次音效没响，有没有一次角色没朝向目标。有的话，回滚。没有，再等十二小时。让灰度扛过去。至于那些还没爆出来的bug？让它爆。爆得越早，埋得越浅。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!