Blackjack

Juego de cartas de casino, en su modalidad clásica europea, implementado como aplicación web. ¿Cómo jugar?

En ningún momento de este proyecto se realizarán apuestas con dinero real, siempre serán cantidades ficticias.

📈 Versión 1.1.1

Esta es una versión estable del proyecto, desarrollada únicamente con tecnologías Front-End nativas: JavaScript, HTML y CSS. Se utiliza la librería Bootstrap en local y la aplicación no necesita procesos de compilación, ni instalación de dependencias, ni conexión a Internet.

Se ha testeado con éxito en pantallas de smartphones y laptops. Si en algún caso sale scroll, se recomienda ajustar al 90 % el zoom del navegador, mediante Ctrl+-, por ejemplo.

Actualmente se puede jugar perfectamente entendiendo cómo funcionan las reglas para ganar, empatar o perder, pero todavía no se han implementado estas funcionalidades:

• Posibilidad de realizar apuestas indicando las cantidades.
• Participar en más de un puesto de jugador aparte del crupier.
• Doblar apuestas cuando la mano inicial suma 9, 10 u 11 puntos.
• Separar pares cuando las dos cartas iniciales tienen el mismo valor.
• Realizar apuestas de seguro cuando la primera carta del crupier es un as.

Funcionalidades pendientes 🧾

Para que esta aplicación se considere un simulador completo de blackjack real, debe incluir los siguientes puntos en detalle.

• 💰 Apuestas. Además del pago a la par, hay que tener en cuenta el pago especial de las manos que tengan blackjack y el de los seguros.
• 👥 Jugadores. Puede haber hasta siete puestos de jugadores, aparte del crupier. Como mínimo, se deben ocupar dos puestos de jugador.
• 2️⃣ Doblar. Jugada especial también llamada "apuesta doble", "doblada" o double down en inglés, cuando las dos cartas iniciales suman 9, 10 u 11 puntos, y donde se obtiene solamente una carta más. Esta tercera carta se posiciona en perpendicular a las anteriores de la mano.
• ➗ Separar. Jugada especial también llamada "pares", "apertura", "dividir", "separar" o split en inglés, cuando las dos cartas iniciales tienen el mismo valor, y donde figuras y dieces cuentan como iguales, ya que todas las figuras valen 10 puntos.
• ✅ Asegurar. Jugada especial también llamada "el seguro" o insurance en inglés, cuando la primera carta del crupier es un as, y donde como máximo se añade la mitad de la cantidad inicial apostada.

🎮 Jugar online

Gracias al despliegue en GitHub Pages, se puede jugar aquí:

👉 https://almagarinos.github.io/blackjack/ 👈

Teclas de acceso directo ⌨

Cada botón de la aplicación tiene una letra subrayada en su texto. Si en nuestro teclado pulsamos la tecla correspondiente a esa letra, tendremos el mismo efecto que pulsando en dicho botón.

Por ejemplo, el cuadro de diálogo del resultado se cierra con el botón "Continuar", que tiene la letra o subrayada. Pues ese botón también puede activarse pulsando la tecla de la letra o, mayúscula y minúscula.

Además, para una mayor comodidad, se han buscado combinaciones de teclas juntas entre sí. Por un lado, la de las letras contiguas E R T para los botones superiores. Para los inferiores y el de "Continuar", que son los más usados, también se les ha asignado la combinación de las flechas ⬅⬇➡⬆ y los números 1️⃣2️⃣3️⃣5️⃣, los cuales, en el teclado numérico, siguen el mismo patrón triangular que las flechas.

Por tanto, quedan asignadas a los botones las teclas de estos símbolos:

• Letras E y e: "Resultado previo".
• Letras R y r: "Readme".
• Letras T y t: "Tutorial".
• Letras N y n, número 1 y flecha ⬅: "Nuevo juego".
• Letras C y c, número 2 y flecha ⬇: "Pedir carta".
• Letras P y p, número 3 y flecha ➡: "Plantarse".
• Letras O y o, número 5 y flecha ⬆: "Continuar".

Importante: lo que aquí son letras en negrita, en la aplicación son letras subrayadas.

💻 Instalación local

Clonar repositorio ⬇️

Si se tiene instalado Git, sólo hay que usar los siguientes comandos en un terminal, dentro de la ruta del directorio donde se quiera descargar el juego:

git clone https://github.com/almagarinos/blackjack   # Descarga el proyecto
blackjack\index.html                 # Ejecuta el juego en un navegador web

Descargar fichero 🗂️

Se puede obtener todo el proyecto comprimido en este ZIP. Descomprímase su contenido dentro del directorio donde se quiera ubicar el juego, para luego abrir el archivo index.html en un navegador web.

📂 Estructura del proyecto

blackjack/
│
├── assets/
│   │
│   ├── css/
│   │   ├── bootstrap.min.css   # Librería Bootstrap v4.4.1
│   │   └── styles.css          # Estilos propios de la aplicación
│   │
│   ├── icon/
│   │   └── ...                 # Archivos para el favicon en distintos formatos
│   │
│   ├── img/                    # Imágenes de las 52 cartas de la baraja francesa
│   │   ├── 10C.png             # En este ejemplo: 10 de "clubs" (tréboles)
│   │   └── ...                 # Siguen el patrón [índice][palo].png
│   │
│   ├── js/
│   │   ├── app.js              # Lógica principal del juego, incluye comentarios
│   │   └── underscore-min.js   # Librería Underscore.js, es usada como auxiliar
│   │
│   └── pdf/
│       └── rules.pdf           # Reglas del blackjack en su variante europea
│
└── index.html                  # Punto de entrada de la aplicación

🛠️ Herramientas auxiliares

Se utiliza la librería de estilos Bootstrap, llamada en la cabedera <head> del archivo index.html. Se aplica en las fuentes de texto, disposición de componentes y aspecto de botones.

Se utiliza la función _.shuffle() de la librería Underscore.js para barajar las cartas. Véase más información en este blog y en su documentación oficial.

📒 Reglas del juego

El objetivo es sumar un valor lo más próximo a 21 puntos sin pasarse. Las cartas con índice numérico suman su propio valor, todas las figuras valen 10 puntos y cada as vale 11 o 1.

A continuación se detallan dos opciones para aprender a jugar. La primera está pensada para acceder a estas reglas cuando no se disponga de conexión a Internet, una vez descargado el proyecto en local.

Leer en PDF 📋

Se puede consultar este PDF que viene adjunto en la ruta blackjack/assets/pdf/rules.pdf del proyecto.

Ver videotutorial ▶️

Se puede visualizar este vídeo de 10 minutos, perfectamente explicado, relativo a esta guía aún más completa.

❓ Glosario y nomenclatura

Cada naipe de la baraja francesa tiene un índice y un palo. Los índices son los números del 2 al 10, los ases y las figuras.

Ases y figuras de la baraja 🃏

• As - Ace: 🃑 A
• Jota - Jack: 🃛 J
• Reina - Queen: 🃝 Q
• Rey - King: 🃞 K

Palos de la baraja ♣️♦️♠️♥️

• Tréboles - Clubs: ♣ C
• Diamantes - Diamonds: ♦ D
• Picas - Spades: ♠ S
• Corazones - Hearts: ♥ H

Todo lo anterior facilitará entender el nombre de las cartas, que siguen el patrón [índice][palo]. Por ejemplo:

• 8H es el ocho de corazones.
• 10C es el diez de tréboles.
• AD es el as de diamantes.
• QS es la reina de picas.

Esta nomenclatura se usa en las imágenes de blackjack/assets/img/ y en los datos mostrados por consola.

👨‍💻 Datos por consola

En la versión actual, la aplicación muestra información por consola tras resolver cada jugada. Para verla, hay que acceder a las herramientas de desarrollador (DevTools) del navegador, idealmente en un dispositivo de sobremesa (desktop). Para ello, desde la propia pestaña abierta de la aplicación, pulsamos F12 para abrir dichas herramientas, cuya opción "Console" es la que debemos seleccionar.

En ella se mostrarán tres tipos de mensaje:

• Detección de blackjacks, si los hubiese.
• Tabla con todos los datos de la jugada.
• Resultado con el resumen de la jugada.

Estos datos serán muy útiles para un futuro historial de jugadas o testeo de nuevas funcionalidades de la aplicación.

Ejemplo 1: pierde el jugador 👎

El crupier ha obtenido un diez de tréboles (10C) y un as de diamantes (AD). El jugador ha obtenido una reina de picas (QS), una reina de diamantes (QD) y un as de picas (AS). Lo que muestra la consola es la siguiente información:

El crupier tiene blackjack: 21 puntos con 2 cartas.

(index)	Value
Mano del crupier	'10C-AD'
Mano del jugador	'QS-QD-AS'
Puntos del crupier	21
Puntos del jugador	21
Blackjack del crupier	true
Blackjack del jugador	false
¿Hubo un empate?	false
¿Ganó el jugador?	false

RESULTADO: ¡El crupier gana con blackjack! No hay empate aunque ambos tengan 21 puntos.

Ejemplo 2: hay un empate 🤝

El crupier ha obtenido una reina de diamantes (QD) y un as de picas (AS). El jugador ha obtenido una reina de corazones (QH) y un as de tréboles (AC). Lo que muestra la consola es la siguiente información:

El jugador tiene blackjack: 21 puntos con 2 cartas.

El crupier tiene blackjack: 21 puntos con 2 cartas.

(index)	Value
Mano del crupier	'QD-AS'
Mano del jugador	'QH-AC'
Puntos del crupier	21
Puntos del jugador	21
Blackjack del crupier	true
Blackjack del jugador	true
¿Hubo un empate?	true
¿Ganó el jugador?	false

RESULTADO: ¡Es un empate! Ambos tienen 21 puntos con blackjack.

Ejemplo 3: gana el jugador 👍

El crupier ha obtenido una jota de diamantes (JD), un tres de corazones (3H), un tres de tréboles (3C) y un dos de tréboles (2C). El jugador ha obtenido una reina de picas (QS) y un nueve de tréboles (9C). Lo que muestra la consola es la siguiente información:

(index)	Value
Mano del crupier	'JD-3H-3C-2C'
Mano del jugador	'QS-9C'
Puntos del crupier	18
Puntos del jugador	19
Blackjack del crupier	false
Blackjack del jugador	false
¿Hubo un empate?	false
¿Ganó el jugador?	true

RESULTADO: ¡El jugador gana con la mejor mano de cartas!

🔬 Cobertura de pruebas

Se puede forzar la no aleatoriedad del reparto de las cartas para poder hacer pruebas de casuísticas concretas.

Para ello, búsquese "pruebas" en el archivo blackjack/assets/js/app.js para encontrar este comentario:

// Descomentando las dos siguientes líneas se pueden hacer pruebas forzando casuísticas

Siguiendo el patrón descrito anteriormente para nombrar las cartas, se pueden provocar las manos deseadas para cubrir todas las posibilidades en el testeo de la aplicación. Por ejemplo, si dejamos esas dos líneas descomentadas tal que así:

mazo = ['8C','7H','6C','AD','5H','QS'];
console.table( mazo );

Entonces, lo que se muestra por consola es el mazo completo de cartas que se tiene previsto repartir y, a continuación, los datos de la jugada según lo habitual. Vemos que en este caso aún queda por repartir la carta 8C del mazo, sin embargo, en concordancia con las reglas del blackjack, el crupier debe parar en 7H su reparto porque ya alcanzó 17 puntos o más:

(index)	Value
0	'8C'
1	'7H'
2	'6C'
3	'AD'
4	'5H'
5	'QS'

El jugador tiene blackjack: 21 puntos con 2 cartas.

(index)	Value
Mano del crupier	'5H-6C-7H'
Mano del jugador	'QS-AD'
Puntos del crupier	18
Puntos del jugador	21
Blackjack del crupier	false
Blackjack del jugador	true
¿Hubo un empate?	false
¿Ganó el jugador?	true

RESULTADO: ¡El jugador gana con la mejor mano de cartas!