Es un juego de proximidad inspirado en el buscaminas.
Vuelve el equipo que te trajo squoosh.app. Esta vez, creamos un juego basado en la Web llamado PROXX (proxx.app). PROXX es un juego de proximidad inspirado en el legendario juego Buscaminas. El juego se encuentra en el espacio, y tu trabajo es averiguar dónde están los agujeros negros. Funciona en todo tipo de dispositivos, desde computadoras hasta teléfonos de gama media. Los usuarios pueden jugar con un mouse, un teclado o un pad direccional, incluso con un lector de pantalla.
Nuestro modelo de referencia
Antes de compilar este juego, establecemos los siguientes objetivos y presupuestos para la aplicación:
- Misma experiencia principal: Todos los dispositivos deben funcionar de la misma manera.
- Accesible: mouse, teclado, panel táctil, pad direccional y lectores de pantalla
- Rendimiento:
- Menos de 25 KB de carga útil inicial
- TTI de menos de 5 segundos (tiempo de carga) en 3G lento
- Animación coherente de 60 fps
Trabajadores web
El juego consta de 4 entidades principales: la lógica principal del juego, el servicio de IU, el servicio de estado y los gráficos de animación. Como sabíamos desde el principio que tendríamos que ejecutar gráficos muy animados en el subproceso principal, trasladamos la lógica y el servicio de estado del juego a un trabajador web para mantener el subproceso principal lo más libre posible.
Renderización previa del tiempo de compilación
Nuestra IU se compiló con Preact, ya que nos permite alcanzar nuestro objetivo agresivo para una carga útil inicial de menos de 25 KB. Para brindar una buena experiencia de carga inicial, decidimos realizar un procesamiento previo de nuestra primera vista. Realizamos una renderización previa en el tiempo de compilación con Puppeteer para acceder a la página superior y permitir que se propague el DOM de forma previa. El DOM resultante se serializa en HTML y se guarda como index.html
Lienzo para animación, DOM (invisible) para accesibilidad
Renderizamos los gráficos del juego en un lienzo con WebGL. Un lienzo es responsable de la animación de fondo y otro lienzo para la cuadrícula de juegos en la parte superior. También tenemos una tabla HTML con botones por razones de accesibilidad, que se encuentra sobre ambos lienzos, pero se vuelve invisible (opacidad: 0). Aunque lo que se ve es una renderización de lienzo del estado del juego, el jugador está interactuando con la tabla invisible del DOM, lo que nos da la capacidad de adjuntar objetos de escucha de eventos y depender de la administración del enfoque del navegador.
Si mantenemos el elemento del DOM en el lienzo, podemos acceder a las funciones de accesibilidad integradas de los navegadores. Por ejemplo, si configuras role="grid" en la tabla de nuestro juego, los lectores de pantalla podrán anunciar la fila y la columna de la celda enfocada sin que tengamos que implementarla.
Resumen para la creación de paquetes y la división de código
El tamaño total de la app se reduce a 100 KB comprimidos. De eso, 20 KB son para la carga útil inicial (index.html). En este proyecto, usamos Rollup.js. Compartimos dependencias entre el subproceso principal y nuestro trabajador web, y Rollup puede colocar esas dependencias en un fragmento separado que solo se debe cargar una vez. Otros agrupadores, como webpack, duplican las dependencias compartidas, lo que genera una carga doble.
Teléfonos de gama media compatibles
Los teléfonos de funciones inteligentes, como los teléfonos KaiOS, están ganando rápidamente popularidad. Estos son dispositivos con recursos muy limitados, pero nuestro enfoque de usar trabajadores web siempre que sea posible nos permitió hacer que la experiencia sea muy responsiva en estos teléfonos. Dado que los teléfonos de gama media vienen con una interfaz de entrada diferente (pad direccional, teclas numéricas y sin pantalla táctil), también implementamos la interfaz basada en teclas.
Próximos pasos
Pasamos un gran tiempo, pero ocupado, compilamos este juego a tiempo para Google I/O 2019, así que nos tomaremos un merecido tiempo libre para descansar, pero planeamos volver con documentación más detallada sobre cada una de estas áreas del juego.
Hasta entonces, consulta la charla que dio Mariko en I/O sobre este proyecto.
Puedes explorar el código en el repositorio proxx de GitHub.
¡Salud! Surma, Jake y Mariko