Game kedekatan, yang terinspirasi oleh kapal penyapu ranjau.
Tim yang membawa Anda squoosh.app telah kembali! Kali ini, kami membuat game berbasis web bernama PROXX (proxx.app). PROXX adalah game kedekatan yang terinspirasi oleh game legendaris Minesweeper. Game ini ditempatkan di dalam ruangan dan tugas Anda adalah mencari tahu letak lubang hitam. Fitur ini berfungsi di semua jenis perangkat—mulai dari desktop hingga ponsel menengah. Pengguna dapat memainkan game menggunakan mouse, keyboard, d-pad, bahkan dengan pembaca layar.
Garis dasar kami
Sebelum membuat game ini, kami menetapkan sasaran dan anggaran berikut untuk aplikasi:
- Pengalaman inti yang sama: semua perangkat harus berfungsi dengan cara yang sama
- Dapat diakses: mouse, keyboard, sentuh, d-pad, pembaca layar
- Performa yang baik:
- Kurang dari 25 kb payload awal
- Kurang dari 5 detik TTI (waktu untuk interaktif) dengan 3G lambat
- Animasi 60 fps yang konsisten
Web Worker
Game ini terdiri dari 4 entity utama, logika game inti, layanan UI, layanan status, dan grafis animasi. Karena kami tahu dari awal, kami harus menjalankan banyak animasi grafis di thread utama, kami memindahkan logika game dan layanan status ke pekerja web untuk menjaga thread utama sebebas mungkin.
Pra-render waktu build
UI kami dibuat dengan Preact, karena memungkinkan kami mencapai target yang agresif untuk payload awal yang kurang dari 25 kb. Untuk memberikan pengalaman pemuatan awal yang baik, kami memutuskan untuk merender tampilan pertama terlebih dahulu. Kita melakukan pra-rendering pada waktu build menggunakan Puppeteer untuk mengakses halaman atas dan membiarkan preact mengisi DOM. DOM yang dihasilkan kemudian diserialisasi ke HTML dan disimpan sebagai index.html
Kanvas untuk animasi, DOM (tidak terlihat) Untuk aksesibilitas
Kami merender grafis game di kanvas menggunakan WebGL. Satu kanvas bertanggung jawab atas animasi latar belakang dan satu kanvas lainnya untuk petak game di atas. Kita juga memiliki tabel HTML dengan tombol untuk alasan aksesibilitas, yang ada di atas kedua kanvas ini, tetapi dibuat tidak terlihat (opasitas: 0). Meskipun yang Anda lihat adalah rendering kanvas status game, pemain berinteraksi dengan tabel DOM tak terlihat sehingga memberi kami kemampuan untuk menambahkan pemroses peristiwa dan mengandalkan pengelolaan fokus browser.
Dengan mempertahankan elemen DOM di kanvas, kita dapat memanfaatkan fitur aksesibilitas bawaan browser. Misalnya: dengan menetapkan role="grid" di tabel
game, pembaca layar dapat membacakan baris dan kolom sel yang difokuskan
tanpa kita harus menerapkannya.
Penggabungan untuk pemaketan dan pemisahan kode
Ukuran total aplikasi kami turun menjadi 100 KB melalui gzip. Dari jumlah tersebut, 20 KB digunakan untuk payload awal (index.html). Kita menggunakan Rollup.js untuk project ini. Kita telah berbagi dependensi antara thread utama dan pekerja web, dan Rollup dapat menempatkan dependensi bersama ini dalam potongan terpisah yang hanya perlu dimuat sekali. Pemaket lain seperti webpack menduplikasi dependensi bersama yang menghasilkan pemuatan ganda.
Mendukung ponsel menengah
Ponsel menengah seperti ponsel KaiOS semakin populer. Perangkat tersebut sangat terbatas resource-nya, tetapi pendekatan kami dalam menggunakan pekerja web kapan pun kami bisa membuat pengalaman juga sangat responsif di ponsel ini. Karena ponsel menengah dilengkapi antarmuka input yang berbeda (d-pad dan tombol angka, tanpa layar sentuh), kami juga mengimplementasikan antarmuka berbasis tombol.
Langkah selanjutnya
Kami memiliki waktu yang menyenangkan namun sibuk ketika membangun game ini untuk Google I/O 2019, jadi kami akan meluangkan waktu istirahat yang layak. Namun, kami berencana untuk kembali dengan dokumentasi yang lebih mendalam tentang setiap area game ini.
Sementara itu, lihat pembicaraan yang disampaikan Mariko di I/O tentang proyek ini.
Anda dapat menjelajahi kode di repo GitHub proxx.
Bersulang! Surma, Jake, Mariko