Project 3: Blackjack
Last updated
Last updated
Implement a simplified version of Blackjack. If you're not familiar with Blackjack, refer to for game rules. Our simplified rules are the following. Please read all the requirements before starting it!
There will be only two players. One human and one computer (for the Base solution).
The computer will always be the dealer.
Each player gets dealt two cards to start.
The player goes first, and decides if they want to hit (draw a card) or stand (end their turn).
The dealer has to hit if their hand is below 17.
Each players' score is the total of their card ranks. Jacks/Queen/Kings are 10. Aces can be 1 or 11.
The player who is closer to, but not above 21 wins the hand.
Take a look at some past project as references, and student-voted most-creative projects from previous Batches for inspiration :)
The main function runs on each player's turn. The sequence of actions in the game might be the following.
Deck is shuffled.
User clicks Submit to deal cards.
The cards are analysed for game winning conditions, e.g. Blackjack.
The cards are displayed to the user.
The user decides whether to hit or stand, using the submit button to submit their choice.
The user's cards are analysed for winning or losing conditions.
The computer decides to hit or stand automatically based on game rules.
The game either ends or continues.
Creating helper functions can be a powerful way to refactor your code and keep it neat.
Don't be afraid to throw away code, especially if you already know how you would write it better.
Commit your code often, whenever you have a small working version. For example, each action listed above would be a commit. Make concise and precise commit messages so that you can reference your old changes later.
Given the above *final* action sequence to play a full game, how do we break these down into sub-features that we can work on (and verify they are working) one at a time? We want to work on features in small parts, but not have to redo any work as we expand the capability of the game, so we want to plan ahead to make sure we can start small and scaffold in the later features at the same time.
If you already have an effective strategy for creating your game, you can skip ahead. If you're not sure how to approach the game, try applying the following strategies to get started. The following are strategies for breaking down larger projects into smaller tasks to keep up progress, momentum, and motivation on the project. Please read to the end before starting.
Aim for a playable game. The essence of blackjack requires:
Two players - a player and a dealer (computer).
A deck of cards.
A starting hand of 2 cards for each player.
Comparing both hands and determining a winner. The possible scenarios are:
A tie. When both the player and dealer have the same total hand values - or if both draw Blackjack
A Blackjack win. When either player or dealer draw Blackjack.
A normal win. When neither draw Blackjack, the winner is decided by whomever has the higher hand total.
Return appropriate messages. For example:
Test your code.
The player hitting or standing is different from the dealer hitting or standing. The rules state that the dealer hits or stands after all players are done, so let's work on the players hitting or standing first.
The player hitting or standing is a new mode in the game that allows the player to enter their choice. Add the logic for when the player busts (has a total score of >21).
Refactor your logic to wait until the player is done to evaluate the game-winning condition.
The player should not immediately lose if he busts - there is a possibility he will tie with the dealer if the dealer also busts.
Test your code.
The rules state that the dealer hits after the player is done. After the player confirms they are done, add the logic for the dealer adding cards to their hand. This should happen before the winning condition.
Test your code.
Add logic to determine whether Aces should have value of 1 or 11 for a given hand.
For example, if a player draws cards in the following order:
"Ace" and "2" (total 13)
"4" (total 17)
"Ace". (total 18)
The total hand value should be 18, as only ONE of the aces will be counted as 11.
Test your code.
Make the game intuitive and fun to use by adding explicit instructions for each step of the game. "Wow, you're at 14 right now! Do you want to hit or stand? Type h for hit or s for stand."
Use emoji for the card suits ♣️♠️♦️♥️and for the card names 2️⃣. Use more emoji in your game instructions and results. Get creative!
You can add images to your game by including an HTML image tag in myOutputValue.
Image variable template: Fill in the COPIED_URL_OF_IMAGE with any image URL you find.
Right-click on an image and copy the url by selecting "Copy Image Address".
Paste this value into your code as shown above.
Place an image file in your Git repository. Commit the image file and push your image to your GitHub repository.
For example you added an image called my-image.jpeg into your repository directory. Refer to it like the following:
Image variable template: Fill in the COPIED_RELATIVE_IMAGE_PATH with the image file name you uploaded to your repo.
In most casinos, all cards are face-up except the dealer's first card. This injects a dimension of strategy into the game, as the player does not have perfect information to begin with. Edit your game logic such that the player is only told one of the dealer's first two cards.
Try adding one or more additional game features (you can also have different versions with different features if implementing all features in one version is too complicated):
The player starts with 100 points. Each round the player wagers a number of points before their hand is dealt. Keep track of the player's points throughout the game.
Enable multiple players to play against the dealer, where players can take turns. The game hides and shows relevant hand according to the turn.
Please leave your name and section number in the title of the pull request.
Please fill in the questionnaire in the pull request comments when you submit.
The cloned BlackJack repo has built-in sharing code. When you share your project with friends on major platforms it will have a nice looking share image.
Edit the index.html to match the GitHub Pages URL you created in the instructions above.
To have your share link properly link to your page, find your GitHub Pages URL:
Replace the url in the URL section of the meta tags in index.html:
Please only refer to the reference solution after you have attempted the project. Note that there are many ways to implement the project and the reference solution is only 1 way.
Rocket Academy does not endorse gambling. We chose Blackjack as a project because of its complex rules that help facilitate coding instruction.
Begin by forking the . Once forked, clone your fork of the repo and work on that copy.
Review
If you are still unsure how to start, or find yourself stuck for too long, Bryan can walk you through how to get to the Base solution. Please try to attempt the project once yourself before referencing the walkthrough, and do note that the video uses template code straight from . If you would like to follow along exactly, you can start with the used in the walkthrough.
The completed base version as per the walkthrough can be viewed !
Improve the look and feel of your game - if you did not attempt the Comfortable version of Beat That!, you can use the as a quick-start guide. If you have, feel free to move on, and add your own creative touches.
Add instructions on how to start the game by editing the index.html.
Simply add your instructions into . These instructions will appear when the game loads and will be erased as soon as the user clicks the submit button.
Go to a site like for gifs (although any website with images will work)
Set your own custom colors in the CSS. Find the color values in index.html and change them. Use this tool to find the colors you want:
Find matching color sets using this design tool:
Set your own custom fonts:
Look ahead to to see how additional HTML elements can be referenced and manipulated; add a button for 'Hit' and 'Stand'.
Add hand-splitting functionality to the game. If the player has two of the same kind of card, they can choose to split and get dealt 2 new cards. Full splitting rules . Dealer is not allowed to split.
the commits in your local repo to GitHub.
to submit your assignment.
Facebook Share URL: line
Twitter Share URL: line
For Facebook / Slack / Whatsapp / Discord / Disco LMS Shares: edit lines in the index.html
For Twitter Shares: edit lines in the index.html
