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 Temáticas, Visión de Rayos X y la Decisión de Robar-1

Un encargo estándar de solitario Klondike produjo tres barajas de cartas temáticas, un power-up de Visión de Rayos X y un debate de robar-1 vs robar-3 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 power-up de Visión de Rayos X, undo con seguimiento de estado y un modal de auto-completar que se dispara cuando el resultado ya está decidido.

El selector de tema fue la primera sorpresa. En lugar de cartas estándar rojas y negras, la IA generó tres barajas temáticas: Animales (palos de árbol, pez, mariposa y gallina), Magia (los cuatro elementos — agua, aire, fuego, tierra — sobre reversos de carta púrpura e índigo), y Espacio (estrellas, alienígenas, planetas y cometas). Un tema cambia los cuatro glifos de palo, el degradado del reverso de la carta y el fondo del tablero, así que las 52 cartas cambian con él, mientras que los rangos y la disposición siguen siendo estándar.

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 como HTML con estilos: los glifos de palo, los valores de carta y las etiquetas de rango son elementos DOM posicionados con CSS 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. El juego se envía sin ningún asset de imagen de cartas. 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. Empiezas cada reparto con una sola carga de Rayos X y ganas otra por cada diez cartas que envías a las pilas de fundación. Una vez activada, tocas una carta boca abajo del tableau y se queda revelada hasta tu siguiente movimiento, dejándote ver lo único que está enterrado bajo una pila a la que aún no puedes acceder.

La estructura de ganar jugando 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é limitado 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 mantener las cargas escasas y ganadas sobre todo con el juego de fundación, sigue siendo una recompensa en lugar de una muleta. Los jugadores eligen cuándo gastarla cuidadosamente porque es finita.

La Decisión de Robar-1

La versión inicial usaba Robar-1 — clica la pila de stock, revela una carta. Decidir si cambiarlo a Robar-3 fue la cuestión de diseño sobre la que más dimos vueltas.

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.

Nos quedamos con Robar-1. Robar-3 es lo que muchos jugadores experimentados esperan, y la capa de planificación que añade — rastrear posiciones de cartas a lo largo de ciclos de robo — es real. Pero Robar-1 pone cada carta del stock en el descarte en cada pasada, así que muchas menos reparticiones terminan en un bloqueo total, y para un juego al que la gente entra de forma casual eso importó más.

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 una vez que el stock y el descarte están vacíos y 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 una breve retención antes de que un drag se active: un toque sobre una carta tiene que mantenerse durante 200 ms antes de que la carta se levante, así que un golpe rápido se lee como un gesto sobre la página en lugar de un drag, y un segundo toque dentro de los 300 ms se interpreta como un doble toque que envía la carta directamente a una fundación. Acertar con esos umbrales 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-1 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