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