Carrera de Caballos con Vue 3 y Vuetify | Baraja Española Parte 7 (Final)

En este tutorial vas a aprender a crear un juego de carrera de caballos empleando la baraja española, implementado íntegramente con Vue 3, Vuetify y animaciones CSS. La aplicación cuenta con:

Mazo y carril extra

Se genera la baraja española (40 cartas) y se retiran las 4 cartas “especiales” que representan los 4 caballos.

Tras barajar, asignamos 9 cartas al carril extra (boca abajo) y 27 al mazo principal.

Al agotarse el mazo, se vuelve a rebarajar automáticamente para que la carrera nunca termine hasta que haya un ganador.

Cuatro pistas de 9 espacios más meta

Cada caballo (bastos, copas, espadas y oros) avanza de acuerdo a la figura de la carta destapada del mazo.

Una vez que todos avanzan una ronda, se destapa una carta del carril extra y, según el modo de juego elegido, el caballo correspondiente retrocede o avanza.

Cuando un caballo supera los 9 espacios y cruza la meta (camino completo más uno), ¡gana la carrera!

Modo de juego 1 y 2

Modo 1 (por defecto): la carta del carril extra hace retroceder al caballo.

Modo 2: esa misma carta hace avanzar al caballo.

La selección se hace con dos botones de Vuetify que destacan su estado activo.

Asignación de nombres de jinetes

Al hacer clic sobre la pista de un caballo, se abre un prompt para introducir el nombre del jinete.

El nombre se muestra sobre el caballo con un fondo semitransparente para mejorar la visibilidad.

Visualización y diseño responsivo

Vuetify Grid (v-app, v-container, v-row, v-col) para una distribución fluida.

Media queries en CSS:

En pantallas verticales (orientation portrait), los carriles son verticales.

En pantallas horizontales (orientation landscape), los carriles se alinean horizontalmente.

Cada casilla de pista tiene como fondo la imagen de su palo (bastos.png, copas.png, etc.) y se adapta al tamaño del contenedor.

Animaciones puras CSS y transiciones de Vue

Las cartas que van al montón hacen un efecto de escala y opacidad usando transition en CSS.

El movimiento de los caballos a su nueva posición se realiza mediante transform translateX o translateY y transiciones definidas en clases CSS.

Las cartas del carril extra aplican un efecto de flip con rotateY y backface-visibility ocultando el reverso.

Principales conceptos de programación y patrones
Separación de responsabilidades

Archivo App.vue: solo contiene la plantilla y vincula eventos (@click) y datos reactivos.

Módulo gameLogic.js: gestiona la baraja, los turnos, las reglas de avance/retroceso y el estado del juego.

Archivo styles.css: define el layout responsivo (flexbox) y todas las animaciones con clases y keyframes CSS.

Reactividad en Vue

El estado del juego vive en data: horses, deck, extraLane, pile, gameMode, winner.

Al mutar estos arrays y objetos, Vue actualiza la interfaz de usuario sin manipular el DOM manualmente.

Flujo unidireccional de datos

Cada vez que el usuario hace clic en “sacar carta” o cambia de modo, un método (drawCard, setGameMode) modifica el estado, y la vista se renderiza automáticamente.

Algoritmo Fisher–Yates para mezclar cartas

La función shuffle implementa un barajado aleatorio eficiente y puro, sin efectos colaterales.

Reabarajar al agotarse el mazo

Se guarda una copia inicial de initialDeck para restaurar cuando deck.length llega a cero y seguir la partida.

CSS Flexbox y media queries

Clases horizontal y vertical aplican flex-direction row o column.

Tamaños de casillas ajustados mediante media queries para ofrecer una experiencia óptima en móviles, tablets y escritorio.

UX optimizada con Vuetify

Botones con cambio de color primary vs grey para indicar el modo activo.

v-img para carga perezosa de imágenes y ajuste automático (contain, altura fija).

Видео Carrera de Caballos con Vue 3 y Vuetify | Baraja Española Parte 7 (Final) канала Multicode Universe