On making it through to the end and successfully making it through on this journey of creating this
blackjack game from scratch or using JavaScript in this lesson, we're going to just do a final code
review of what we've presented in the earlier lessons as a quick overview of what we're doing and why
we're doing it.
So first, we started out by setting up the H.T. Amelle and we kept the each TIMAL code to the minimal
as, of course, right.
To focus on JavaScript because this is a JavaScript course.
So we linked out to a script file.
So script G.S. and this is where all of our JavaScript was going.
And we also on page, we created a script tag and we set that at an event listener that was listening
for the DOM content to load.
And once the DOM content loads, then we initiated that app.
I an I.T. function which is contained within app.
And the reason that we separated it out as a separate app object is that this separates out the code
and avoids any overlap of any of the functions and names that we might be using within the code and
allows us to have a self-contained application.
That's really easy to bring in to other Web pages as needed.
So the core of the functionality was all contained within app.
And we started out by running the iron I.T..
And this was invoked every time app was invoked, were returning iron I.T. within the Iron I.T. and
we were having a self invoking function.
So going back up to the top, we set some default variables.
So these were used throughout the gameplay and to store values and main object was game.
This is where we held all of the information that was contained within the game that was updating.
And as well as the elements within the page.
So we could easily access them as a global object and update them, manipulate them as needed.
So we had access to everything.
We setup the suits, the ranks and the suit.
Names were corresponding with the each here Mel code for the various suits.
So we could display spades, hearts, clubs, diamonds as each Timal caught.
And then within the ranks, all of the different card ranks.
And as we saw, when we're doing testing, we can set whatever ranks we want.
We can even set whatever suits we want, because all of this is dynamic.
We have a score.
So we have two different players who have the dealer and the player.
And we're keeping score for each one of them.
And we also added in the ability to have cash and betting.
So the starting cash value, the starting bet value.
We built the game board.
So this was all done dynamically.
And I know this was quite a bit of building with JavaScript, but it's important to understand that
practicing building elements with JavaScript is a crucial part to interacting with the DOM and understanding
how that all the DOM objects work.
So working with each team l might have been easier, but JavaScript, home construction or JavaScript
was far more valuable in understanding how JavaScript works.
So constructing the whole gameboard with JavaScript.
We had a couple functions here that turn different buttons on and off so that enable and disable the
buttons.
Then we built the card deck and the card deck was kind of the core of what we were doing, where we
needed a deck of cards that we could deal out and we'd take the top card off the deck and the building
of the deck.
So we set a default deck, a race.
We cleared out any existing cards that might exist already in the game deck array.
And then we loop through the suits and within the suits loop.
We looked through the ranks and that's how we built out the cards.
And then ultimately we shuffled the cards so that we'd have randomized order of the cards in the deck.
We chose to use the array Sorte method in order to randomize the contents of their array.
And that's where we've got this shuffle function that can be used elsewhere as well.
It's a great way to shuffle the card content.
So now we've got a deck, it's shuffled and we can deal it out to the player.
So we need to setup the ability for the player to interact with the content.
As for the add clicker came in this enabled event, listeners added to the buttons and then the player
comes in.
They see a bunch of buttons and they know what they can interact with.
And this creates the game flow.
So there's always a next domino to fall or next step that the player can take within the game process.
And this is really important.
Doesn't matter what type of game you're building.
You always need to have the players ability to move through the game effectively.
And that's where we've got the different event listeners turning them on and off and enabling the player
to make the selections as they play through the game.
Also updating the scoreboard.
And then lastly, updating the cash, and this allowed us to introduce cash and betting.
So all of these functions were focused on the betting.
So we're updating the cash value taking from the input value and setting up the bet.
And then we had a running in the background, a game cash value that contained the value of the cash.
We also have the option to lock the wager.
So once the wager was placed or once the game was in play, we don't want the ability to update any
of the bets.
So once you make your bet and you launch the game, then that's it.
You're stuck with whatever bet you've made updating of the scoreboard.
So all of this stuff as much as possible within functions.
So for reusability.
So at any point, if we want to call it any of these functions and run the code within them, we can
do that.
So one of the main functions was dealing.
So this was the first function that the dealer is presented with so they can deal.
So clears out the dealer's hand.
The players hand.
And these are just arrays that we're using to store the contents that are contained within the hand,
updating what's visual for the player.
We've got game start.
We didn't really make use of this, but it's always good to have the ability to turn games on and off.
So I've included it, but we weren't really making use of it.
Updating the H.T. Amelle and then dealing out the cards.
So taking card off the top of the deck.
So you've got a function that handles that.
So take card.
And this is where the game dealer hand.
So this is where it's going to end up.
And also where that each Timal element.
And then we've got the boolean values of true and false.
If we want to show or hide the card.
So as typically with blackjack, we want to hide the first card from the dealer.
And then there was also the update count, which was updating and making some calculations in the background,
making sure that we've got the right game flow so that the player can either hit or stand depending
on what the value of their cards are.
And then if they've gone overboard, then we find the winner.
And there's also the dealer.
So the dealer, what they're playing to.
And also checking to see if the dealer has a blackjack right off the bat.
We also have a function here to do some calculations.
So the score ace was specifically to handle the ace values that can be either one or 11.
So looping through and counting how many aces we have subtracting those.
And if it's over 21, that we continue the loop.
And we continue to stopped, subtract 10.
And if we can't do that anymore and if we've got too many aces and we're still over, then this is going
to be a failure and we're just simply return back the value.
But if we can subtract the tens off of the aces, then we're going to do that until we're under 21.
The score was where we're a crucial part to making calculations of the values for each player's hand.
So the dealer's hand, the player's hand and checking to see if they're over 21.
And if they are, then we're ending the game, counting the aces, counting the totals, and then simply
returning the both the total within a numeric format.
We also added in an end game function.
So this would turn off the ability to hit and stand and we just enabled disable those buttons.
The take card, this is the one where we're taking the card off the top of the deck.
So we're checking to see if the deck length is equal to zero and if it is that we run build deck again.
And what that does is that rebuilds a brand new deck so that we can continue to keep playing the game.
And we're never going to run out of cards and we're going to recycle and rebuild new decks as needed.
We're taking the game cards, using the array shift method, and that's placing it within temp.
And then we're adding it into the hand.
The hand is whatever hand was sent in, whatever object was holding the cards so we could have it either
to the dealer or the player.
And this is the element that it's putting the card on.
And we're passing that into show card, which takes the card value.
And then as well as the element that it needs to add to add updates and creates the content that's being
displayed within the element.
So that's where we get those nice visuals.
We're also checking to see if H is true or false.
And if it's true, then we're going to hide.
We're gonna overlap the card with Card B, which is just a blue background representing the background
of the card so that we have the option to hide cards if needed.
And then these were just useful functions where we could turn on and off different buttons so we could
disable and enable as needed.
And then these functions here represented the ability for the player to either.
To stand or to take a next card.
Running the appropriate functions.
We also have the ability to add the all the listeners within the add clicker function, updating the
scoreboard and then going back into the wagering.
So putting it all together, we have a fully functional game.
And I do encourage you to try this game out for yourself and make any adjustments that you feel are
necessary improvements as well as share within the Q&A section.
If you only questions or comments.
I'm always happy to help.
I'm always happy to hear from you.
Thanks again for taking the course.