Hemos visto el truco de la casilla de verificación y cómo se puede usar para construir una máquina de estado completa en CSS. Hoy, llevaremos esa línea de pensamiento un paso más allá y crearemos un juego simple de Whack-A-Mole, donde el jugador necesita reaccionar rápidamente para ganar … todo sin un toque de JavaScript.
Esto puede parecer un poco tonto en un lenguaje que no tiene ninguna noción de temporizadores o intervalos, pero el secreto es que CSS sí lo tiene: simplemente está empaquetado en una pequeña función llamada Animaciones CSS.
Eche un vistazo a este controlador de doble clic. Tenga en cuenta que CSS no sabe qué es un clic, y mucho menos un doble clic:
¿Como funciona? Aquí hay una grabación de los elementos importantes, cambiados de color y ralentizados:
La idea es que cuando hace clic en el botón por primera vez, mueva el elemento de doble clic en su lugar debajo del cursor, pero también hace que un elemento de máscara comience a moverse hacia arriba para cubrirlo.
- Si el segundo clic llega lo suficientemente rápido después del primero (como en el lado izquierdo de la grabación), ocurre en el elemento de doble clic (azul).
- De lo contrario (como en el lado derecho de la grabación), ocurre en el elemento de enmascaramiento (amarillo), que tiene el efecto de un elemento de un solo clic.
(Para obtener una explicación detallada, eche un vistazo a mi artículo sobre el controlador de doble clic de CSS puro aquí).
Aquí hay dos ideas en juego:
- Las animaciones se pueden usar para administrar estados de acuerdo con un patrón establecido. (Estoy usando el término “estado” libremente).
- Al cambiar la posición de un elemento, podemos cambiar si un usuario puede o no realizar una acción.
¡Eso es todo lo que necesitamos!
Ahora, en lugar de hacer que nuestro objetivo se desplace a la vista, podríamos usar animation-timing-function: step-end para que entre y salga, como un lunar en un agujero:
Probé algunas opciones diferentes para mover el lunar fuera del camino y cambiar su posición absoluta, aquí left – parece funcionar mejor. Usar una traducción sería conveniente, pero desafortunadamente deja a Firefox pensando que el cursor está en el elemento incorrecto porque el cambio transform en el motor de diseño de Gecko no activa un rediseño. (Normalmente, esto sería bueno por razones de rendimiento, ¡pero no tanto para nuestra pequeña demostración!)
Con un poco de estilo, podemos hacer que se vea más como un elemento de juego:
El “topo” aquí es básicamente una etiqueta CSS rediseñada que activa el truco de la casilla de verificación. También lo es el hoyo. Cuando la animación del topo lo lleva sobre el agujero, al hacer clic en la región se activa la entrada de radio del topo; cuando el topo está fuera del camino, al hacer clic se activa la entrada de radio del agujero.
El siguiente paso es poner un par de agujeros uno al lado del otro y hacer que los lunares reboten entre ellos, cada uno en un negativo diferente. animation-delay. Con una máquina de estado que lee cuáles de los topos han sido golpeados y cuáles de los agujeros se han derrumbado, se convierte en un pequeño juego ordenado.
Usé scripts cortos de Python para generar tanto los selectores de la máquina de estado como los fotogramas clave de mole. De lo contrario, se vuelve un poco difícil de manejar para la codificación manual. Esto se debe principalmente a que CSS tampoco tiene un concepto de números aleatorios, lo que nos deja otra opción más que codificar el comportamiento del topo “aleatorio”.
Ahí lo tenemos: un completo juego basado en reacciones, íntegramente en HTML y CSS.