Lattice: Cómo Creamos el Juego de Damas Neón con IA
Bajo el fondo fractal animado, Lattice es exactamente lo que parece — damas americanas estándar contra una IA minimax con tres niveles de dificultad. Así es como lo creamos, y por qué "fractal" es una capa de pintura en lugar de una promesa de jugabilidad.
El brief de investigación que arrancó este proyecto llevaba un nombre provisional: Fractal Kings. Ese nombre implicaba algo salvaje — rejillas hexagonales, tableros recursivos, damas jugadas sobre un triángulo de Sierpinski. También sonaba como un proyecto de investigación de seis meses. Lo que realmente queríamos era Lattice: un juego de damas sólido con una IA que juegue damas reales, envuelto en un tratamiento visual que se sintiera como Vibe Arcade en lugar de shareware de 1998.
¿Quieres jugar primero y luego leer la historia de cómo lo creamos?
▶ Juega Lattice AhoraEl Nombre: Por Qué Ganó "Lattice"
Antes de una sola línea de código, hicimos una lluvia de ideas de nombres. Kingmaker era demasiado obvio. Obsidian colisionaba con una conocida app de notas. Tessellate describía lo visual pero no el juego. Fractal Kings seguía implicando jugabilidad recursiva que no íbamos a construir.
Lattice ganó por tres criterios. Es una palabra, que se lee limpiamente en una tarjeta de juego. Apunta a la rejilla 8x8 sin llamarse literalmente "Grid". Y deja suficiente ambigüedad para que el fondo fractal animado se sienta como una promesa que el nombre cumple — en lugar de una promesa sobre mecánicas que tendríamos que inventar.
El Juego Debajo de la Pintura
Lattice es damas americanas estándar. Doce piezas por bando en las casillas oscuras, movimiento diagonal hacia delante para peones, movimiento totalmente diagonal para damas coronadas, y capturas forzadas — si puedes saltar, debes. Los multi-saltos se encadenan obligatoriamente. Llega a la última fila del oponente y promocionas a dama coronada. Si pasan cuarenta movimientos sin capturas ni promociones, la partida se declara tablas.
La pieza más complicada es la regla de captura forzada, porque opera globalmente: si cualquiera de tus piezas puede capturar, cada pieza que no pueda capturar queda bloqueada para el turno. Lo resolvimos haciendo del generador de movimientos una única función que devuelve tanto la lista de movimientos como un flag de "capturas disponibles". El código de la UI y la IA llaman a la misma función, lo que significa que la IA es físicamente incapaz de violar la regla — no porque confiáramos en ella, sino porque los únicos movimientos que ve son legales.
Minimax Con Alfa-Beta, Escrito a Mano
La IA es la parte de Lattice que se habría visto igual hace veinte años: una búsqueda minimax clásica con poda alfa-beta. Escribirla fresca en JavaScript, sin librería, fue un buen recordatorio de lo elegante que es la idea central.
En cada nodo, generas todos los movimientos legales para el lado que mueve. Si es tu turno, quieres el movimiento que maximiza la puntuación de evaluación; si es el turno del oponente, ellos quieren minimizarla. Recurres a cierta profundidad, evalúas las hojas, y propagas la mejor puntuación hacia arriba.
La poda alfa-beta hace esto práctico. Si descubres una rama que el oponente nunca te dejará alcanzar — porque tienen una alternativa mejor antes — dejas de explorarla. En el mejor caso, alfa-beta duplica aproximadamente la profundidad que puedes buscar en el mismo tiempo, y en un árbol de juego estrecho como las damas (~7 movimientos legales de media), eso importa mucho.
La función de evaluación es deliberadamente simple: material (100 por peón, 180 por dama coronada), pequeños bonos posicionales por control del centro y mantener la última fila contra promoción, más un término de movilidad. Heurísticas más sofisticadas no hicieron que la IA jugara notablemente mejor — la profundidad de la búsqueda estaba haciendo la mayor parte del trabajo.
Tres Niveles de Dificultad: 2, 4, 6
La dificultad en Lattice es literalmente solo profundidad de búsqueda. Novato mira dos plies adelante. Estratega mira cuatro. Gran Maestro mira seis.
El espaciado 2/4/6 no fue arbitrario. Profundidad 1 juega obviamente mal a las damas — no ve la respuesta del oponente, así que cae en intercambios de dos piezas. Profundidad 2 ve amenazas a un ply, lo que se siente como "un principiante que está prestando atención". Profundidad 4 se siente como un jugador de club — detecta planteamientos y castiga la mayoría de los errores tácticos. Profundidad 6 juega una versión de damas que es genuinamente difícil de vencer para un humano no experto. Saltamos niveles intermedios porque los saltos cualitativos ocurren en esos tres niveles, no entre medias.
Novato recibe un toque extra: una pequeña cantidad de ruido aleatorio añadida a la puntuación de cada posición. Sin él, profundidad 2 juega de forma idéntica cada partida desde una posición dada, lo que se siente robótico incluso a nivel principiante. El ruido es suficiente para que Novato escoja ocasionalmente el segundo mejor movimiento cuando los dos mejores están cerca.
El Tope de 400ms en Gran Maestro
Profundidad 6 tiene un problema de peor caso. En un tablero de mediojuego con muchas capturas disponibles — cada captura multiplica el factor de ramificación, porque las cadenas de multi-salto tienen múltiples puntos de terminación — la búsqueda puede tardar más de lo que un humano está dispuesto a esperar.
El arreglo es un deadline de reloj de pared. Cuando Gran Maestro empieza su búsqueda, registra un presupuesto de 400 milisegundos. Cada cierto tiempo durante la recursión, comprueba si el deadline ha pasado. Si lo ha hecho, aborta y devuelve el mejor movimiento encontrado hasta el momento. En la práctica casi nunca se dispara, pero en la rara posición desagradable con un bosque de cadenas de captura, el tope previene un congelamiento de la UI. El compromiso es un movimiento ligeramente más débil en esas posiciones — un oponente que ocasionalmente escoge el segundo mejor movimiento es aún un oponente mucho mejor que uno que congela el navegador.
Fractal Es una Capa de Pintura
El fondo animado detrás del tablero es el único lugar donde aparece la palabra "fractal" en el juego final. Son dos capas de repeating-linear-gradient, una rotada +45 grados y otra rotada -45 grados, aplicadas como pseudo-elemento ::before en el body. Un keyframe fractalDrift desliza lentamente los gradientes a lo largo del eje diagonal. Las dos capas interactúan para crear un entramado de rombos que parece vagamente autosimilar, y como es CSS puro, escala a cualquier tamaño de pantalla sin rasterizarse.
Funciona porque el tablero es visualmente ruidoso — piezas turquesa y magenta brillantes, anillos amarillos de captura forzada, ráfagas de partículas de captura — y necesitaba algo donde apoyarse que tuviera estructura pero no compitiera por la atención. Un fondo oscuro plano se sentía sin vida; un fondo animado de calidad de vídeo sería distractor y caro. El entramado CSS es el término medio más barato, y encaja con el nombre del juego.
La brecha entre la historia mecánica (damas clásicas con minimax) y la historia visual (parece arte generativo) es todo el sentido. La capa de pintura es lo que hace que la gente lo pruebe; el motor de damas es lo que hace que se queden.
Las Cosas Que No Están en el Reglamento
Lo que de verdad hace que Lattice se sienta como un juego moderno en lugar de una app de damas es la segunda capa de feedback que no tiene nada que ver con el reglamento. Las capturas rocían partículas de fragmentos de cristal. La casilla capturada parpadea en rojo. La promoción a dama coronada dispara partículas doradas y blancas y flota "KING CROWNED" sobre el tablero. Las cadenas de multi-salto muestran toasts "DOUBLE JUMP!" y "TRIPLE JUMP!". Cada acción tiene un tono de oscilador Web Audio — un clic suave para selección, un barrido descendente para captura, un arpegio de cuatro notas para promoción.
Nada de eso cambia el juego. Una versión silenciosa y sin partículas se jugaría de forma idéntica. Pero no se sentiría idéntica, y para un género tan viejo como las damas, esa sensación es toda la propuesta de por qué jugarías esta versión en lugar de cualquiera de las mil otras.
Lo Que Haríamos Distinto
La respuesta honesta: añadir un libro de aperturas. Minimax desde el movimiento uno significa que la IA juega los mismos primeros movimientos cada partida contra juego idéntico. Añadimos barajeo de movimientos con puntuaciones iguales para obtener algo de variedad, pero los motores reales de damas se envían con un libro de aperturas compacto que les da tanto variedad como fuerza en la fase del juego donde la búsqueda pura es más débil. Lo aplazamos deliberadamente — Lattice apuntaba a enviar un juego que jugara lo bastante bien para una sesión casual de navegador, no a competir con Chinook.
Juega Lattice — empieza en Estratega, sube a Gran Maestro, y mira si puedes detectar el movimiento donde la profundidad de la IA empieza a sentirse claustrofóbica.
Lecturas relacionadas: Cómo Creamos Neon Tic-Tac-Toe · Cómo Creamos PrismBreak · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA