Welcome back.
In this lesson, we are going to be wrapping up our game play, we're going to need to apply some logic.
So we saw in the last lesson, we were drawing out a visual card and we still have the buttons higher
and lower and they don't actually do anything quite yet.
So that's what we need to take care of in this lesson, make these buttons functional and we already
have a function for that that's being rendered out and it's being invoked whenever we're clicking the
buttons.
So we're checking to see for a start button.
And we also need to check to see what other buttons can be pressed here.
And we know that once one of these buttons has been clicked, that means that it's being triggered and
it's rendered out.
So I'm adding in a return in this particular condition so that we break out of that function.
And next, we know that it's one of the higher or lower that the player is playing through.
So we're taking whatever the value of the current my card is.
Remember, over here we're drawing a brand new card.
So this is the current card.
And we also have a value of the existing card that's on display here.
So the my card is the one that hasn't been shown to the player yet.
And this is the one that we're going to be calculating out.
We have a value.
We have an object there that's sitting there.
And if we want to, we could actually take a look at that in the console.
So let's see what that looks like in the console, see what my card looks like.
And when we refresh it, we click start, we hit higher.
We get our next card.
So this is the next card.
That's there is diamonds, four of diamonds.
The next card is a nine of hearts and so on.
So we need to display these.
And we also need to make some calculations to check to see if the current value of this card is higher
or lower.
And we need to take some type of action.
And one of the things that we can need to account for is to see if it's actually a draw.
So checking to see if both of those values are the same.
So taking my card value, because remember, this is an object so we can access that value there.
We're going to check to see if it's equivalent to the current card value and if it is and I don't actually
need two brackets there, so I'm going to get rid of that.
And if it is, then we're going to run this block of code and I'm going to set up one more variable
here to run as our default variable, and I'll set that as a boolean.
So this will be whether the player won or not.
And if it's false, then our message for the win can be draw.
So maybe it doesn't have to be a boolean.
I just going to set it up as a value that we can hold.
So the win value is a draw and we'll put a message to the player that the inner HTML that it's a draw.
So that means that if both cards have the same value, it's a draw.
We don't need to do anything else.
If it's not a draw, then this is where we need to check to see who won.
So somebody won here.
If it's not a draw, we can take our another condition and take the value of the card.
So if the value of temp, so the button clicked is equal to higher and that's uppercase.
So remember, this is case sensitive, so make sure that it is upper case and the value of my card.
So it's going to get kind of long.
I'll open it up bigger.
So got a little bit more real estate to play with, so the card value, so this is the same value here
of the new upcoming card.
So remember, this is the one that the player can't currently see and the current card value is the
one that the player can see.
So we're checking to see if this is greater than that value.
Then we know that we have a win.
We also have another win condition, and that's if temp.
Is equal to lower.
And.
And then this is our other condition, and we're just checking to see if it's matching, so the value
here is less than the current card value.
And that also means that the player is a winner.
So we can close off that condition.
And we've got the other condition over here.
So I'm going to just wrap that one.
And if this is all true, then the player is a winner, so set went to equal truth, so turn that into
a boolean value.
And with JavaScript, there's dynamic data types, so even though over here we've got a string value
here, we've got a boolean value and JavaScript can adjust with that.
So now we've got a win of true otherwise and over here, I'm going to set it to false by default.
So if it's not as if it's not a draw.
And if it is a win, then we can act on those conditions, so that means that the win here is a true
win is true.
We're going to score value incremented by one, take our score output and update the inner HTML to be
whatever the score value is.
So we're updating it visually for the user.
And we also want to output to the player that message and enter HTML of that message area is and the
next one, whatever the value of the next one is.
And if the player didn't win, that means that they lost.
So the message of the inner HTML and it's game over, there's only one chance here and if they got it
wrong then it's game over and we can initiate that toggle buttons function that's going to toggle that
start button again so the player can start playing one more time.
And one more thing we need to do.
We need to make the card so that, again, it's visible to the player because remember, while it's
sitting in here and while we're using it within these conditions, we have no idea what the card looks
like.
But whether it's a draw, whether it's a win, whether it's a loss, you need to show the card to the
player so that they know what happened.
So let's try that out.
Let's make it bigger and we'll refresh it and start the game.
So we've got a king of hearts.
What do you think?
Higher or lower?
Let's try lower.
I think the odds are in our favor in this one.
So next is a three of clubs.
We're putting it there and we're on a streak of one.
What do you think?
Higher or lower?
Let's go higher.
Seven of spades.
Let's go higher again.
King of diamonds.
Let's go lower.
Two of clubs, higher.
Eight of spades.
Higher again.
Queen of hearts, four of spades.
Ace lower, lower.
And that one was a draw.
And then the Jack and three and icsom doing extremely well on this game.
So you can see that we are, it is working properly and as soon as I get one wrong there, I see I've
got my streak of sixteen and once I got the wrong guess then the game was over.
So that was exceptionally lucky game, but it seemed to play very well and now it's up to you to try
it out, experiment with it.
And I'm going to do a quick overview of the code in the upcoming lesson.
And this is the part where you need to play through the game just to make sure that there are no additional
bugs and everything is working as expected.
So I always suggest that you play through it several times and make sure that the game is working as
expected.
So go ahead and add in these final steps for the logic of the game to determine whether the player's
winning or losing and accounting for the next steps for the player.