PROXX 简介

这款游戏以扫雷游戏为灵感,以接近度为考量因素。

Mariko Kosaka

为您带来 squoosh.app 的团队又回来了!这次,我们构建了一款名为 PROXX (proxx.app) 的 Web 游戏。PROXX 是一款近距离游戏,其灵感源自传奇游戏扫雷。游戏发生在太空中,您的任务是找出黑洞的位置。它适用于各种设备,从桌面设备到功能手机。用户可以使用鼠标、键盘、方向键甚至屏幕阅读器来玩游戏。

功能手机上的 PROXX。

在构建此游戏之前,我们为应用设置了以下目标和预算:

  • 相同的核心体验:所有设备的运作方式必须相同
  • 无障碍:鼠标、键盘、触摸、方向键、屏幕阅读器
  • 高性能
    • 初始载荷小于 25kb
    • 在低速 3G 网络上,TTI(可交互时间)少于 5 秒
    • 一致的 60fps 动画
搭载 PROXX 的 Pixelbook
PROXX on a pixelbook。

网络工作器

游戏由 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 的方法,也让这些手机上的体验具有极高的响应能力。由于功能手机采用不同的输入界面(方向键和数字键,无触摸屏),因此我们还实现了基于按键的界面。

一名男子正在一款黄色功能手机上玩 PROXX
功能手机上的 PROXX。

后续步骤

我们为了赶在 2019 年 Google I/O 大会上构建这款游戏,我们花了很多时间,但忙得没空,所以我们将好好休息一下。不过,我们计划再回来提供有关游戏各个方面的更深入的文档。

在此之前,请观看 Mariko 在 I/O 大会上就此项目所做的演讲。

您可以在 proxx GitHub 代码库中浏览代码。

祝好!Surma、Jake、Mariko