Juegos para practicar HTML y CSS
Esta dirección histórica presenta ahora un juego nuevo de bloques que caen. Puedes jugar con teclado o botones táctiles y, al mismo tiempo, observar qué aporta cada tecnología web. La estructura contiene los controles y el tablero; los estilos hacen que sean legibles; JavaScript decide cómo se mueve cada pieza y cuándo se completa una fila.
Juega y observa el resultado
Pulsa Nueva partida. Mueve la pieza a izquierda o derecha para elegir una columna, gírala si necesitas otra orientación y usa Abajo para acelerar el descenso. Las filas completas desaparecen y aumentan el marcador. La partida termina cuando una pieza nueva ya no puede entrar en el tablero. Pausa detiene el descenso para que puedas examinar el estado sin perder la posición.
En un ordenador usa las flechas izquierda, derecha y abajo; la flecha arriba o la tecla X gira. La tecla P pausa o reanuda. En un teléfono usa los botones debajo del tablero. No hay clasificación, cuenta ni puntuación enviada: el marcador pertenece a esta partida en tu navegador y se reinicia cuando comienzas otra.
Puntos
Filas
Pulsa Nueva partida para empezar.
Lee el juego como un proyecto web
El elemento canvas reserva una superficie de dibujo. HTML no decide qué cuadrados colorear: únicamente declara que el tablero existe y ofrece una descripción accesible. Las etiquetas button representan acciones reales y se pueden activar con teclado. output muestra valores calculados, mientras que el texto de estado comunica si la partida empezó, está en pausa o terminó. Esta estructura sigue teniendo sentido incluso antes de aplicar colores.
CSS fija el tamaño visible del tablero, separa controles y marcador, y reorganiza las columnas en pantallas estrechas. Si el tablero se ve demasiado grande en tu teléfono, el problema pertenece a la presentación. Si una pieza atraviesa otra o una fila completa no desaparece, el problema pertenece a la lógica JavaScript. Separar esas preguntas hace que depurar sea más sencillo.
Una modificación para aprender
Abre las herramientas de desarrollo de tu navegador y localiza el bloque que tiene data-tool="block-lab". Cambia solo el texto del botón Nueva partida: verás que la acción sigue funcionando porque el código busca el atributo data-start, no el texto visible. Después observa el tablero: está formado por diez columnas y veinte filas. La lógica comprueba si cada casilla está libre antes de mover una pieza. Cuando una fila contiene bloques en todas sus columnas, la elimina, añade otra vacía arriba y actualiza el resultado.
Si quieres convertir esta demostración en tu propio proyecto, empieza con una versión más pequeña: dibuja una cuadrícula y haz que una sola casilla cambie de color al pulsar un botón. Luego añade movimiento, límites y puntuación. Copiar de golpe un juego completo es menos útil que poder explicar una regla que acabas de probar. Termina con una prueba de límites: mueve la pieza hacia un borde y comprueba que ninguna casilla sale del tablero; después forma una línea completa y observa cómo cambia la puntuación.