Making a Simple Blackjack Game With HTML and JavaScript
When I first started learning JavaScript, I was nervous about learning another coding language. Up to that point, I only felt comfortable doing some basic HTML and CSS. I did make it about halfway through a C++ class during my freshman year of college which honestly caused me to re-think my life choices. I ended up dropping the class. Needless to say, I realized I did not want to major in Computer Science.
It took me a while before I got the nerve to try another coding class but when I did I was pleasantly surprised. JavaScript really isn’t that bad, not compared to C++ at least. A lot of the basics, at least the few that I remembered from that class, actually carried over. JavaScript seemed like the language I should have started with.
By the end of that semester, I was able to build some pretty cool things and felt pretty comfortable making them. Now my projects definitely didn’t look pretty as we only used HTML and JavaScript with no styling, but they were functional and fun to make. For the last project of that semester, I was able to make a full-on Blackjack game. Detailed below are the steps I took to make my simple blackjack game.
You can play it here. Here is my GitHub repo.
My project is made up of basic ES5 syntax and no jQuery. Here are the steps for re-creating the project:
Create four global variables
The first variable is for keeping track of the number of cards that have been pulled out of the deck. We will talk about the deck later. I called this first variable numCardsPulled and initialized it to zero.
The next two variable are actually objects. One for the “player” and one for the “dealer”. Both objects hold that entities cards and score. The player object also keeps track of how much money the player has.
The last global variable is also an object that holds two functions. The two functions in this deck are for initializing the “deck of cards” and for shuffling the deck. After initializing those two functions, they do need to be called when the player loads the page so you can just call them right in the script.
Make Eight Functions
The code in my example is made up of eight different functions that all have a specific purpose. I won’t walk you through every detail about each function but I will explain what they each do.
The first function is for interpreting the value of both the player and the dealer’s cards. Basically it checks the sum of all the cards in your hand and decides, if you have an Ace, if it should be worth 1 or 11 points.
The next function has to do with the betting. It determines if the player should gain or lose money based on the end result of the game. It then either adds or subtracts the bet amount to the player’s money.
The third function is called at the end of every game and simply resets all of the aspects of the game except for the player’s money.
The next function is the largest one in the project. It contains a series of if statements to check who won the game/ if the game should be over. In my example, I made it so that the dealer won’t bet anymore if it’s score is greater than or equal to 17.
Function five runs the code for when the dealer draws a card.
Function six is called when the player clicks the new game button. It resets all the buttons and draws cards for both the player and the dealer.
The seventh function is almost identical to function five except it runs when the player presses the hit button and simulates drawing a card for the player.
The last function is the most simple of all the functions and is called when the player hits the stand button. Is just draws a card for the dealer without drawing one for the player.
At the end of every function that is called by a button, the end game function, or function 4, is run to check if the game should end.
That’s it! Those are all of the pieces you need to build a simple JavaScript Black-Jack game. Just eight different functions and 4 global variables.
Want to add a nicely-styled front-end? Go for it!
