Whack-a-Mole: la edición CSS

Hemos visto el truco de la casilla de verificación y cómo se puede usar para construir una máquina de estado completo 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 noción de temporizadores o intervalos, pero el secreto es que CSS sí la 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, recoloreada y ralentizada:

La idea es que cuando haces clic en el botón por primera vez, mueve 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 se produce 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), sucede en el elemento de máscara (amarillo), que tiene el efecto de un elemento de un solo clic.

(Para obtener una explicación detallada, consulte mi artículo sobre el controlador de doble clic de CSS puro aquí).

Hay dos ideas en juego aquí:

1. Se pueden utilizar animaciones para gestionar estados según un patrón establecido. (Estoy usando el término “estado” de manera vaga).
2. 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 que nuestro objetivo se desplace a la vista, podemos usarlo animation-timing-function: step-endpara que aparezca y salga, como un topo en un agujero:

Probé algunas opciones diferentes para apartar el topo 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 cambiar transformel motor de diseño Gecko no activa un nuevo diseñ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 parezca más 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 agujero. 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 topos 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 y divertido juego.

Utilicé scripts cortos de Python para generar tanto los selectores de la máquina de estado como los fotogramas clave de topo. De lo contrario, resulta un poco difícil de manejar codificar manualmente. Esto se debe principalmente a que CSS tampoco tiene el concepto de números aleatorios, lo que no nos deja más remedio que codificar el comportamiento “aleatorio” de los topos.

Ahí lo tenemos: un juego completo basado en reacciones, íntegramente en HTML y CSS.