这款游戏以扫雷游戏为灵感，以接近度为考量因素。
为您带来 squoosh.app 的团队又回来了！这次，我们构建了一款名为 PROXX (proxx.app) 的 Web 游戏。PROXX 是一款近距离游戏，其灵感源自传奇游戏扫雷。游戏发生在太空中，您的任务是找出黑洞的位置。它适用于各种设备，从桌面设备到功能手机。用户可以使用鼠标、键盘、方向键甚至屏幕阅读器来玩游戏。
我们的基准
在构建此游戏之前，我们为应用设置了以下目标和预算：
- 相同的核心体验：所有设备的运作方式必须相同
- 无障碍：鼠标、键盘、触摸、方向键、屏幕阅读器
- 高性能：
- 初始载荷小于 25kb
- 在低速 3G 网络上，TTI（可交互时间）少于 5 秒
- 一致的 60fps 动画
网络工作器
游戏由 4 个主要实体组成，即核心游戏逻辑、界面服务、状态服务和动画图形。由于我们从一开始就知道必须在主线程上运行大量动画图形，因此我们将游戏逻辑和状态服务移到了 Web Worker，以尽可能让主线程保持空闲状态。
构建时预呈现
我们的界面是使用 Preact 构建的，因为它使我们能够实现初始载荷小于 25kb 的激进目标。为了提供良好的初始加载体验，我们决定预渲染第一个视图。我们在构建时使用 Puppeteer 预渲染，以访问首页并让 preact 填充 DOM。然后将生成的 DOM 序列化为 HTML 并保存为 index.html
使用画布实现动画，使用（不可见的）DOM 实现无障碍功能
我们使用 WebGL 在画布中渲染游戏图形。一个画布负责背景动画，另一个画布负责顶部的游戏网格。我们还有一个 HTML 表格，出于无障碍方面的原因，该表格包含按钮，它位于这两个画布之上，但被设为不可见（不透明度：0）。 虽然您看到的是游戏状态的画布渲染，但玩家正在与不可见的 DOM 表格互动，因此我们可以附加事件监听器并依赖于浏览器的焦点管理。
通过将 DOM 元素保留在画布中，我们能够充分利用浏览器内置的无障碍功能。例如：通过在游戏桌上设置 role="grid"，屏幕阅读器可以读出聚焦单元格的行和列，而无需我们实现此功能。
用于打包和代码分块的汇总
应用的总大小经过 gzip 压缩后缩减到了 100KB。其中，20KB 用于初始载荷 (index.html)。我们将为此项目使用 Rollup.js。我们在主线程和 Web 工作器之间共享依赖项，而 Rollup 可以将这些共享依赖项放在一个只需要加载一次的单独分块中。其他捆绑器（如 webpack）会复制共享依赖项，从而导致重复加载。
支持功能手机
KaiOS 手机等智能功能手机正在迅速普及。这些设备的资源非常有限，但我们尽可能使用 Web Worker 的方法，也让这些手机上的体验具有极高的响应能力。由于功能手机采用不同的输入界面（方向键和数字键，无触摸屏），因此我们还实现了基于按键的界面。
后续步骤
我们为了赶在 2019 年 Google I/O 大会上构建这款游戏，我们花了很多时间，但忙得没空，所以我们将好好休息一下。不过，我们计划再回来提供有关游戏各个方面的更深入的文档。
在此之前，请观看 Mariko 在 I/O 大会上就此项目所做的演讲。
您可以在 proxx GitHub 代码库中浏览代码。
祝好！Surma、Jake、Mariko