Il y a quelque temps, je suis tombé sur un service assez fascinant, l'   . Cette API gère tout ce qui est imaginable lié au travail avec des jeux de cartes. Il gère la création d'un jeu de cartes mélangées (contenant un ou plusieurs jeux), la distribution d'une carte (ou de cartes) et même le remaniement. API Deck of Cards  Encore mieux, il inclut des images de carte que vous pouvez utiliser si vous ne voulez pas trouver la vôtre :   C'est une API incroyablement riche en fonctionnalités, et surtout, elle est entièrement gratuite. Même pas besoin de clé. Je connais cette API depuis un certain temps et j'ai envisagé de créer un jeu de cartes avec, mais j'ai réalisé que les jeux peuvent rapidement passer de simples à assez complexes.  En fait, mes amis m'ont   conseillé de ne pas passer de temps là-dessus, et honnêtement, ils avaient probablement raison, mais j'ai une   histoire de démos de code du bâtiment qui n'ont pas de sens. ;) fortement longue  Pour ma démo, je suis allé avec les règles suivantes:  Évidemment, les règles de base du Blackjack, essayez de vous rapprocher le plus possible de 21 sans le dépasser.  Pas de pari, juste une main à la fois.  Pas de doubler ou de diviser.  Le concessionnaire a une règle "soft 17". (Je suis surtout sûr d'avoir bien fait.)  Le jeu utilise six decks (j'ai lu quelque part que c'était standard).  Configuration du jeu  Initialement, le joueur et l'ordinateur ont tous deux un tableau représentant leurs mains.   playerCards:[], pcCards:[],  La méthode   gère la mise en place des mains pour les deux joueurs : 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()); },  Deux choses à souligner. D'abord, je distribue au joueur, puis au PC (ou au croupier, en ce qui concerne le nom, je fais des allers-retours), puis à nouveau. Je modifie également l'objet de résultat de la carte pour que   soit défini de sorte que je puisse rendre le dos de la carte pour le croupier. showback  Voici comment cela se passe 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>    est simplement une constante : BACK_CARD   const BACK_CARD = "https://deckofcardsapi.com/static/img/back.png";  Logique du jeu  Donc, à ce stade, je pourrais cliquer sur l'application et obtenir une main de Blackjack :   En bas, j'ai utilisé un div pour afficher l'état actuel :   Ma logique était la suivante :  Commencez par le joueur et laissez-le frapper ou rester debout.  S'ils touchent, ajoutez une nouvelle carte et voyez s'ils ont éclaté.  S'ils se tiennent, laissez le joueur croupier.  Concentrons-nous d'abord sur le joueur. Pour frapper, on ajoute simplement une carte :   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 vérification du buste était un peu complexe. J'ai construit une fonction pour obtenir le "compte" de la main, mais au Blackjack, les As peuvent être 1 ou 11.  J'ai compris (et j'espère que j'ai raison), que vous ne pouvez jamais avoir deux as "élevés", donc ma fonction renvoie une valeur   et   où pour la version haute, si un As existe, il est compté comme 11, mais seulement un. Voici cette logique : 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 le joueur saute, nous terminons le jeu et laissons l'utilisateur recommencer. S'ils restent debout, il est temps pour le croupier de prendre le relais. Cette logique était simple - frapper en dessous de 17 ans et soit buste, soit debout.  Afin de le rendre un peu plus excitant, j'ai utilisé une fonction variable et asynchrone,   , pour ralentir les actions du croupier afin que vous puissiez les voir se dérouler en (un peu) temps réel. Voici la logique du concessionnaire : 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; } } }  Pour votre information,   est utilisé dans la zone d'état blanche comme moyen de définir des messages de jeu. pcText  Et fondamentalement - c'est tout. Si vous voulez y jouer vous-même, consultez le CodePen ci-dessous, et n'hésitez pas à le bifurquer et à ajouter des améliorations :   https://codepen.io/cfjedimaster/pen/YzRZYqV?embedable=true

My Blog

Buy Me a Coffee

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

Comment créer un jeu de blackjack avec Alpine.js et l'API Deck of Cards

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps