Hey everyone, welcome back to my second project of the year, Blackjack! Also known as 21, this is a super popular casino card game where players compete against a dealer to have a hand closest to 21 without going over. Each player and dealer starts with two cards, one of the dealer’s being face down and a mystery. To figure out your hand total, the numbers on the cards are worth their face value (2-10), the face cards are worth 10, and an ace can be either 1 or 11. After the deal, you can either choose to ‘hit’ and get another card, or ‘stand’ and stick with your current total. If you hit and your hand total goes over 21, you lose. There are other options like splitting or doubling down, but for now, we’ll just focus on the basics of hit or stand. When it’s the dealer’s turn, they flip over their face-down card. If their total is less than 17, they have to hit until their hand is at least 17. There are a few different ways you can win this game. If your hand is active and the dealer goes over 21 or your hand is higher than theirs, you win. Or, if you get a 21 on your first two cards and the dealer doesn’t have a 21 on their first two cards, you win too! Now that we know how the game works, let’s get started building this project!
So, I started by building the whole project using semantic HTML and CSS to get the layout just the way I wanted it. Once everything was set up, I grabbed a notepad and started jotting down what needed to be hidden, what JavaScript would do and create, the functionality of the buttons and other features, and the order in which they should work to make the game functional. With my notes and plan in place, it was time to bring the page to life!
The build
The game works in 4 steps:
- Deal the cards
- Player either continues to hit or stand
- Dealer either hits or stands
- Determine the winner
Step 1: deal the cards
To start the game, the dealer deals the cards in a specific order. First, they give one card face up to the player, then one card face up to the dealer. Next, they give the player another card face up, and finally, they give the dealer a second card face down. To deal the cards, we need a deck of cards to work with.
To make the deck, we first need to figure out what it’s made of. A standard deck of playing cards has 52 cards. Each card has a number (2 to 10), a jack, a queen, a king, and an ace. These cards come in four different suits: clubs, diamonds, hearts, and spades.
To make these 52 cards, I started with three arrays. The first array had the values of the cards (2 to 10, jack, queen, king, and ace). The second array had the four suits. The third array was empty and would hold the deck.
I then created a function that used a for loop to loop through the values array. Inside the loop, I used another for loop to loop through the suits array. For each value-suit combination, I added it to the empty array deck. This way, I filled the deck with the 52 cards.
With the deck of cards now created we have another issue that needed to be addressed before we could deal. When the deck was created it pushed the cards into the deck in numerological order so when we go to deal the cards they wouldn’t be random. To fix this problem, in real life we shuffle the deck to randomize the draw, which we can do the same thing with a JavaScript function.
This function is designed to randomize the order of the deck by implementing the Fisher-Yates shuffle algorithm to shuffle the array. The function takes a single parameter, in this case the deck array, which then iterates through the length array replacing each element (represented by i) with a random element (represented by j). The elements at i and j are then swapped using array destructuring assignment. This effectively places the places the element at index i into a random position within the subarray from the start of the deck up to index i. After the loop is complete, the function returns the shuffled deck.
Now that we have the deck of cards, we can deal the cards and move on to the next function. In blackjack, the order of dealing is as follows: one card face up to the player, one card face up to the dealer, one card face up to the player, and one card face down to the dealer that’s unknown. To perform this action, the function takes three parameters: the deck from which the cards are dealt, the player’s hand, and the dealer’s hand. The player’s and dealer’s hands start as empty arrays. The function then enters a for loop that pops the last element from the deck array and adds it to the player’s hand. It then repeats this process for the dealer. Once the loop is complete, the function calls another function to update the DOM and display the four cards and the player’s total.
Step:2 The players turn
With the cards dealt and the value of the players hand now known, the player has 2 options to choose from, either “hit” or “stand”. If the player chooses to press the hit button, the hit function is run adding another card to the players hand using the same pop push method used previously to deal the cards, followed by updating the DOM and recalculating the total and displaying the card and total on the page. The function then runs an if statement to check if the total is still under 21, if so it stays on the players hand, if not it ends the players turn by running the next function we’re going to talk about, the stand function.
Step 3: The dealers turn
If the player chooses to stand pat with their hand then the stand function is ran. This function effectively ends the players turn exposing the dealers upside down card and tallying up the dealers hand total. In blackjack the rule is that the dealer must hit until their hand is equal to at least 17. Once the hand reaches 17 or greater their hand is complete. The next step of this function is to see if the hand is less than 17, and if so, the same pop push method and DOM update that was done with the player when the hit button is preformed with the dealers hand.
Step 4: Determine the Winner
This is the last step of the game when the player and dealers are done. It takes the total of the player’s hand and the dealer’s hand and runs them through a series of if statements to see who wins.
Future modifications
In the future I’d like to implement a few different features to the game such as a betting feature, by have the player submit a total they’d wish to begin playing with. Then placing wagers on hands per deal and allowing some of the side bet options you find in the casino. Additionally I’d like to also add the more advanced player functions such as double down and splitting on the hand with the bet features.
Conclusion
This was a fun project to build and I really enjoyed my time working on the product. This project really forced me to think in algorithmic steps which is wonderful for helping develop the “programmer mindset” and how to think in development and design. I will link the repository and live site below if you’d like to also build this project and or play the game. As always, thanks for reading 😊
Top comments (2)
There is nothing stopping the buttons from being pressed after the game is over. I can just keep adding cards forever, way over what the total of 52 cards would be.
Fixed, thank you for letting me know.