Vor einiger Zeit bin ich auf einen ziemlich faszinierenden Dienst gestoßen, die   . Diese API verarbeitet alles, was man sich im Zusammenhang mit der Arbeit mit Kartenspielen vorstellen kann. Es übernimmt das Erstellen eines gemischten Kartensatzes (der einen oder mehrere Stapel enthält), das Austeilen einer Karte (oder Karten) und sogar das Neumischen. Deck of Cards API  Noch besser: Es enthält Kartenbilder, die Sie verwenden können, wenn Sie keine eigenen finden möchten:   Es handelt sich um eine unglaublich funktionsreiche API, und das Beste ist, dass sie völlig kostenlos ist. Es ist nicht einmal ein Schlüssel erforderlich. Ich kenne diese API schon seit einiger Zeit und habe darüber nachgedacht, damit ein Kartenspiel zu erstellen, habe aber festgestellt, dass Spiele schnell von einfach zu ziemlich komplex werden können.  Tatsächlich haben mir meine Freunde   geraten, keine Zeit damit zu verschwenden, und ehrlich gesagt hatten sie wahrscheinlich Recht, aber ich habe eine   Geschichte mit der Erstellung von Code-Demos, die keinen Sinn ergeben. ;) dringend lange  Für meine Demo habe ich mich an die folgenden Regeln gehalten:  Offensichtlich ist es bei den Grundregeln von Blackjack so, möglichst nahe an die 21 heranzukommen, ohne sie zu überschreiten.  Kein Einsatz, nur eine Hand nach der anderen.  Kein Verdoppeln oder Aufteilen.  Der Händler hat eine „Soft 17“-Regel. (Ich bin mir größtenteils sicher, dass ich das richtig gemacht habe.)  Das Spiel verwendet sechs Decks (ich habe irgendwo gelesen, dass es Standard war).  Spiel-Setup  Zunächst verfügen sowohl der Spieler als auch der Computer über ein Array, das ihre Hände darstellt.   playerCards:[], pcCards:[],  Die   Methode übernimmt das Einrichten der Hände für beide Spieler: 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()); },  Zwei Dinge sind hervorzuheben. Zuerst teile ich es dem Spieler aus, dann dem PC (oder dem Dealer, was den Namen angeht, gehe ich hin und her) und dann wieder zurück. Außerdem ändere ich das Kartenergebnisobjekt so, dass es   Einstellung hat, sodass ich die Rückseite der Karte für den Dealer rendern kann. showback  So geht das in 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>    ist einfach eine Konstante: BACK_CARD   const BACK_CARD = "https://deckofcardsapi.com/static/img/back.png";  Spiellogik  An diesem Punkt könnte ich also die App aufrufen und eine Blackjack-Hand erhalten:   Unten habe ich ein div verwendet, um den aktuellen Status anzuzeigen:   Meine Logik war so:  Beginnen Sie mit dem Spieler und lassen Sie ihn schlagen oder stehen.  Wenn sie getroffen haben, fügen Sie eine neue Karte hinzu und prüfen Sie, ob sie kaputt gegangen sind.  Wenn sie stehen bleiben, lassen Sie den Dealer-Spieler.  Konzentrieren wir uns zunächst auf den Spieler. Zum Schlagen fügen wir einfach eine Karte hinzu:   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; },  Die Brustprüfung war etwas komplex. Ich habe eine Funktion erstellt, um die „Anzahl“ für die Hand zu ermitteln, aber beim Blackjack können Asse 1 oder 11 sein.  Ich habe herausgefunden (und hoffe, dass ich recht habe), dass man niemals zwei „hohe“ Asse haben kann, also gibt meine Funktion einen   und   Wert zurück, wobei für die hohe Version ein Ass, wenn es existiert, als 11 gezählt wird, aber nur eins. Hier ist diese Logik: 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 }; },  Wenn der Spieler ausscheidet, beenden wir das Spiel und lassen den Benutzer von vorne beginnen. Wenn sie bestehen bleiben, ist es Zeit für den Händler, zu übernehmen. Diese Logik war einfach: einen Treffer erzielen, während man unter 17 ist, und entweder Pleit oder Stand.  Um es etwas spannender zu machen, habe ich eine variable und asynchrone Funktion namens   verwendet, um die Aktionen des Dealers zu verlangsamen, sodass Sie sie (irgendwie) in Echtzeit sehen können. Hier ist die Logik des Händlers: 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; } } }  Zu Ihrer Information:   wird im weißen Statusbereich verwendet, um Spielnachrichten festzulegen. pcText  Und im Grunde – das ist es. Wenn Sie es selbst spielen möchten, schauen Sie sich den CodePen unten an und teilen Sie ihn gerne mit einem Fork und fügen Sie Verbesserungen hinzu:   https://codepen.io/cfjedimaster/pen/YzRZYqV?embedable=true

My Blog

Buy Me a Coffee

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

So erstellen Sie ein Blackjack-Spiel mit Alpine.js und der Deck of Cards API

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps