Algum tempo atrás, encontrei um serviço bastante fascinante, a   . Essa API lida com tudo o que se possa imaginar relacionado ao trabalho com baralhos de cartas. Ele lida com a criação de um conjunto de cartas embaralhadas (contendo um ou mais baralhos), distribuindo uma carta (ou cartas) e até mesmo reembaralhando. API Deck of Cards  Melhor ainda, inclui imagens de cartões que você pode usar se não quiser encontrar as suas próprias:   É uma API incrivelmente repleta de recursos e, o melhor de tudo, é totalmente gratuita. Não há necessidade nem mesmo de uma chave. Conheço essa API há algum tempo e pensei em criar um jogo de cartas com ela, mas percebi que os jogos podem passar rapidamente de simples a razoavelmente complexos.  Na verdade, meus amigos insistiram   para que eu não perdesse tempo com isso e, honestamente, eles provavelmente estavam certos, mas tenho uma   história de criação de demos de código que não fazem sentido. ;) muito longa  Para minha demonstração, segui as seguintes regras:  Obviamente, as regras básicas do Blackjack, tente chegar o mais próximo possível de 21 sem ultrapassar.  Sem apostas, apenas uma mão de cada vez.  Sem dobrar ou dividir.  O dealer tem uma regra "soft 17". (Tenho quase certeza de que fiz isso direito.)  O jogo usa seis baralhos (li em algum lugar que era padrão).  Configuração do jogo  Inicialmente, o jogador e o computador têm uma matriz representando suas mãos.   playerCards:[], pcCards:[],  O método   lida com a configuração das mãos para ambos os jogadores: 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()); },  Duas coisas a apontar. Primeiro, negocio com o jogador, depois com o PC (ou dealer, pelo nome, eu meio que vou e volto) e depois volto novamente. Também modifico o objeto de resultado da carta para que   seja definido de forma que eu possa renderizar o verso da carta para o dealer. showback  Veja como isso é feito em 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>    é simplesmente uma constante: BACK_CARD   const BACK_CARD = "https://deckofcardsapi.com/static/img/back.png";  lógica do jogo  Então, neste ponto, eu poderia acessar o aplicativo e obter uma mão de Blackjack:   Na parte inferior, usei um div para exibir o status atual:   Minha lógica era assim:  Comece com o jogador e deixe-o bater ou parar.  Se eles acertarem, adicione um novo cartão e veja se eles estouraram.  Se eles ficarem, deixe o dealer jogar.  Vamos nos concentrar no jogador primeiro. Para acertar, basta adicionar um cartão:   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; },  A verificação do busto foi um pouco complexa. Criei uma função para obter a 'contagem' da mão, mas no Blackjack, os ases podem ser 1 ou 11.  Eu descobri (e espero estar certo), que você nunca pode ter dois ases 'altos', então minha função retorna um valor   e   onde para a versão alta, se um Ace existe, é contado como 11, mas apenas um. Aqui está essa 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 }; },  Se o jogador estourar, encerramos o jogo e deixamos o usuário recomeçar. Se eles permanecerem, é hora de o revendedor assumir. Essa lógica era simples - acertar enquanto estava abaixo de 17 e rebentar ou ficar de pé.  Para torná-lo um pouco mais emocionante, usei uma função variável e assíncrona,   , para retardar as ações do dealer para que você possa vê-las acontecer em (meio) tempo real. Aqui está a lógica do dealer: 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; } } }  Para sua informação,   é usado na área de status branca como uma forma de definir as mensagens do jogo. pcText  E basicamente - é isso. Se você quiser jogar sozinho, confira o CodePen abaixo e sinta-se à vontade para bifurcá-lo e adicionar melhorias:   https://codepen.io/cfjedimaster/pen/YzRZYqV?embedable=true

My Blog

Buy Me a Coffee

Read My Stories

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Como criar um jogo de Blackjack com Alpine.js e a API Deck of Cards

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps