Gra zbliżeniowa zainspirowana saperem.
Zespół, który stworzył Ci aplikację squoosh.app, powraca! Tym razem stworzyliśmy grę internetową o nazwie PROXX (proxx.app). PROXX to gra zbliżeniowa zainspirowana legendarną grą Minesweeper. Gra rozgrywa się w kosmosie, a Twoim zadaniem jest znalezienie miejsc pokrytych czarnymi dziurami. Działa na wszystkich rodzajach urządzeń – od komputerów po telefony z internetem. Użytkownicy mogą grać w grę za pomocą myszy, klawiatury, pada kierunkowego, a nawet czytnika ekranu.
Nasza wartość bazowa
Przed opracowaniem gry ustalamy następujące cele i budżety dla aplikacji:
- korzystanie z identycznej funkcji: wszystkie urządzenia muszą działać tak samo,
- Ułatwienia dostępu: mysz, klawiatura, dotyk, pad kierunkowy, czytniki ekranu.
- Skuteczność:
- Mniej niż 25 KB ładunku początkowego
- Mniej niż 5 sekund TTI (czas do interakcji) przy wolnym połączeniu 3G
- Spójna animacja z szybkością 60 kl./s
Procesy internetowe
Gra składa się z 4 głównych elementów, głównej logiki gry, interfejsu użytkownika, usługi stanu i grafiki animacji. Ponieważ od samego początku wiedzieliśmy, że w wątku głównym będziemy musieli korzystać z mocno animowanej grafiki, przenieśliśmy logikę gry i usługę stanową do instancji roboczej, aby główny wątek był jak najwolniejszy.
Renderowanie wstępne podczas kompilacji
Nasz interfejs użytkownika jest oparty na Preact, ponieważ pozwala nam osiągnąć agresywny cel przy początkowym ładunku mniejszym niż 25 KB. Aby zapewnić sobie komfort podczas wstępnego wczytywania, zdecydowaliśmy się na wstępne wyrenderowanie pierwszego widoku. Renderowanie wstępne w czasie kompilacji odbywa się za pomocą platformy Puppeteer, która zapewnia dostęp do górnej strony i pozwala wstępnemu wypełnianiu DOM. Powstały w ten sposób model DOM jest następnie serializowany do kodu HTML i zapisywany jako index.html
Obszar roboczy animacji (niewidoczny) DOM z ułatwieniami dostępu
Grafika gry jest renderowana na płótnie przy użyciu WebGL. Jeden obszar roboczy odpowiada za animację tła, a drugie za siatkę gry na górze. Mamy również tabelę HTML z przyciskami związanymi z ułatwieniami dostępu, która znajduje się nad tymi obszarami roboczymi, ale jest niewidoczna (przezroczystość: 0). Mimo że widoczny jest renderowany obiekt stanu gry, gracz wchodzi w interakcję z niewidoczną tabelą DOM, dzięki czemu możemy dołączyć odbiorniki zdarzeń i korzystać z funkcji zarządzania fokusem w przeglądarce.
Pozostawienie elementu DOM w obszarze roboczym pozwala korzystać z ułatwień dostępu wbudowanych w przeglądarkach. Na przykład: gdy ustawisz właściwość role="grid" w tabeli z grami, czytniki ekranu będą mogły odczytać wiersz i kolumnę zaznaczonej komórki bez konieczności implementacji tego parametru.
Podsumowanie dotyczące grupowania i podziału kodu
Całkowity rozmiar aplikacji jest ograniczony do 100 KB w formacie gzip. Z tego 20 KB na ładunek początkowy (index.html). W tym projekcie używamy Rollup.js. Podzieliliśmy zależności między wątkiem głównym a naszym mechanizmem roboczym, a podsumowanie może umieścić te współdzielone zależności w osobnym fragmencie, który musi ładować się tylko raz. Inne pakiety, takie jak webpack, powielają wspólne zależności, co powoduje podwójne wczytywanie.
Obsługa telefonów z internetem
Smartfony z internetem, takie jak KaiOS, szybko zyskują na popularności. Urządzenia te są bardzo ograniczone zasobami, ale nasze podejście do korzystania z pracowników internetowych, gdy tylko jest to możliwe, umożliwiało nam sprawne responsywność obsługi także na tych telefonach. Telefony z podstawową przeglądarką mają inny interfejs do wprowadzania danych (pad kierunkowy i klawisze numeryczne, brak ekranu dotykowego), dlatego wdrożyliśmy również interfejs oparty na klawiszach.
Co dalej
Świetnie się mieliśmy, ale zajęliśmy się tworzeniem gry na Google I/O 2019, więc zrobimy sobie zasłużony czas na odpoczynek, ale zaplanowaliśmy kolejne publikowanie bardziej szczegółowej dokumentacji każdego z tych obszarów gry.
Tymczasem zachęcamy do zapoznania się z wygłaszaniem, które Mariko wygłosiła na konferencji I/O dotyczącej tego projektu.
Kod możesz przeglądać w repozytorium proxx na GitHubie.
Pozdrawiamy! Surma, Jake, Mariko