Ein Spiel der Nähe, inspiriert von Minenweeper.
Das Team von squoosh.app ist zurück. Dieses Mal haben wir ein webbasiertes Spiel namens PROXX (proxx.app) entwickelt. PROXX ist ein Spiel mit Nähe, das vom legendären Spiel Minesweeper inspiriert wurde. Das Spiel befindet sich in diesem Bereich und Ihre Aufgabe ist es herauszufinden, wo sich die schwarzen Löcher befinden. Es funktioniert auf allen Arten von Geräten – von Computern bis hin zu Feature-Phones. Nutzer können das Spiel mit einer Maus, einer Tastatur oder einem Steuerkreuz spielen, sogar mit einem Screenreader.
Unsere Baseline
Vor der Entwicklung dieses Spiels haben wir die folgenden Ziele und Budgets für die App festgelegt:
- Gleiche Hauptfunktion: Alle Geräte müssen gleich funktionieren.
- Barrierefrei: Maus, Tastatur, Touchscreen, Steuerkreuz, Screenreader
- Leistungsstark:
- Weniger als 25 KB anfängliche Nutzlast
- Weniger als 5 Sekunden TTI (Zeit bis Interaktivität) bei langsamen 3G-Verbindungen
- Konsistente Animation mit 60 fps
Web Worker
Das Spiel besteht aus vier Hauptentitäten: der zentralen Spielelogik, dem UI-Dienst, dem Statusdienst und den Animationsgrafiken. Da wir von Anfang an wussten, dass wir im Hauptthread stark animierte Grafiken ausführen müssten, haben wir die Spiellogik und den Statusdienst auf einen Web Worker verschoben, um den Hauptthread so kostenlos wie möglich zu halten.
Pre-Rendering während der Build-Erstellung
Unsere UI ist mit Preact erstellt, da wir so unser aggressives Ziel für eine anfängliche Nutzlast erreichen können, die kleiner als 25 KB ist. Um beim ersten Laden einen guten Eindruck zu hinterlassen, haben wir beschlossen, die erste Ansicht vorab zu rendern. Bei der Build-Erstellung verwenden wir Puppeteer, um auf die oberste Seite zuzugreifen, und lassen das DOM vorab ausfüllen. Das resultierende DOM wird in HTML serialisiert und als "index.html" gespeichert.
Canvas für Animation, (unsichtbares) DOM für Barrierefreiheit
Wir rendern die Spielgrafiken mithilfe von WebGL in einem Canvas. Ein Canvas ist für die Hintergrundanimation verantwortlich und ein anderes für das darüber liegende Spielraster. Aus Gründen der Barrierefreiheit gibt es auch eine HTML-Tabelle mit Schaltflächen, die sich über beiden Canvases befindet, aber unsichtbar ist (Deckkraft: 0). Auch wenn Sie hier ein Canvas-Rendering des Spielstatus sehen, interagiert der Player mit der unsichtbaren DOM-Tabelle. So können wir Event-Listener anhängen und uns auf die Fokusverwaltung des Browsers verlassen.
Wenn das DOM-Element im Canvas bleibt, können wir die integrierten Bedienungshilfen des Browsers nutzen. Wenn Sie beispielsweise role="grid" für unsere Spieletabelle festlegen, können Screenreader die Zeile und Spalte der fokussierten Zelle vorlesen, ohne dass wir dies implementieren müssen.
Rollup für Bündelung und Codeaufteilung
Die Gesamtgröße der App beträgt 100 KB im gzip-Format. Davon sind 20 KB für die anfängliche Nutzlast (index.html) vorgesehen. Wir verwenden Rollup.js für dieses Projekt. Wir haben gemeinsame Abhängigkeiten zwischen dem Hauptthread und unserem Web-Worker. Rollup kann diese gemeinsamen Abhängigkeiten in einem separaten Block zusammenfassen, der nur einmal geladen werden muss. Andere Bundler wie Webpack duplizieren die gemeinsamen Abhängigkeiten, was zu Doppelladevorgängen führt.
Unterstützung für Feature-Phones
Smarte Feature-Phones wie KaiOS-Smartphones werden immer beliebter. Diese Geräte sind sehr ressourcenintensiv, aber unser Ansatz, Web Worker so oft wie möglich zu nutzen, ermöglichte uns auch auf diesen Smartphones eine hohe Reaktionsgeschwindigkeit. Da Feature-Phones eine andere Eingabeoberfläche haben (Steuerkreuz und Zifferntasten, kein Touchscreen), haben wir auch eine schlüsselbasierte Oberfläche implementiert.
Nächste Schritte
Wir hatten eine Menge Zeit, dieses Spiel rechtzeitig zur Google I/O 2019 zu entwickeln. Wir nehmen uns also eine wohlverdiente Auszeit, planen aber, ausführlichere Dokumentationen zu jedem dieser Bereiche des Spiels zu veröffentlichen.
Bis dahin sollten Sie sich das Gespräch ansehen, das Mariko auf der I/O zu diesem Projekt gegeben hat.
Sie können den Code im Proxx-GitHub-Repository durchsuchen.
Vielen Dank und bis bald! Surma, Jake, Mariko