Awards Racing

一个游戏做成网站，最难的不是玩法，是让人愿意开始。这一支的解法是把玩家放进一个他本来就熟悉的处境里。

进游戏之前先到车库。屏幕左边写着 VISITOR-152、JUNIOR DESIGNER · LVL 1，车顶上坐着一只戴着尖帽的紫色小怪物，车身贴满贴纸，其中一张写着 ALIGNMENT? MORE LIKE ALIGN-MAYBE。右边是当日最佳车手榜，名字是 NEWCOMER-9、CURATOR-777、THINKER-576、AUTEUR-22、RUNNER-341，队名是 TEAM BÉZIER、TEAM 4O4、TEAM NAN、TEAM OFF-BY-ONE、TEAM SEGFAULT。

这些名字不是随便起的。它们全部来自做设计和写前端的人每天会遇到的东西，看懂一个就会想看下一个，而看懂的过程本身就是被拉进去的过程。

按回车进入赛道。地面是一片群青色，白线把它划成不规则的多边形，像一张放大的分区图。车顶视角俯视，右侧四个圆形仪表分别是 DESIGN、USABILITY、CREATIVITY、CONTENT，顶部是倍率和已跑米数，旁边是赞的计数。

把评分维度做成仪表这一步，是整个项目最聪明的地方。任何在这个圈子里待过的人都认得这四个词，不需要教程解释它们是什么。游戏借了现成的认知，省掉了一整套新手引导。

赛道上散落的障碍物是设计软件的应用图标，做成方块在空中慢慢转。捡的东西是蓝色的赞和一杯咖啡。

关卡往后推进的时候整个世界会换一次配色。实测跑到后面，那片群青变成了洋红，图标方块也跟着变成同一个色系，密度比第一关高出一截。

游戏的记分方式是米数加赞。捡到赞之后，右侧仪表里的 CREATIVITY 从 50 涨到了 52。也就是说在这个世界里，赞真的能换分数，而这句话既是玩法，也是这个项目想讲的那个笑话。

这个站的界面几乎全是屏幕上的一层 HUD，而它的组织方式是按功能分区，不是按视觉分区。

左上角是标识，左下角是一排键位提示——方向键 DRIVE、Q 键 FIRE、E 键 BOOM、Shift 键 NITRO、空格 JUMP、R 键 RESTART，每个键位都画成一个真实的键帽。左侧中段是三个道具计数，右侧是四个评分仪表，顶部中间是倍率和米数，右上角是暂停和分享。

四个角各管一件事，中间整片让给赛道。这个分法在游戏里是常识，但放在网页上值得记。HUD 越往边上贴，可玩的面积就越大，而网页上大部分浮层的做法恰恰相反，喜欢往中间放。

左下角还挂着一个实时帧率读数，写着 60 FPS。一个面向大众的游戏把帧率直接印在屏幕上，是在对着懂行的人说话——这个项目的受众本来就是同行。

帧率读数旁边那个齿轮打开一块白色面板，里面四组选项。MOOD 是 Auto / Day / Night，CAMERA 是 Auto / Side / Follow，ECO QUALITY 带一条滑杆，说明文字写着标准阴影加简化辉光、性能稳定，Limit FPS 是 60 / 30 / MAX。

最后一组最有意思。WebGL2 和 WebGPU 两个单选项，WebGPU 在实测机器上是灰的。把渲染后端做成用户可选，而不是代码里自动判断，这在网页项目里很少见。它意味着这套渲染是照着两个后端各写了一遍的。

颜色没有固定的品牌色，每一关换一套。界面这一层始终是白色描边加半透明底，压在任何配色上都读得出来。

最见功夫的是节拍同步，而且它的做法便宜得出奇。

页面加载了 6 首背景音乐，文件名是 chrome-vortex、out-of-office、rocket-burst、emerald-mechanism、hot-and-nebula-papapa、evil-genius-ks-remont-u-sani，每首 1 到 1.5 MB。除此之外还有 6 个同名文件，后缀是 .beats，每个只有 1 到 3 KB。

也就是说每首曲子的节拍点是离线算好的，做成一份一两千字节的表随曲子一起发。运行时不需要做频谱分析、不需要 AnalyserNode、不需要在音频线程上算能量峰值，只要读表对时间。团队自述里说角色不用传统骨骼，而是用会弹的质点搭起来、跟着音乐一起晃，这两件事拼在一起就是完整的做法。节拍表给时机，质点系统给动作。

要照着做的人可以直接用这个思路。凡是节目内容在发布前就定死的——背景音乐、过场、片头——把分析结果预计算成数据文件永远比运行时分析划算，成本从每帧几毫秒降到一次几毫秒的文件读取。只有用户自己上传音频的场景才非得实时分析不可。

物理是一份 233 KB 的 wasm，文件名就叫 physics.wasm，解压后 529 KB。团队说用的是 Bullet，打包文件里也确实只有 bullet 这个词出现过一次，其余物理相关的符号都在 wasm 里，从 JS 侧看不到。

三维资产的组织方式同样直接。主文件叫 everything5.glb，1.53 MB，解压后 3.32 MB，名字就说明了它是什么——整个世界打进一个文件。另外三个是 env.glb 271 KB、collectables.glb 93 KB、collectable-2.glb 60 KB。加起来不到 2 MB 的几何体撑起整张赛道。

光照走的是基于图像的那一套。页面拉了两组 EXR 立方体贴图，文件名是 m2_px 到 m2_nz、m3_px 到 m3_nz，每组六个面，另外还有一张 342 KB 的 brdf_LUT_512.exr。那张查找表是物理渲染里算镜面反射的标准配件，出现在这里说明材质是按 PBR 走的，不是贴图硬画的。

画布是 1920×945，和显示尺寸一致，没有超采样，但开了 4 倍多重采样。赛道上那些图标方块的边缘能看到红青色散，说明后期还过了一道色差。

实测在赛道上跑，240 帧里平均 60 帧，p95 帧耗时 17 毫秒，最差的一帧也是 17 毫秒，卡顿帧 0%。

这个站没有为减弱动画做任何准备。样式表里一条 prefers-reduced-motion 规则都没有。这一条在游戏上比在普通网站上更难办，因为动画就是内容本身，但至少那个 Limit FPS 里的 30 和 ECO QUALITY 的滑杆，给了愿意找的人一条降档的路。

声音默认关着。页面上没有一个 audio 标签，全部走 Howler，实测 Howler 的音量是 0，要手动打开。

一次冷访问是 24.9 MB、378 个文件，对一个游戏来说不算多。

拆开看，音乐 8.09 MB 是最大的一块，其次是图片：avif 4.26 MB、jpg 3.22 MB、png 1.82 MB、webp 1.64 MB、svg 417 KB，加起来 11.3 MB。三维模型 1.95 MB，脚本 1.07 MB，音效 wav 1.02 MB，EXR 环境贴图 847 KB，wasm 234 KB。

这份清单里有一个值得记的空位。打包文件里 KTX2 出现了 10 次，可实际请求里一个 .ktx2 文件都没有。也就是说代码支持压缩纹理，这一版没用上。11.3 MB 的图片里如果有一部分换成 KTX2，显存占用和加载时间都能再降一截。

第一个字节只等了 209 毫秒，首屏内容 1,192 毫秒画出来，DOM 完成 538 毫秒，load 事件 761 毫秒。最值得说的是长任务一个都没有。一个要解 wasm、要解四个 glTF、要建物理世界的项目，把主线程上的活拆到没有一次超过 50 毫秒，这是实打实的工程。

第三方几乎为零。24.9 MB 里 24.85 MB 来自 awards.racing 自己，images.awards.racing 75 KB，api.awards.racing 5 KB。那个 api 子域是排行榜和在线人数的后端，实测显示 19 人在线、累计 4,692 名车手。没有统计脚本，没有像素，没有会话录制。

现在说那条对不上的。

团队在 FWA 的自述里写，一切都是为速度造的：对象走池化不在运行中分配、世界在车周围流进流出、整个场景渲染在一次绘制调用里。前两条从设计上说得通，最后一条实测不成立。

我把 WebGL 上下文的所有绘制入口都挂上了计数器，在赛道上连续采了 900 帧。每帧的绘制调用最少 80 次，四分位是 88，中位数 90，p95 是 150，最多 152 次。

合理的解释是这句话说的是世界本身。这台机器支持 WEBGL_multi_draw 扩展，打包文件里也能查到 BatchedMesh 出现两次、InstancedMesh 七次。three.js 的 BatchedMesh 正是靠 multi_draw 把成百上千个物体合成一次调用，所以赛道那一大片几何体很可能真的是一次画完的，剩下那八十几次是 HUD、角色、特效、阴影和后期。一次绘制调用的说法用在世界几何上站得住，用在整个场景上站不住。

这件事本身是可以学的。绘制调用这个数字只要挂几行钩子就能量，任何声称合批做得极致的项目都值得先量一遍再信。

无障碍这边问题不小。页面上 76 个可交互控件里有 37 个既没有文字也没有 aria-label，正好一半。地标只有 header 和 footer，没有 main、没有 nav。文档里那 23 个标题全部来自页脚的法律条款和帮助文字，游戏本体一个标题都没有。

不过输入这一块做得比无障碍好。Gamepad API 用上了，页面上有 8 个触屏专用的控件，键位提示画成了真实的键帽，还提供了限制帧率和降低画质的选项。一个只能用鼠标键盘的游戏，实际支持了手柄和触屏两条额外的路。

84 分是这份库里 FWA 那边最高的一个，而且只用了 2 天就拿到。FWA 不公开分项，团队自述里把重点全部放在了工程上：池化、世界流式加载、合批渲染、物理驱动的特效、不用骨骼的角色。一份获奖自述通篇讲实现而不讲创意，本身就说明团队自己认为赢点在哪里。

署名只有一个，而这个名字的来历很出人意料。Ecofuture 在 FWA 上的 profile 写着它是一家垃圾处理软件公司，注册在迪拜。它名下两座 FWA，时间线显示分别在 2023 年和 2026 年。

一家卖垃圾处理软件的公司做出一个拿 84 分的浏览器竞速游戏，这件事本身比任何一条技术细节都值得记一笔。

Awwwards 那边没有收录它。