This is the final lesson of this section, and this is the point where we usually try to play through
the game just to make sure that everything is working as expected.
So we've got our high, low game and we see that the game is over.
Once we get something wrong, try it again, started again and try it out for yourself.
And it usually takes a few players just to make sure that everything is working as expected.
And in this case, it does seem like everything is working as intended.
So I'm going to do a quick final run through of the code that we're using.
We did apply some styling and these are up to you as well.
You can customize the styling of the card output and really make it.
Styled the way that you need it and you want to present these cards, or you could use a styling that
I used within this course as well.
So going into the index page, we're linking to our style sheets.
So this is just some plain HTML.
We've got a spot for our score.
And the way that the game is scored is the longer of a streak you play, the better of a score.
You get also a message area.
Usually I like to have these message areas so I can output some communication to the player.
Our gameplay area is essentially our game board wherever the all of the gameplay takes place.
This is where the visuals take place of the game.
We have our buttons, so these are our interactions for the players, we've got to start a higher and
a lower button.
Next, we came into our JavaScript, we created JavaScript objects to contain the elements so that we
could really easily connect to the elements of the page of the DOM set up some default variables, some
global values that we used later on within the lessons in order to hold the current cards.
So that's the card that's visually being seen by the player and also the current score that the player
has so that we can increment that and then this one so that we could compare it within our game logic.
We also have a deck.
So this is another global variable where we've got a deck of cards that we produce within our JavaScript.
And in order to produce the deck of cards, we needed some data.
So we needed to get what the cards are going to look like.
How many suits are we going to have, how many ranks we're going to have.
And it's really dynamic.
So if we were to adjust these, the deck of cards that we're building out would adjust as well.
We added event listeners to all of the buttons, so made those buttons interactive.
We also set up a default function here that we could toggle the buttons because we have two different
views for the buttons.
So we have a view where we've got just a start button and then we have a view where we have a higher,
lower button.
So by default, when we start our game, we're adding in the class of hide button.
And what hide button does is it displays none.
So it hides that button.
So we don't see the higher or lower when we come in.
And when we hit start, we run the toggle of the buttons so that toggles and adds in hide button to
the start button, effectively hiding it and then adds remove out the class of hide button to the higher
and lower buttons, effectively showing them.
So this is where we're playing the game and this is where all of the button clicks go.
And we're checking to see what the value of the button click is.
We pick up the entire text of the button and this is what we're going to use within our conditions.
We also draw a card.
So whenever we're playing the game, the gameplay is drawing a card, drawing the next card, drawing
the next card.
We've got a value here that we can utilize if we want to.
Currently, we're just setting a value of win equals draw.
You can remove this or you can set boolean values and utilize this within your script as well.
So for now, what I'm going to do is since I'm tweaking this, I'm going to remove that because we're
not making use of it.
So I'm not going to have that in the code.
So we draw a card.
So we have a card that's visually seen by the player and then we have one that's only currently sitting
within the plate game where we can apply all of our logic.
And if it's the start button that's clicked, we run through some different logic here.
I can get rid of the console messages.
We basically clear out.
So this is the first run-Through of the game.
So we know we need to clear out our gameplay area so we don't have any existing cards.
We need to make a card and we need to toggle the buttons.
So that's running this function, hiding the start button, showing the other buttons.
And when we make a card, we run through this function where we generate what the card is going to look
like that we're outputting.
And this is just essentially drawing the next card that we're going to make use of the including that
in start, because if we were to pull make card out here before our formula for current card wouldn't
work because within a make a card, we're setting whatever the value of the current card is.
So we're setting the value of the current card there in make a card.
So we need to make sure that we run, make a card in this case after we've applied our game logic.
So over here, we're applying some game logic.
We're checking to see if the cards match.
If they do and we're onto this part of the code because here is that we know that they've clicked something
other than the start button.
So we don't have to check what they clicked because whether they clicked higher or lower, it doesn't
matter.
We know that this is the next step and the player is actually actively playing the game.
So we checked to make sure that the cards don't have matching values, otherwise it's a draw and all
we do is make the next card and we automatically assign we automatically move to the next card.
So there's no points assigned to that.
Next, we check to see if the conditions for the player winning are matched and if they are if they
guessed higher for the card and if it is higher or lower for the card and is lower, that means that
they won that round.
They their score increases.
We output the new value of the score and then we output a message to them that it's next.
And if they got it wrong, then we output that it's wrong.
We toggle the start buttons and we still make the card always so the player can actually see what card
was output there.
But they're not going to have a higher, lower choices anymore after the toggle buttons.
So they're not able to continue the game.
We've got the drawing of the card.
So this is one of the functions that we run here.
When we make a new card, we draw the card.
We check to see first if there is a length in the deck.
And if there is, then we're good to draw an index value at random from the deck of cards.
And this is always going to be decreasing because we're using splice to pull a value, an index value
out of that deck array.
And then once we pull that out, the deck shrinks so it will continuously shrink down until it hits
zero.
And then that's where we make a brand new deck of cards and we simply go back and we do a recursion
to draw a card, goes back into this function to draw a card.
So after we make a deck, we know at this point we need to make a deck.
So we make a deck and then we draw another card.
And over here we're making a deck.
So this was a couple of loops that first we ran through the suits, then we went through the ranks.
We built out the cards.
We created them as objects.
So we attached multiple values into those objects so that we could utilize them from our array.
And we're simply pushing it into the deck, which built out our deck of cards and allowed us the ability
to grab that out of the deck at random.
And then lastly, we had our visuals here where we're making a card.
So whenever we call a function, make a card, we've already got it stacked with the right object information
to determine what suit it is, what rank it is and what value it is.
So all of that is contained within the card when we send it over to make card and then make card function
generates a brand new card on the fly, creating the TEMEL container element div adding in classes,
setting up the position of it.
So it's position left determined how many cards are already existing, otherwise they're just going
to stack on top of each other.
You're not going to see the next card in the next card and so on.
And you can see the previous card.
And we're also checking to see the suit because we know that hearts and diamonds are red and if they
are, then we add the class of red.
You can also see this when you inspect the element that this element as we built it out.
So it's got a class, the parent has a class of card, it's red and that makes everything inside red.
Of course, we're creating out the two separate main container areas.
So we've got one where we've got the tiny eight with the hearts and then we've got a big area with the
eight with the hearts.
So it's split up with a line break.
So it's the real difference between the two and we're outputting them both into the card.
And as we build out that div, we append it to that div and then finally we output the div for the player
to be able to see within the gameplay area.
So now it's up to you.
Take what you've learned in the earlier lessons, apply it, extend on it, really make it your own,
have some fun with that experiment and enjoy working with JavaScript.
Thanks again for taking this section and learning how to build out a Halo game using JavaScript.