This is my first javascript project and was inspired by this freeCodeCamp tutorial by scrimba: https://youtu.be/jS4aFq5-91M
(His repository for his version here)
Updated on 2022-02-23. Updated some of the Javascript. Added in font color changes for the status messages. Also fixed a DOM object that I had created but never used (mesageEl). Increased the size of the buttons for better use on mobile. Also added back in the facedown dealer card (It stopped working after I updated the layout).
Updated on 2022-02-19. I completely re-wrote the HTML and CSS using grid and flex to make the layout fully responsive for all screen layouts. The most difficult part was figuring out how to get the images to scale responsively. I found that using a width of 7vmax allowed me to neatly display up to 11 cards per person on the screen. It keeps them readable on all screen sizes.
I've gone further than the example in the video by adding the following:
- An actual set of decks put together rather than just picking completely random values each time.
- Variable bet amounts (using 4 different customizable buttons)
- A dealer, because Blackjack is way more fun when there's some competition.
- Card Images, because who wants to decipher what 5C, AS, JH means??
- I've heavily commented the JS code, and will continue to do so with the HTML and CSS as I learn more about all three.
- I've written logic to only show the dealer's first card and card value until the player's turn is over.
- I've written the logic to handle Aces having variable value based on the value of all the other cards in the hand.
- A double down button, only available on the player's first turn of a round. Doubles the bet amount (if the player has enough money) and ends the player's turn.
- Stats. So. Many. Stats. It's only 12 stats, but still, it felt like a lot as I was adding them into the code.
The following game mechanics are adjustable by changing the variables at the top of the .js file:
- Bet amounts: $1, $5, $10, and $20 are base
- Player starting funds: $100 base
- Number of Decks: 4 base. The game doesn't really shuffle, so much as pull a random card from the stack until the stack is empty. I may redo this at some point for a "real" shuffle.
- Dealer Draw To: When it's the dealer's turn they will continue to draw cards to this variable's setting. Standard is 17.
Roadmap is a bit of a stretch, because it's just a basic Blackjack game, but I love Blackjack. I'll probably keep tweaking this for a while until I'm happy with it. Here are my future plans:
- Split button - To be truly like a casino game, there needs to be a way to split the cards if the player draws two cards of the same value.
- Help - I want to be able to put a button up that displays a pop up with the game's current settings (dealer draw to, etc.) as well as basic help text
- ✓ Mobile friendly - I will probably keep tweaking the layout so it is more responsive and looks good on a phone.
- Multiplayer - As I progress through my journey of learning JS/Node I will likely make this multi-player, because it'll be way more fun.
As I've mentioned, this is my first javascript project and it's been years since I've really worked with HTML and CSS heavily so I'm pretty new. If you have helpful comments or additions they will be warmly welcomed.