Complete Intro to Web Development, v3

Project JavaScript: Game Loop, Win, & Lose

Brian Holt

Brian Holt

Snowflake
Complete Intro to Web Development, v3

Check out a free preview of the full Complete Intro to Web Development, v3 course

The "Project JavaScript: Game Loop, Win, & Lose" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through a possible solution for setting win and lose conditions, stopping the event listener when the game is complete, and ignoring inputs until the word of the day has loaded.

Preview
Close

Transcript from the "Project JavaScript: Game Loop, Win, & Lose" Lesson

[00:00:00]
>> Now, let's go ahead and do the win and lose condition. When does someone win, If they get everything right, right? A couple ways you could do this, really easy way, I guess. I hadn't really thought about this, might even be easier. In fact, you might even just do this at the beginning, I don't know why you wouldn't do it just really immediately.

[00:00:26]
You could just say if currentGuess === word, right, then you win. And you return, and you're done. That's actually not how I did it in this. Let's try that, I think it works, alert(you win) So if I say ivory, you win. Or if I say pools here, yeah, so it doesn't say that.

[00:01:09]
Actually probably would do it this way, this is better than what I have in my code, so do it that way, right? Because if the current guess is the correct word, you wouldn't have to validate the word, because obviously it's a word because it's the correct word. All right, I'm good with that, so that's the winning condition.

[00:01:33]
We also have to have some idea of being done, right, because if you're done, you can't keep typing, you can't keep guessing. So let's keep track of some variable up here just called done. const done, at the beginning, you were not done, so you're false up here. And when you win, done is assigned to true, right?

[00:01:56]
I think that makes some sense.
>> You have to make that a let.
>> Yes, thank you, habit, let done = true. And then here, we'll set done to true. We'll go use that in a second, we just have to say down here in our event listener, if we're done, just ignore everything, right?

[00:02:19]
Because once you're done, once you've won or lost, all your key presses become irrelevant. Okay, so there's that. When did they lose? Well, at the end of a guess, and it's been six rounds, then they're done, right? So if currentRow, which is the same thing as what round we're on, right, this is the first round, second round, third round, fourth round, fifth round.

[00:02:59]
So if the currentRow is the same of how many rounds you're going for, so I'm just gonna put rounds here, and then we'll define rounds later, then they're done, right, they've lost. So you can say alert, you lose, the word was, and you can tell them what the word was, okay?

[00:03:21]
Done is also assigned true, and you are finished I guess we probably won't put this above here Okay,, and so how many rounds are there? There are six So let me explain my decision there, we do start on 0, right? The current guess does start on 0. And we are checking here to see if it's six, right?

[00:04:01]
By doing the current row increment here, we can just make it line up nicely that when it hits six, then you're done, right? Otherwise I would have to check if it was rounds minus 1, or I would have to set rounds to 5, and make it 0 based.

[00:04:16]
This just made everything look really nice. And let's just check if that works. So if I say, Rounds is not defined. Rounds, thank you. And then here, I expect that if I hit Enter, it should say you lose, right? You do, the word was ivory. Cool, So now we have our win in these conditions.

[00:04:52]
We still have a problem that now it's gonna be upset, because it's still listening to my key presses, and it's trying to go to the seventh round, and there is no seventh round. So it's being like, I don't know what you're trying to do, because you're still listening to my key presses.

[00:05:08]
So let's go down and put that in our event listener down here, Okay, let's do two things here. The other thing that we should be aware of is, if it's loading, we also shouldn't listen to key presses. So let's do that at the same time. So if they are done, which is either gonna be true or false, if it's true, then don't do anything.

[00:05:35]
Or if it's loading, and I'll show you how to do or as well. I showed you and, right, which is &&. Or is | |, like that. So if it's done, or it's loading, so if either one of these is true, then do nothing, And return. So just to demonstrate a little bit more the conditionals, if you say true and true, both of these have to be true for this to return true.

[00:06:15]
If either one of these is false, then the whole thing is false, right? If you have true or true, as long as one of them is true, it's fine. It's just when both of them are false that it's false. Just logic, right, logic operators So that's what we're doing here.

[00:06:49]
Here, One of them, This one, this && was saying, as long as this is true and this is true, then do this, right, cuz both of those things have to be true. Same thing with here, if you're done, right, or loading, don't do anything when people press keys.

[00:07:14]
So just to demonstrate that here, if I say ivory, And we don't have an is loading somewhere, we have to define that, right? So let's go ahead and do that, let isLoading, Well, we'll set that up here cuz it'll start in a loading position. And then down here, once we set loading to false, then we can say isLoading is assigned to false.

[00:07:45]
So now, someone immediately comes in, guns blazing, and just starts trying to type things, we're gonna ignore them until we have the word. But let's put in here ivory, and we'll get the win condition. And then now, I can't type in it. The one thing why this should go at the end, we wanna mark them all as green, right?

[00:08:08]
We wanna give them the satisfaction of seeing everything lit up in green. So I actually wanna move this to the end. Let's do that. So I'm gonna put down here if, and I'll just make this an else-if This is sad, right? It looks incomplete. Whereas if I do ivory here, now they get this nice green.

[00:08:40]
Now, I broke something. What did I break? Why did we not win? Cuz I messed with currentGuess, I have to move this down all the way here. Right, because I set currentGuess to be empty string, which is not gonna be the same thing as word. Now, if I say ivory, I should get win, it leaves everything in green, and now I can't type I.

[00:09:16]
Guess and check, a lot of coding again is just guess and check

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now