Construye el tablero de juego
Crea la UI que los jugadores van a ver y tocar
⏱ Estim. ~7 min
01 · Leer
Tu servidor está listo. Ahora necesitas la cara — la página HTML que los jugadores ven en el navegador.
Esto es HTML, CSS y JavaScript puros. Sin React, sin frameworks. Solo los cimientos de la web sobre los que se construye todo framework.
Eso es a propósito. Los frameworks son geniales para apps grandes, pero entender qué pasa sin ellos te vuelve un ingeniero mucho más fuerte. Cuando React se rompe, el ingeniero que entiende HTML y JavaScript crudos lo arregla en minutos. Los que solo saben React se quedan mirando el error durante horas.
Puntos clave
- El frontend es HTML, CSS y JavaScript puros
- Un juego de este tamaño no necesita ningún framework
- Entender los fundamentos te hace mejor con cualquier framework después
- Socket.io provee automáticamente su propia librería del lado del cliente
02 · Plantilla de prompt
Pídele a Claude que construya la página del juego. Sé específico con los elementos que necesitas.
Ayúdame a crear un public/index.html para el juego de tic-tac-toe. El contenido debe incluir: (1) El título 'Tic Tac Toe'. (2) Un botón 'Find Game'. (3) Un área de estado que muestre inicialmente 'Click Find Game to start'. (4) Un tablero de juego 3x3 donde cada celda sea un elemento button clicable. (5) Un botón 'Play Again' oculto por defecto, que aparece cuando el juego termina. Incluye el script cliente de Socket.io '/socket.io/socket.io.js' (Socket.io lo provee automáticamente), y enlaza style.css y client.js.
03 · Plantilla de prompt
Ahora pídele a Claude que agregue estilos al juego. Dale instrucciones de diseño concretas.
Ayúdame a crear un public/style.css para el juego de tic-tac-toe. Haz el tablero como un CSS grid de 3x3, cada celda de 100x100 píxeles. Que haya bordes claros entre celdas y un efecto hover en las celdas vacías. Centra toda la pantalla con un fondo oscuro. Las X en azul, las O en rojo. Haz que el botón Find Game llame la atención. Agrega una animación leve de escala cuando aparece un símbolo. La sensación general debe ser limpia y moderna.
04 · Leer
El patrón CSS clave que hace funcionar el tablero es CSS Grid. Nada de tablas complicadas ni hacks de flexbox — con CSS Grid construyes un tablero 3x3 en tres líneas:
``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
Eso es todo. Tres columnas, cada una de 100 píxeles, con 4 píxeles de separación entre celdas. El navegador hace toda la matemática del layout. Cada celda es un elemento <button> dentro del grid — usamos button en vez de div porque button es accesible con teclado y con lectores de pantalla por defecto.
Puntos clave
- CSS Grid hace que el layout 3x3 sea simple
- repeat(3, 100px) crea tres columnas iguales
- Cada celda es un <button> para accesibilidad con teclado y lectores de pantalla
- Socket.io sirve su propio script del lado del cliente en /socket.io/socket.io.js
05 · Práctica real
Inicia tu servidor y vista previa del tablero en el navegador.
06 · Quiz
¿Por qué las celdas del tablero usan elementos <button> en lugar de elementos <div>?
- Los botones se ven mejor por defecto
- Los div no pueden tener event listeners de clic
- Los botones son accesibles con teclado y lectores de pantalla, lo que permite que todos los jugadores puedan usarlos
- Socket.io solo funciona con elementos button
Otras lecciones de este capítulo
⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.
※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.