A Blackjack web application written with JavaScript, HTML and CSS. All on-screen graphics were made with HTML elements (mostly divs and buttons).
In Blackjack, players compete against the dealer to attain the highest-valued hand without exceeding 21. Players start with 2 cards and may draw cards from the deck (known as "hit"). The first card in the dealer's hand is revealed to the player, with the cards following it remaining hidden until the end of the player's turn.
Numbered cards are valued according to their number, face cards have the value of 10, and Aces may be valued as 11 or 1 (up to the player).
Once satisfied with their hand, players can choose to "stay", and whoever has the hand with the greater value wins that round. If the dealer's hand exceeds 21, the player wins. If the player's hand (or both the player and dealer's hands) exceed 21, the dealer wins.
For the purposes of keeping Simple Blackjack "simple", there is no splitting or doubling down in this version, and only 1 player may compete against the dealer.
See Wikipedia for an in-depth explanation of Blackjack.
Originally, this was a text-based C++ project* written for a university course. Since I had a bit of spare time between academic semesters, I decided to rewrite the project as a browser-based mini-game for fun.
*You can view the original C++ program I wrote here.
The general structure consists of a 5-setting* state machine which manages cards in two arrays representing both the player's hand and the dealer's hand respectively. The cards in each array are then evaluated and (if new cards are detected) added as HTML elements to the screen. The program allows players to click "HIT" until their hand's value exceeds 21, after which it becomes the dealer's turn to add cards to their own hand. Aces are counted as 11's until the hand's calculated value** exceeds 21, after which they are individually reduced in value to 1.
*There were originally 6 settings [RESET, IDLE, HIT, STAY, GAMEOVER, LEAVE], but I figured out the web app wouldn't need the final state (LEAVE) allowing the original C++ program to exit.
**See the calculateMaxValue() function in blackjack.js.
The original text-based C++ program took roughly 2 hours. This rewrite was mostly done in the last 10 days of 2022, with the mobile site taking the first several days of the next year. Most of my time on the rewrite was spent figuring out how to fix the graphics for mobile browsers :(
Probably not, as this project was intended to be a much smaller side-project to temporarily occupy my time. Anybody is free to fork this repo to build on top of it if they would like to.
- BrainJar - CSS card designs
- W3 Schools - Flipping elements with CSS