21 Game

Juego de 21

Descripción Este proyecto es una versión web del clásico juego de 21 puntos o Blackjack básico, desarrollada con HTML, CSS y JavaScript. 

 El objetivo del jugador es acercarse lo máximo posible a 21 sin pasarse, enfrentándose a una banca controlada por lógica automática. 

Objetivo del juego 

El jugador compite contra la banca. 

Durante cada ronda puede: 

- pedir una carta
- plantarse
- iniciar una nueva ronda La banca juega automáticamente siguiendo una lógica básica de decisión.
El ganador es quien logre la mejor puntuación sin superar 21.

 Tecnologías utilizadas
- HTML5 
- CSS3
- JavaScript 

Explicación del archivo HTML

El archivo index.html contiene la estructura principal del juego. Su función es organizar visualmente todos los elementos que necesita la partida.

Elementos principales del HTML

Encabezado del juego

• título del proyecto
• subtítulo descriptivo
• marcador de victorias, derrotas y empates

Sección de la banca

• área donde se muestran las cartas de la banca
• puntaje visible u oculto según el estado de la ronda

Sección central

• mensajes de estado
• botones de interacción:
  • nueva ronda
  • pedir
  • plantarse

Sección del jugador

• cartas del jugador
• puntaje acumulado de la mano

El HTML actúa como la base visual del juego y sirve de soporte para que JavaScript actualice el contenido dinámicamente.

Explicación del archivo CSS

El archivo style.css define toda la apariencia visual del proyecto.

Qué controla el CSS

• fondo general tipo mesa de casino
• distribución de paneles y zonas del juego
• diseño del marcador
• estilo de botones
• apariencia de las cartas
• estados visuales del juego
• adaptación básica a diferentes tamaños de pantalla

Objetivo visual

Se buscó una interfaz limpia, legible y agradable, que evocara una mesa de juego sin depender de assets pesados o recursos externos.

Explicación del archivo JavaScript

El archivo script.js contiene toda la lógica principal del juego.

Funciones más importantes del JavaScript

1. Creación de la baraja

Se genera una baraja estándar con palos, rangos y valores numéricos.

2. Mezcla del mazo

Se utiliza una lógica de barajado para aleatorizar las cartas antes de cada ronda.

3. Reparto de cartas

Al iniciar la partida:

• el jugador recibe cartas
• la banca recibe cartas
• una de las cartas de la banca puede mantenerse oculta hasta el momento adecuado

4. Cálculo del puntaje

Se suman los valores de las cartas respetando la lógica especial del As, que puede valer 11 o 1 según convenga para no pasarse de 21.

5. Turno del jugador

El jugador puede:

• pedir una carta nueva
• plantarse y terminar su turno

6. Turno de la banca

La banca juega de forma automática siguiendo una regla simple:

• si tiene menos de cierto puntaje, pide
• si alcanza el mínimo esperado, se planta

7. Validación del resultado

El script decide:

• si el jugador gana
• si la banca gana
• si hay empate
• si alguien se pasó de 21

8. Actualización del marcador

El sistema registra:

• victorias
• derrotas
• empates

Esto permite jugar varias rondas seguidas dentro de la misma sesión.

Flujo general del juego

1. El jugador inicia una nueva ronda.
2. Se reparte una mano inicial.
3. El jugador decide si pedir o plantarse.
4. Cuando el jugador termina, juega la banca.
5. Se comparan los puntajes.
6. Se muestra el resultado.
7. El jugador puede iniciar otra ronda.

Estado actual del proyecto

Actualmente el juego incluye:

• sistema funcional de 21 puntos
• banca automática
• interfaz jugable en navegador
• marcador de resultados
• estructura estable para futuras mejoras visuales

Posibles mejoras futuras

Estas son algunas extensiones posibles del proyecto:

• agregar sonidos
• mejorar las animaciones al repartir cartas
• guardar estadísticas en localStorage
• mejorar la lógica visual de la banca
• crear una pantalla inicial o portada
• hacer la interfaz más temática o estilizada

Mejora visual planeada

Se espera integrar en el futuro un sistema de cartas ilustradas basado en referencias artísticas externas, para reemplazar o complementar las cartas actuales generadas por CSS.

En particular, se planea estudiar una futura integración visual inspirada en el trabajo del artista compartido por el autor del proyecto:

• https://www.ptcrow.com/portfolio/lol-playing-cards

Nota: cualquier integración de arte externo debe respetar siempre los créditos, permisos de uso y condiciones del artista correspondiente.