Crear un juego funcional usando únicamente HTML y CSS es totalmente posible cuando conoces las propiedades adecuadas. En este caso, se construye AnimationLand, un juego donde aparecen conejos inspirados en Alicia en el País de las Maravillas y el objetivo es hacer clic sobre ellos para sumar puntos en un marcador, todo sin una sola línea de JavaScript.
¿Cómo se estructura el HTML del juego?
La base del juego parte de una estructura sencilla en HTML. Se crea una lista desordenada (ul) con varios elementos li, y dentro de cada uno se coloca un input de tipo checkbox [01:25]. Estos checkboxes serán los elementos "cliqueables" del juego, es decir, cada uno representará un conejo al que el jugador podrá presionar.
Además de los inputs, cada li contiene un div con una clase llamada shift, que servirá para la parte visual más adelante. La cantidad de inputs depende de cuántos elementos interactivos quieras en el juego; en este ejemplo se colocan aproximadamente ocho [02:10].
Por último, fuera de la lista se agrega un elemento de texto con la clase total-count que muestra el score del jugador. Este elemento es el que reflejará cuántos checkboxes han sido seleccionados.
html
<ul>
<li>
<input type="checkbox">
<div class="shift"></div>
</li>
<!-- Se repite varias veces -->
</ul>
<p class="total-count">Score: </p>
¿Qué es counter-reset y cómo funciona el contador en CSS?
La propiedad counter-reset es la encargada de inicializar un contador en CSS [03:20]. Se aplica al body y recibe un nombre identificador; en este caso, game. Esto le indica al navegador que existe un contador llamado "game" que inicia en cero.
css
body {
counter-reset: game;
}
Una vez definido el contador, se necesita indicar cuándo debe incrementarse. Aquí entra en juego la pseudoclase :checked, que detecta cuándo un input de tipo checkbox está seleccionado [03:40]. Combinándola con la propiedad counter-increment, cada vez que un checkbox es marcado, el contador game sube en uno.
css
input:checked {
counter-increment: game;
}
¿Cómo se muestra el valor del contador en pantalla?
Para que el score sea visible, se utiliza el pseudoelemento ::after junto con la propiedad content [04:15]. Dentro de content se usa la función counter() pasándole el nombre del contador. Esto hace que el valor numérico se renderice dinámicamente junto al texto "Score:".
css
.total-count::after {
content: counter(game);
}
Al refrescar el navegador, el marcador aparece inicializado en cero. Cada vez que se selecciona un checkbox, el número se incrementa automáticamente. Si se deselecciona, el valor disminuye [04:50]. Esta es la mecánica central del juego: un sistema de puntuación construido enteramente con CSS.
¿Por qué los pseudoelementos son importantes aquí?
Los pseudoelementos como ::after permiten insertar contenido generado por CSS sin modificar el HTML. La propiedad content es la que hace posible mostrar valores dinámicos como los contadores. Sin el pseudoelemento, el contador existiría internamente pero no tendría representación visual.
¿Qué viene después de los contadores CSS?
Con la lógica del marcador resuelta, la siguiente fase se enfoca en el contexto de apilamiento (stacking context) [05:25], que permitirá posicionar los elementos visuales del juego, como los conejos, en diferentes capas. También se trabajará con animaciones CSS para darle vida al juego y lograr que los personajes aparezcan y desaparezcan.
- counter-reset: inicializa y nombra un contador CSS.
- counter-increment: incrementa el valor del contador cuando se cumple una condición.
- :checked: pseudoclase que detecta inputs seleccionados.
- content con counter(): muestra el valor actual del contador dentro de un pseudoelemento.
Este enfoque demuestra que CSS tiene capacidades que van mucho más allá del estilo visual. ¿Has intentado crear interacciones sin JavaScript? Comparte tu experiencia y cuéntanos qué otros usos le darías a los contadores CSS.
