前段时间，我遇到了一个非常有趣的服务，即  。该 API 处理与使用一副纸牌相关的所有可以想象到的事情。它处理创建一组洗牌的牌（包含一副或多副牌）、发一张或多张牌，甚至重新洗牌。 Deck of Cards API 更好的是，它包含卡片图像，如果您不想找到自己的卡片图像，您可以使用：  它是一个功能丰富的 API，最重要的是，它完全免费。甚至不需要钥匙。我了解这个 API 一段时间了，并考虑过用它构建一个纸牌游戏，但意识到游戏可以很快从简单变得相当复杂。 事实上，我的朋友 建议我不要花时间在这上面，老实说，他们可能是对的，但我 一直在构建没有意义的代码演示。 ;) 强烈 长期以来 对于我的演示，我遵循以下规则： 显然，基本的二十一点规则是，尽量接近 21 点而不超过。 不下注，一次只玩一手牌。 没有加倍或分裂。 庄家有“软17”规则。 （我几乎确信我做对了。） 游戏使用六副牌（我在某处读到这是标准的）。 游戏设置 最初，玩家和计算机都有一个代表他们手牌的数组。   playerCards:[], pcCards:[],   方法负责为两个玩家设置手牌： 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()); }, 有两点需要指出。首先，我与玩家发牌，然后是电脑（或发牌员，就名字而言我有点来回），然后再返回。我还修改了卡片结果对象以设置  ，以便我可以为庄家渲染卡片的背面。 showback 下面是 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>   只是一个常量： BACK_CARD   const BACK_CARD = "https://deckofcardsapi.com/static/img/back.png"; 游戏逻辑 所以，此时，我可以点击应用程序并获得一手二十一点牌：  在底部，我使用了一个 div 来显示当前状态：  我的逻辑是这样的： 从玩家开始，让他们击球或站立。 如果他们击中了，添加一张新牌，看看他们是否失败了。 如果他们停牌，则让庄家玩家。 让我们首先关注玩家。要击中，我们只需添加一张卡：   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; }, 胸围检查有点复杂。我构建了一个函数来获取手牌的“计数”，但在 Blackjack 中，A 可以是 1 或 11。 我发现（希望我是对的），你永远不可能有两个“高”A，所以我的函数返回一个 和 值，对于高版本，如果 A 存在，它会被算作 11，但仅一。这是这个逻辑： 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 }; }, 如果玩家失败，我们就会结束游戏并让用户重新开始。如果他们坚持下去，那么经销商就该接管了。这个逻辑很简单——低于 17 点时击中，要么爆牌，要么停牌。 为了让它更令人兴奋，我使用了一个变量和异步函数，   ，来减慢庄家的动作，这样你就可以看到它们（有点）实时地进行。经销商的逻辑是这样的： 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; } } } 仅供参考，  在白色状态区域中用作设置游戏消息的一种方式。 pcText 基本上 - 就是这样。如果您想自己玩一下，请查看下面的 CodePen，并随时对其进行分叉并添加改进：   https://codepen.io/cfjedimaster/pen/YzRZYqV?embedable=true

My Blog

Buy Me a Coffee

Read My Stories

該音頻是用故事的原始語言製作的！

如何使用 Alpine.js 和 Deck of Cards API 创建二十一点游戏

About Author

註釋

標籤

这篇文章刊登在

Related Stories

State of the Noonion: A New Era For Brands and Writers

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

State of the Noonion: A New Era For Brands and Writers

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps