Hace algún tiempo, me encontré con un servicio bastante fascinante, la   . Esta API maneja todo lo imaginable relacionado con el trabajo con barajas de cartas. Maneja la creación de un conjunto de cartas barajadas (que contiene uno o más mazos), repartiendo una carta (o cartas) e incluso reorganizando. API de Deck of Cards  Aún mejor, incluye imágenes de tarjetas que puedes usar si no quieres encontrar las tuyas propias:   Es una API increíblemente llena de funciones y, lo mejor de todo, es completamente gratuita. No es necesario ni siquiera una llave. Conozco esta API desde hace un tiempo y he contemplado crear un juego de cartas con ella, pero me di cuenta de que los juegos pueden pasar rápidamente de simples a bastante complejos.  De hecho, mis amigos me recomendaron   que no dedicara tiempo a esto y, sinceramente, probablemente tenían razón, pero tengo un   historial de creación de demostraciones de código que no tienen sentido. ;) encarecidamente largo  Para mi demostración, seguí las siguientes reglas:  Obviamente, según las reglas básicas del Blackjack, trata de acercarte lo más posible a 21 sin pasarte.  Sin apuestas, solo una mano a la vez.  Sin doblar ni dividir.  El crupier tiene una regla de "17 blandos". (Estoy casi seguro de que lo he hecho bien).  El juego usa seis mazos (leí en alguna parte que era estándar).  Configuración del juego  Inicialmente, el jugador y la computadora tienen una matriz que representa sus manos.   playerCards:[], pcCards:[],  El método   maneja la configuración de las manos para ambos jugadores: deal   async deal() { // first to player, then PC, then player, then PC this.playerCards.push(await this.drawCard()); // for the dealer, the first card is turned over let newcard = await this.drawCard(); newcard.showback = true; this.pcCards.push(newcard); this.playerCards.push(await this.drawCard()); this.pcCards.push(await this.drawCard()); },  Dos cosas a señalar. Primero, trato con el jugador, luego con la PC (o con el crupier, en cuanto al nombre, voy de un lado a otro), y luego de regreso. También modifico el objeto de resultado de la tarjeta para que tenga   establecido de modo que pueda representar el reverso de la tarjeta para el crupier. showback  Así es como se hace en HTML:   <div id="pcArea" class="cardArea"> <h3>Dealer</h3> <template x-for="card in pcCards">  <img :src="card.showback?BACK_CARD:card.image" :title="card.showback?'':card.title"> </template> </div> <div id="playerArea" class="cardArea"> <h3>Player</h3> <template x-for="card in playerCards"> <img :src="card.image" :title="card.title"> </template> </div>    es simplemente una constante: BACK_CARD   const BACK_CARD = "https://deckofcardsapi.com/static/img/back.png";  Lógica del juego  Entonces, en este punto, podría presionar la aplicación y obtener una mano de Blackjack:   En la parte inferior, usé un div para mostrar el estado actual:   Mi lógica era así:  Comience con el jugador y déjelo pedir o plantarse.  Si aciertan, añade una nueva carta y mira si se pasan.  Si se paran, deja que el crupier juegue.  Centrémonos primero en el jugador. Para acertar, simplemente añadimos una carta:   async hitMe() { this.hitMeDisabled = true; this.playerCards.push(await this.drawCard()); let count = this.getCount(this.playerCards); if(count.lowCount >= 22) { this.playerTurn = false; this.playerBusted = true; } this.hitMeDisabled = false; },  La verificación del busto fue un poco compleja. Desarrollé una función para obtener el 'conteo' de la mano, pero en Blackjack, los ases pueden ser 1 u 11.  Descubrí (y espero tener razón) que nunca se pueden tener dos ases 'altos', por lo que mi función devuelve un valor   y   donde para la versión alta, si existe un As, se cuenta como 11, pero solo uno. Aquí está esa lógica: lowCount highCount   getCount(hand) { /* For a hand, I return 2 values, a low value, where aces are considered 1s, and a high value, where aces are 11. Note that this fails to properly handle a case where I have 3 aces and could have a mix... although thinking about it, you can only have ONE ace at 11, so maybe the logic is: low == all aces at 1. high = ONE ace at 11. fixed! */ let result = {}; // first we will do low, all 1s let lowCount = 0; for(card of hand) { if(card.value === 'JACK' || card.value === 'KING' || card.value === 'QUEEN') lowCount+=10; else if(card.value === 'ACE') lowCount += 1; else lowCount += Number(card.value); //console.log(card); } //console.log('lowCount', lowCount); let highCount = 0; let oneAce = false; for(card of hand) { if(card.value === 'JACK' || card.value === 'KING' || card.value === 'QUEEN') highCount+=10; else if(card.value === 'ACE') { if(oneAce) highCount += 1; else { highCount += 10; oneAce = true; } } else highCount += Number(card.value); } //console.log('highCount', highCount); return { lowCount, highCount }; },  Si el jugador pasa, finalizamos el juego y dejamos que el usuario comience de nuevo. Si se mantienen firmes, es hora de que el crupier tome el relevo. Esa lógica era simple: golpear mientras estaba por debajo de 17 y pasarse o plantarse.  Para hacerlo un poco más emocionante, utilicé una función variable y asíncrona,   , para ralentizar las acciones del crupier para que puedas verlas en (más o menos) tiempo real. Aquí está la lógica del distribuidor: delay   async startDealer() { /* Idea is - I take a card everytime I'm < 17. so i check my hand, and do it, see if im going to stay or hit. if hit, i do a delay though so the game isn't instant. */ // really first, initial text this.pcText = 'The dealer begins their turn...'; await delay(DEALER_PAUSE); // first, a pause while we talk this.pcText = 'Let me show my hand...'; await delay(DEALER_PAUSE); // reveal my second card this.pcCards[0].showback = false; // what does the player have, we need the best under 22 let playerCount = this.getCount(this.playerCards); let playerScore = playerCount.lowCount; if(playerCount.highCount < 22) playerScore = playerCount.highCount; //console.log('dealer needs to beat', playerScore); // ok, now we're going to loop until i bust/win let dealerLoop = true; while(dealerLoop) { let count = this.getCount(this.pcCards); /* We are NOT doing 'soft 17', so 1 ace always count as 11 */ if(count.highCount <= 16) { this.pcText = 'Dealer draws a card...'; await delay(DEALER_PAUSE); this.pcCards.push(await this.drawCard()); } else if(count.highCount <= 21) { this.pcText = 'Dealer stays...'; await delay(DEALER_PAUSE); dealerLoop = false; this.pcTurn = false; if(count.highCount >= playerScore) this.pcWon = true; else this.playerWon = true; } else { dealerLoop = false; this.pcTurn = false; this.pcBusted = true; } } }  FYI,   se usa en el área de estado blanca como una forma de configurar los mensajes del juego. pcText  Y básicamente, eso es todo. Si quiere jugarlo usted mismo, consulte el CodePen a continuación y siéntase libre de bifurcarlo y agregar mejoras:   https://codepen.io/cfjedimaster/pen/YzRZYqV?embedable=true

My Blog

Buy Me a Coffee

Read My Stories

Este audio es producido en el idioma original de la historia!

Cómo crear un juego de blackjack con Alpine.js y la API de Deck of Cards

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps