Cómo Creamos Cyber Circuit: Un Juego de Memoria con Cartas Escondido Dentro de una Piel de Placa de Circuito

El nombre suena como un puzle de trazar cables. En realidad es un juego de memoria de emparejar pares con arte de carta de placa de circuito — y esa brecha entre nombre y mecánica es donde se decidió todo el diseño.

18 de abril de 2026 · Vibe Arcade

Lo primero que hay que admitir sobre Cyber Circuit es que el nombre nos engañó. Estaba en la lista de títulos propuestos del pipeline descrito vagamente como "juego de puzle con temática cyber". Le echamos un vistazo y asumimos trazado de cables — enrutar la corriente desde un nodo de energía a un nodo objetivo, esquivar trazos rotos, rotar piezas. Un juego entero ya existía en nuestras cabezas antes de que se hubiera escrito una sola línea de código.

Lo que enviamos es un juego de memoria de emparejar pares. Volteas dos cartas, intentas hacer coincidir los símbolos, repites hasta despejar la rejilla. Lo único "circuit" en él es el arte de las cartas. La mecánica es Milton Bradley Memory puro, 1966, sin cambios. La parte interesante de la historia de creación es cómo ocurrió ese pivote, y qué hizo la IA con la restricción una vez nos comprometimos con ella.

El Problema del Nombre

"Cyber Circuit" suena como un puzle de construir circuitos. Infinity Loop, Electric Box, cualquiera de los juegos de Zachtronics — toda esa categoría estaba abarrotando nuestra imaginación antes de haber empezado siquiera el diseño. Así que lo primero que hicimos fue pedirle a la IA que dejara de asumir.

Pedimos tres tipos de juego alternativos que pudieran encajar honestamente con el nombre: un puzle de enrutar cables, una variante de tower defence donde construyes rutas de circuito para defender un núcleo, y un juego de emparejar memoria con arte de placa de circuito. El pitch de la opción tres fue desarmante — "el nombre describe cómo se ven las cartas, no lo que haces con ellas". Ese replanteamiento fue todo lo que hizo falta.

Emparejar memoria también resolvió un problema que tenían las otras dos opciones. Los constructores de circuitos necesitan diseño de niveles; las variantes de defensa necesitan oleadas balanceadas. Emparejar pares se entiende al instante, es autocontenido, y cada ronda es fresca porque la baraja se baraja. El tema hace el trabajo atmosférico y la mecánica no estorba.

Por Qué las Rejillas Son 4×3, 4×4 y 6×4

Cualquier juego de emparejar pares necesita un número total par de cartas — cada carta tiene una pareja. Eso descalifica inmediatamente muchos tamaños de rejilla. 3×3 es impar. 5×5 es impar. 3×5 es impar. Todos fuera.

La primera propuesta de la IA fue 4×3 / 4×4 / 5×4 — todos totales pares, todos jugables. Empujamos contra el nivel superior porque veinte cartas con diez pares se sentía como una meseta en lugar de un salto. Subir Difícil a 6×4 añade ocho cartas y cuatro pares, un paso adelante genuino en la carga de memoria sin cruzar al tedio. El conjunto final (12, 16, 24 cartas) también escala la rejilla visualmente de forma satisfactoria: Fácil cabe en el viewport vertical del móvil, Medio se lee como un cuadrado limpio, Difícil obliga a la rejilla a ser más ancha que alta — lo cual se parece más a una placa de circuito. Un accidente feliz que reforzó la estética después.

Qué Va en las Cartas

La IA eligió doce símbolos: rayo, enchufe, bombilla, batería, ordenador de sobremesa, mando de juego, llave inglesa, engranaje, satélite, antena de radio, microscopio, disquete. Cada uno se lee claramente al tamaño del frente de la carta. Ninguno puede confundirse con otro de un vistazo — no hay dos símbolos parecidos a rayos, no hay dos rectángulos parecidos a chips. Todos son reconocibles como "cosas de un set de tecnología" sin ser estrictamente electrónicos, lo que mantiene la vibra juguetona en lugar de estéril.

Doce es también exactamente el conteo que necesita Difícil. Fácil saca seis por ronda; Medio saca ocho; Difícil usa los doce. La baraja se rebaraja en cada juego, así que incluso los jugadores que se machacan en Fácil ven distintos subconjuntos de símbolos cada ronda. Ese pequeño detalle — barajar el pool de símbolos, no solo las posiciones de las cartas — mantiene cada juego sintiéndose fresco.

El Volteo de Carta Es CSS Puro

El momento técnicamente más satisfactorio de la creación fue el volteo de carta. Un volteo de carta 3D parece que debería necesitar una librería, o como mínimo algo de JavaScript imperativo manipulando transforms frame por frame. No lo hace. Todo es CSS, cinco propiedades de profundidad, y la IA recurrió al patrón estándar en la primera pasada:

• perspective: 600px en el contenedor de la carta — define cuánta profundidad 3D renderizará el navegador
• transform-style: preserve-3d en un wrapper interno — le dice al navegador que los hijos viven en espacio 3D
• transform: rotateY(180deg) aplicado cuando aterriza una clase .flipped o .matched — rota el wrapper interno
• backface-visibility: hidden en ambas caras — para que la parte trasera de cada cara sea invisible, y la cara que esté rotada hacia la cámara sea la que veas
• Una transición cubic-bezier de 0.35 segundos en el wrapper interno — la curva que vende la sensación del volteo

Eso es todo. El frente de la carta está pre-rotado 180 grados para que quede detrás del dorso; cuando el contenedor rota 180 grados, el frente sale al frente y el dorso desaparece. Sin máquina de estados, sin frames de animación, sin timing de JavaScript. El único JavaScript que necesita el volteo es una llamada a classList.add('flipped') al hacer clic.

Lo que requirió iteración fue el feedback de no-coincidencia. Cuando dos cartas no coinciden, necesitábamos una señal visible antes de que se voltearan de vuelta. La IA propuso un parpadeo de borde rojo mediante una segunda clase (.mismatch) y un keyframe que alterna entre dos tonos de rojo. Eso funciona, pero la duración del parpadeo y el retraso de volteo de vuelta están acoplados — demasiado corto y el jugador pierde la señal, demasiado largo y el juego se siente lento. Ochocientos milisegundos es donde aterrizamos. Suficientemente largo para registrarse, suficientemente corto para mantener el ritmo honesto.

El Bloqueo de Input Que Previene el Caos

La pieza de lógica más sutil del juego es el guardián de clics. Cinco guardianes, una función: ignora clics cuando el juego no está activo, cuando el input está bloqueado durante una ventana de no-coincidencia, cuando la carta ya está emparejada, cuando la carta ya está volteada en este turno, o cuando ya hay dos cartas volteadas.

Sin ninguno de ellos, el juego se rompe de formas específicas y enfurecedoras para el jugador — clica la misma carta dos veces y cuenta como coincidencia; clica una tercera carta durante el parpadeo de no-coincidencia y el segundo par se vuelve invisible; clica durante la pantalla de victoria y cartas fantasma se voltean al fondo. La IA escribió tres en la primera pasada; añadimos dos más durante las pruebas. Este es el pensamiento de pequeños sistemas que separa a un juguete de un juego terminado — las partes vistosas se notan, pero el guardián de clics es lo que hace que las partes vistosas realmente funcionen cuando los jugadores hacen cosas inesperadas.

Leaderboards por Dificultad, y Parar

La última decisión fue el leaderboard. Un único leaderboard global incentivaría solo jugar Fácil — menos cartas, menor conteo de movimientos, puntuación más alta. Así es como construyes un juego al que nadie juega en Difícil.

Dividir el leaderboard por dificultad significa que cada nivel tiene su propio ranking. La puntuación empieza en 1000, resta 5 puntos por cada movimiento más allá del conteo de pares, y resta un punto por cada segundo transcurrido, con un suelo de 100. Las mejores puntuaciones locales por dificultad se muestran en la pantalla de menú, así que siempre sabes lo que estás persiguiendo entre partidas.

Y ese fue el punto de parada. Sin power-ups, sin dorsos de carta desbloqueables, sin giro de reto diario. La mecánica tiene sesenta años y funciona. La tentación de pulirla en exceso era real, pero la decisión correcta era enviarlo y seguir adelante.

Lo Que Nos Enseñó el Nombre

Lo más útil que Cyber Circuit nos dio no fue un juego — fue una nota de flujo de trabajo. Los títulos provisionales moldean el diseño más de lo que nos dimos cuenta. Habíamos estado tratando la lista de títulos del pipeline como etiquetas desechables, pero para cuando habíamos leído "Cyber Circuit" unas cuantas veces ya habíamos empezado a diseñar un juego distinto del que finalmente construimos. Detectar eso temprano, y pedirle a la IA que propusiera alternativas que encajaran con el nombre, fue el rescate. Para cada juego desde entonces, hemos hecho hábito de interrogar el nombre antes de escribir código.

Juega Cyber Circuit — prueba Difícil, compite contra tu mejor tiempo, y mira cuánto de la baraja de doce símbolos puedes mantener en la memoria a la vez.

Lecturas relacionadas: Cómo Creamos Neon Snake Con IA · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA