Blackjack Game App
With our modeling done in Part 1 and the C# classes created in Part 2, we are now ready to build some Blazor components to model a game of Blackjack. In this part, we will build several small components and determine what their functionality should be.
At the end of this post, we will have a list of methods that need to be implemented to make this Blackjack in Blazor game work, which we will implement along with the rest of the game in the next and final part of this series.
Also In This Series
You might want to read the first two parts of this series before reading this one:
Blackjack Simulator is always free — that’s the best. Sometimes you have no money to gamble — it is OK, you may play blackjack online just for fun, with no cash involved! Test some new strategy, have game experience and fun playing online blackjack. The virtual blackjack is also instantly available online for 24 7. Now we can build the meat of our Blackjack in Blazor app: the Blackjack.cshtml component. Let's start with a basic Blazor component, which includes the using clauses we need as well as instances of Dealer, Player, and GameState. BEKHO TEAM is a game development company based in Santiago, Chile, founded in 2010 and Active members of VGChile since 2011. We are blazing fast developing highly polished games, Always striving to achieve the best balance between quality and performance in web and mobile devices. Offers in-app purchases. Add to Wishlist. Blackjack is the best way to perfect this timeless table game for fun, offline and completely risk free! Similar to Twenty One, Pontoon and Vingt-Un, this.
As always, there's a sample repository over on GitHub you can use to follow along with this post. It also has all my other Blazor game implementations. Check it out!
All caught up? Good! Let's get going!
The Game State
We must solve a problem that we have left unsolved since the original post in this series: how do we represent the current state of the game?
We'll need to know this because certain displays (e.g. the Insurance bet amount, the payout or loss amount, status notifications, etc.) will only be shown to the user when the game is in certain states.
We can work out the possible values for the game state by walking through a typical Blackjack hand.
- At the start of the hand, the player must be able to make bets before the initial deal. Therefore there must be a game state for 'betting'.
- We will also want a state for before the game has started; we'll call that 'not started', unsurprisingly.
- The dealer will need to make the initial deal after the bet; the corresponding game state will be 'dealing'.
- Since the dealer will occasionally need to shuffle the cards, we should also have a game state for 'shuffling'.
- Once the hand is underway, and the player can hit or stand, the game state will be 'in progress' until the hand is complete or another state supersedes it.
- One state that can supersede the 'in progress' state is the Insurance special play; during that play, the game state will be 'insurance'.
- Finally, after the hand, the dealer will need to either collect the lost bet or pay out the player; we will call this state 'payout'.
Consequently, we end up with the following GameState enumeration:
We will use this enumeration extensively while building our Blazor components for this game. Speaking of which, it's time to start doing that. Let's begin with the smallest components first.
The PlayingCard Component
Like how we modeled the playing card in C# first because it was the smallest independent object, we will create a Blazor component for it first for the same reason.
The component only needs an instance of the Card C# object to work:
Remember that the [Parameter] attribute is used so that a value can be passed into the component from its declaration on another component.
Note that we have a special CSS class for blackjack-card that makes the cards appear stacked:
The Player Hand Component
If we build up from the playing card Blazor component, the next component we need is one to display a player's hand.
This component is pretty straightforward:
The Score Component
One of the things we should display is the current 'visible' score for both the Player and the Dealer. In order to calculate this score, the component needs to know which player we are calculating for, and the current state of the game, since the score is not known during certain parts (e.g. betting).
Here's the component:
The Message Component
While the hand of Blackjack is being played, we will sometimes want to display a message to the user, particularly if the Dealer is shuffling the deck or doing the initial deal. Otherwise, we will display the Player's bet amount.
To do this, the Message component will need to know the current GameState as well as the bet amount. Said component looks like this:
The Hand Result Component
After the hand is complete, we will need to have a message that shows the result of the hand. Possible results include messages like 'Win!', 'Lose...', or 'Push'.
Here's the hand result Blazor component:
The Funds Display Component
There's one last little component we want to define before we start build our Blackjack in Blazor game area properly: the funds display component.
This component should show the remaining funds for the player, and when the player wins or loses a hand, should then show the change in funds that results from that win/loss. In order to do this, it must know what value to display for the Funds, and the amount of change that is happening.
Here's the funds display Blazor component:
It would also be valid to pass an entire Player instance instead of Funds and Change, since both of those properties live in Player.
Building the Blackjack Blazor Component
Now we can build the meat of our Blackjack in Blazor app: the Blackjack.cshtml component.
The Basics
Let's start with a basic Blazor component, which includes the using clauses we need as well as instances of Dealer, Player, and GameState.
We are going to imagine that our display is divided into nine parts, in roughly a three-by-three grid. Hence, the display is divided like so:
We're going to build each row separately, and then wire up the functionality necessary to make it all work.
Throughout this section, we are going to define method names that will be implemented in the section below entitled 'Walking Through the Game'.
Top Row - Card Deck, Dealer Hand, Dealer Score
Let's start with a basic outline for the top row of the grid.
The upper-middle spot will be the Hand display for the Dealer, and the upper-right spot will be the Score display for the same. We have already coded up Blazor components for these displays, so we can modify our row to include them:
The remaining thing we need to do is handle the CardDeck display. The idea is that the less cards that remain in the deck, the less cards are displayed in this spot. We will say that for every 13 cards that remain in the deck, we display one additional card back in the draw spot.
Hence, the code for the CardDeck display looks like this:
The Complete Top Row
Put together, the top row of our display looks like the following:
We can now move on to the middle row.
Middle Row - Player Funds, Status Message
Here's our layout grid again:
As you can see, the middle-right spot on the grid is blank, so we don't need to do anything for that. Further, we already have a Blazor component for both the Player's funds in the middle-left spot and the status message that will appear in the center spot.
Handling the Center Display
However! We have not yet considered the betting phase of the Blackjack hand. During that phase, the display grid looks like this:
Which means that we must have markup and/or code for the buttons that allow the player to make a bet in the center spot.
We are going to allow the player to bet $10, $20, or $50. Since we cannot allow the player to bet more than they have in their Funds, we must display the corresponding buttons only if the player has more than that amount.
The code that displays these buttons is as follows:
The Center Display Messages
In addition to the bet buttons the center spot on the grid also needs to display two different kinds of messages.
- If the hand is over, the center spot displays the Hand Result component.
- If the hand is in progress, or the dealer is shuffling or dealing, the center spot displays the Message component.
The code which shows these components looks like this:
The Complete Middle Row
Using the code from the last two sections, we can write the markup for the complete middle row of our display:
Bottom Row - Player Actions, Player Hand, Player Score
One last time, here's the grid for the Blackjack hand in progress:
Best Blackjack App For Ipad
The bottom-middle and bottom-right spots are already handled by the Hand and Score components respectively, so let's just worry about the bottom-left spot.
Player Actions
At the start of the game, we should display to the user a 'Start Game' button that allows them to begin the game. Once the hand is in the Payout state (meaning the hand is complete), we will also display a button 'Keep Going!' that will start a new hand.
We also need buttons that are only visible to the user in certain situations. Here are the player actions that we need to implement:
- Hit or Stand - The player may hit or stand if they have not busted, they have not already stood, and the hand is still in progress.
- Double Down - The player may double down if all the Hit or Stand conditions are still true AND the Player has exactly two cards AND the Player has a score of 9, 10, or 11 AND the Player has the available funds to double their bet.
- Insurance - The player may make an Insurance bet if all of the Hit or Stand conditions are still true AND the Dealer has exactly two cards AND the Dealer's visible card is an Ace.
The Complete Bottom Row
Will all of these conditions (and the Hand and Score components), the complete bottom row of the display can now be written:
The Methods to Implement
After writing the markup for all of the displays, we now must implement the following methods:
InitializeHand()NewHand()Stand()Hit()Insurance()DoubleDown()Bet(int amount)
In addition to these, we must also implement any other methods we require to make our Blackjack game work. Plus, we will run through some demoes of how the game will look. All of that, in the final post of this series!
Summary
In this part of our Blackjack in Blazor series, we continued with our bottom-up design methodology and build several display components, including for the Player or Dealer's scores, game status messages, hand result messages, and a display for the Player's funds.
Through this, we learned what kinds of methods we still need to implement to make our game work. We'll complete the implementation, and test it for a few games, in the next and final part of this series.
Do you have a way you can improve on this implementation? Submit a pull request or let me know in the comments! I am always looking for new ideas and input from my dear readers.
Free Blackjack For Windows 10
Happy Coding!
Free Blackjack Game App
News & Announcements
Policies, news, and updates about the BlackjackTournaments.com site.
Latest:Site downKenSmith,Sep 1, 2020Event Calendar
Find casino tournaments in your area with our free tournament event calendar.
Introduce Yourself
Welcome to the site! Tell us a little about yourself.
Latest:Looking to try out my skills on tournamentsBughouseMaster,Jan 1, 2021
The Mental Game
Discuss the mental aspects required to refrain from tilting
Latest:Got Mental Game Questions?BughouseMaster,Aug 30, 2020
Blackjack Tournament Strategy
Discuss strategy for blackjack tournaments, and pose questions about situations.
Latest:Simplifying Tournament Strategygronbog,Feb 14, 2021Blackjack Events (USA)
Discuss blackjack tournaments held in the US.
Latest:Any tournaments that are not invite only?Moses,Mar 4, 2021 at 9:01 PMBlackjack Events (Canada)
Discuss blackjack tournaments held in Canada.
Latest:Blackjack 21 Tournament - Niagara Fallsview Casino - Niagara Falls, ON - CanadaBughouseMaster,Jan 21, 2020Blackjack Events (Other areas)
Discuss blackjack tournaments held in other parts of the world, and on cruise ships.
Latest:2-advance online regularity challenge 2021 - Belgium Blackjack Trophy Online - Liège - BelgiumBughouseMaster,Feb 7, 2021Blackjack Events (Online Casinos)
Discuss blackjack tournaments at online casinos.
Latest:March 26th 1v1 Round Robin BLACKJACK 21 Tournament using the BJ21 AppWm. O. Woodward,Mar 4, 2021 at 4:45 PM
3-Card Poker Tournament Strategy
Discuss strategy for 3-card poker tournaments.
Latest:Does the Ante Bonus Pay When You Fold?gronbog,May 20, 20143-Card Poker Events
Discuss 3-card poker tournament events.
Latest:beau rivage 3 card in aprilgeorge,Mar 8, 2018
Baccarat Tournament Strategy
Discuss strategy for baccarat tournaments.
Latest:Final Hand, Secret Bet, Protecting a Slim LeadS. Yama,Jan 30, 2014Baccarat Events
Discuss baccarat tournament events.
Latest:$150,000 Baccarat Tourney - Paris, 4/2-4/4BughouseMaster,Feb 14, 2021
Craps Tournament Strategy
Discuss strategy for craps tournaments.
Latest:The Cardinal Rule of Craps Tournament StrategyBughouseMaster,Feb 6, 2021Craps Events
Discuss craps tournament events.
Latest:$100,000 Craps Tournament - Bally's Las Vegas - Las Vegas, NVDakota,Aug 19, 2020
Roulette Tournament Strategy
Discuss strategy for roulette tournaments.
Latest:Strategy for accumulation roulette tournament ?gronbog,Jul 18, 2017Roulette Events
Discuss roulette tournament events.
Latest:Gronbog won again! This time in Roulettegronbog,Nov 2, 2017
Other Games Tournament Strategy
Discuss strategy for other casino table game tournaments.
Latest:Help Me Come Up With a Nickname for a Poker Player Typegronbog,Jan 22, 2018Other Games Events
Discuss casino tournament events that don't fit in other categories.
Latest:$25,000 Pai Gow Poker Tournament - Grand Sierra Resort - Reno, NVDakota,Feb 9, 2020
Sidewalk Cafe
Off-topic posts.
Latest:Christmas HolidayMrPill,Dec 25, 2020Archived Forums
Athough these forums are still open for discussion, these topics are no longer timely.
- Discussions:
- 683
- Messages:
- 7,755
Sub-Forums: 4Archived Forums
Latest:Tonight may be World Blackjack Tour showKenSmith,Feb 23, 2019