PROXX: A Minesweeper-Inspired Game Built for Every Device
The Chrome team behind squoosh.app has released a new web-based game, PROXX. It's a proximity game inspired by Minesweeper, but with a twist: you're searching for black holes in space. The core engineering goal was to make the game work identically across all devices, from high-end desktops to resource-constrained feature phones. That means full support for mouse, keyboard, touch, d-pad, and screen readers.
Setting the Performance Bar
Before writing any code, the team established strict budgets to ensure a consistent experience:
- Uniform core experience: The game must function the same way on every device.
- Full accessibility: Playable via mouse, keyboard, touch, d-pad, and screen readers.
- Strict performance targets:
- Initial payload under 25kb.
- Time to interactive (TTI) under 5 seconds on slow 3G.
- Consistent 60fps animation.
Keeping the Main Thread Clear
The application is split into four primary entities: core game logic, a UI service, a state service, and animation graphics. Because the animations run on the main thread, the game logic and state service were moved into a Web Worker. This offloading is critical for keeping the main thread responsive, especially on lower-end devices. The same worker-heavy approach allowed the experience to remain highly responsive on phones with significantly less processing power.
Pre-rendering at Build Time
The UI is built with Preact, chosen for its small footprint which helps meet the aggressive 25kb initial payload goal. To improve the initial loading experience, the first view is pre-rendered at build time using Puppeteer. The process accesses the top page, allows Preact to populate the DOM, serializes the resulting HTML, and saves it as index.html. This gives users content to see immediately without waiting for JavaScript to execute.
Canvas for Graphics, Invisible DOM for Accessibility
The game’s visuals are rendered on two separate WebGL canvases: one for the background animation and another for the game grid. Layer on top of those an HTML table containing buttons, which is made invisible via opacity: 0. While the player sees the canvas rendering, their interactions are actually handled by the invisible DOM table. This clever approach allows the game to leverage the browser's built-in focus management and event listeners.
Keeping this DOM element in place taps into the browser’s native accessibility features. For instance, setting role="grid" on the game table lets screen readers announce the focused cell’s row and column without any custom implementation.
Bundling with Rollup
The application’s total size is 100KB gzipped, with the initial index.html payload making up only 20KB. The project uses Rollup.js for bundling and code splitting. This choice was driven by the need to share dependencies between the main thread and the web worker. Rollup can extract shared code into a separate chunk that loads only once. Other bundlers, like webpack, would duplicate these shared dependencies, leading to double-loading and wasted bytes.
Extending Support to Feature Phones
Smart feature phones, such as those running KaiOS, are a growing segment. These devices are extremely constrained, but the architecture already in place allowed for a smooth experience. Because these phones lack touchscreens and rely on d-pad and number key input, the team also implemented a fully key-based interface to handle the request.
Future Plans
The team built PROXX in time for Google I/O 2019, but they plan to follow up with more in-depth documentation on each of the game’s technical areas. In the meantime, you can browse the full source code on the proxx GitHub repo.
