Blog de Vibe Arcade

Historias de desarrollo, diseño de juegos y el arte de crear con IA

Cómo Creamos Solitaire Con IA: Barajas de Cartas Personalizadas, Visión de Rayos X y la Decisión de Robar-3

Un encargo estándar de solitario Klondike produjo tres barajas de cartas personalizadas completamente renderizadas, un sistema de power-up ganado y un debate de robar-3 vs robar-1 que tuvimos que zanjar nosotros mismos.

· Vibe Arcade

desarrollo de juegos vibe coding juegos de cartas entre bambalinas

Crear Solitaire sonaba como el proyecto más simple que habíamos abordado — el solitario Klondike es uno de los juegos de cartas más jugados de la historia, las reglas están completamente documentadas, y la IA ciertamente ha visto un millar de implementaciones. Lo que no esperábamos era cuántas decisiones de diseño interesantes la IA sacaría a la luz junto con la implementación estándar.

¿Quieres jugar primero y luego leer la historia de cómo lo creamos?

▶ Juega Solitaire Ahora

El Encargo y Lo Que Volvió

El prompt pedía un juego de solitario Klondike basado en navegador — la versión clásica. Siete columnas de tableau, cuatro pilas de fundación, una pila de stock, reglas estándar. Lo que recibimos incluía todo eso más un selector de tema, un sistema de power-up ganado, undo con seguimiento de estado y un modal de auto-completar que se dispara cuando el juego se vuelve resoluble.

El selector de tema fue la primera sorpresa. En lugar de cartas estándar rojas y negras, la IA generó tres barajas de cartas completamente temáticas: Animales (criaturas del bosque y palos de naturaleza), Magia (símbolos místicos en púrpura e índigo), y Espacio (imaginería cósmica — estrellas, planetas, palos alienígenas). Cada tema renderiza toda la baraja de forma distinta — no es una piel sobre palos estándar, es un lenguaje visual distinto para las 52 cartas.

La implicación práctica: elegir un tema antes de cada partida es en sí una pequeña decisión. Los jugadores que tienen un favorito vuelven a él por hábito. Los jugadores nuevos exploran. El selector de tema añade un minuto de fricción que los jugadores generalmente disfrutan — hace que empezar una nueva partida se sienta como un pequeño ritual en lugar de un reinicio mecánico.

Construyendo un Sistema Personalizado de Renderizado de Cartas

La mayoría de los juegos de cartas en navegador usan assets de imagen — caras de carta pre-dibujadas como archivos PNG, cargados como imágenes y posicionados en pantalla. Esperábamos que la IA hiciera lo mismo. En cambio, renderizó cada carta proceduralmente: iconos de palo, valores de carta y etiquetas de rango se dibujan usando HTML Canvas o SVG en lugar de cargarse desde archivos.

Este enfoque tiene compromisos. El renderizado programático significa que la calidad visual de cada carta está determinada por el código de renderizado, no por el asset de un diseñador — acertar lleva iteración. Pero también significa que añadir un nuevo tema es cuestión de escribir nuevos parámetros de renderizado, no crear 52 archivos de imagen nuevos. La carpeta de Assets se mantiene pequeña. Las variaciones de tema escalan sin requerir un set separado de imágenes para cada una.

Pasamos varias iteraciones en los detalles de la cara de la carta. La versión inicial tenía palos que eran demasiado pequeños en relación a la cara de la carta, haciendo que las cartas se vieran escasas. Escalar los iconos de palo y ajustar el posicionamiento de las etiquetas de rango lo llevó al peso visual correcto. En móvil, la legibilidad de las cartas a tamaños más pequeños requirió pasadas adicionales — los valores necesitaban ser más grandes de lo que parecía proporcional en una pantalla de escritorio.

El Power-Up de Visión de Rayos X

La Visión de Rayos X es la función más distintiva del juego. A diferencia de los temas y mecánicas básicas, es un power-up que tiene que ganarse en lugar de obtenerse desde el inicio — acumulas cargas de Rayos X despejando con éxito cartas a las pilas de fundación. Una vez activado, revela temporalmente cartas boca abajo en las columnas del tableau, dejándote ver lo que está enterrado bajo pilas a las que aún no puedes acceder.

La estructura ganada fue el diseño de la IA, no algo que especificamos. En la mayoría de los juegos de solitario, las cartas boca abajo son un apagón permanente de información — te mueves hacia delante sin saber qué hay debajo. La Visión de Rayos X cambia la estructura de información del juego. Los jugadores que juegan bien (despejando a fundación) ganan la habilidad de ver más del tablero. Recompensa la habilidad con información, que es un incentivo más elegante que recompensar la habilidad con velocidad o puntos.

Por qué ganado vs. siempre disponible: Si la Visión de Rayos X estuviera siempre disponible, eliminaría la tensión central del solitario — trabajar con información incompleta. Al hacerla ganada y limitada, sigue siendo una recompensa en lugar de una muleta. Los jugadores eligen cuándo gastarla cuidadosamente porque es finita.

La Decisión de Robar-3

La versión inicial usaba Robar-1 — clica la pila de stock, revela una carta. Cambiamos esto a Robar-3 y fue el único cambio significativo de diseño que iniciamos en lugar de aceptar de la versión inicial.

La pregunta del robo está genuinamente disputada en el diseño de solitario. Robar-1 es más accesible — cada carta en el stock es inmediatamente visible y jugable en el siguiente ciclo. Robar-3 requiere más planificación — puedes ver la carta superior de un robo de tres cartas pero las otras dos están enterradas. Robar-3 también cambia la resolubilidad del juego: muchas reparticiones de Robar-1 son trivialmente resolubles; Robar-3 crea más reparticiones donde planificar por adelantado importa.

Elegimos Robar-3 porque es lo que los jugadores experimentados de solitario esperan, y porque la capa de planificación que añade — rastrear posiciones de cartas a lo largo de ciclos de robo — es la cosa que separa el buen juego de solitario del juego mecánico. Robar-1 puede sentirse como un juego de espera; Robar-3 requiere pensamiento activo.

Undo Con Seguimiento de Estado y Auto-Completar

El sistema de undo almacena el estado completo del juego en cada movimiento — cada posición de carta, cada estado boca-arriba/boca-abajo, la secuencia de la pila de stock. Un único botón de undo revierte el último movimiento por completo. Esto es estándar en el solitario moderno pero no trivial de implementar correctamente: la captura de estado tiene que ser lo bastante exhaustiva como para que la reversión produzca un tablero idéntico a la posición pre-movimiento, incluyendo el ciclado de la pila de stock.

Auto-completar aparece automáticamente cuando todas las cartas del tableau están boca arriba — el punto en el que un juego de solitario está matemáticamente ganado, requiriendo solo ejecución mecánica para terminar. Un modal de auto-terminar aparece y pregunta si te gustaría que el juego se completara solo. Esto previene la secuencia anticlimática de final que muchos jugadores de solitario conocen: un juego ganado requiriendo cincuenta clics idénticos para mover todas las cartas restantes a las fundaciones una por una. Auto-completar se salta eso y salta a la pantalla de victoria.

El timing del disparador de auto-completar es importante. Se dispara solo cuando el juego está realmente ganado — cada movimiento restante está determinado y no queda nada para que el jugador decida. Antes de ese punto, auto-completar no se ofrece, porque aún hay elecciones significativas que tomar.

Drag and Drop Móvil

El solitario de escritorio usa drag-and-drop de ratón para mover cartas. En móvil, eso se traduce a drag táctil — pero los eventos táctiles del navegador funcionan de forma distinta a los eventos de ratón, e implementar un sistema de drag táctil que se sintiera natural requirió una pasada de implementación separada.

El reto principal era distinguir un drag de carta de un scroll de página. En móvil, un swipe hacia abajo puede significar o "estoy arrastrando esta carta a una pila debajo" o "estoy haciendo scroll en la página". La solución fue un breve retraso antes de que un drag se active — si el toque inicial se mueve predominantemente en una dirección de scroll dentro de los primeros milisegundos, se trata como un scroll; si se mueve hacia otro objetivo de carta, se trata como un drag. Acertar con ese umbral llevó unas sesiones de pruebas en dispositivos reales.

Lo Que Solitaire Reveló Sobre los Ports de Juegos Clásicos

Los juegos clásicos con largas historias cargan expectativas de jugador que son específicas y a veces invisibles. Los jugadores de solitario saben cómo se siente el solitario "real" — el timing de la colocación de cartas, la confirmación visual de un movimiento válido, la brecha de información de las cartas boca abajo. Construir según esas expectativas requiere entenderlas primero, y la IA las saca a la luz a través de elecciones como Robar-3 y undo con seguimiento de estado que reflejan cómo el juego se ha jugado bien históricamente.

El sistema de temas es donde la IA fue más allá del precedente histórico. El solitario estándar no tiene una baraja de Animales. La adición fue un reconocimiento de que "mecánicas clásicas, contexto visual fresco" es una dirección de diseño viable — y una que no requiere tocar las reglas en absoluto.

Juega Solitaire →

Relacionado: Consejos de Solitaire: Cómo Ganar Más Partidas y Usar la Visión de Rayos X Efectivamente · Guía Gratis Online de Solitaire · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA