Transcript from the "Planning Mole Statuses" Lesson
[00:00:00]
>> Brian Holt: Let's talk about the status thing here for a second.
>> Brian Holt: This game has a very, very predictable flow, right? You have a mole that is gone. Then at some point, a mole is going to show up and be hungry. And then, the mole is going to be sad after it's not fed.
[00:00:17]
And then, it goes back to gone. And it's just a big circle, right? It predictably does the same thing every single time. The only variance in there is how long those things take, right? But 100% of the time, if the game is just left to run on its own device, it just goes from gone to hungry to sad to gone.
[00:00:39]
>> Brian Holt: Well, leaving, right? There's also like the mole part as well, right? So it's gone to hungry to sad to leaving to gone. And then it just infinitely repeats that loop. Now, there's one fork in logic is what happens if the user clicks on the mole, right? Then it goes from hungry to fed to leaving to gone.
[00:01:02]
And then it goes back to the other cycle of going, right? And let's just talk about, so this is hungry right here, right? That's hungry. That's sad, right there. That's leaving. And then, gone is an empty hole, right? So that's what this status thing here is for, it's for us to keep track.
[00:01:25]
Because this is predictable, I can say if the sad interval comes up, right, so if that two seconds pass, I know that if status is sad, I know the next status is going to be leaving, right? And then, it's gonna get a new interval for when the next is.
[00:01:43]
And then, after the leaving interval is up, then it's gonna go to gone, right? So that's how we're using the status and next things together, right? Because this game, like I said, there's no variance. It's very, very predictable. So that's what status is going to mean for us.
[00:02:00]
We're gonna ignore king for now. We'll work on that later cuz that's kind of like secondary. We're kind of going for the minimum viable product right now.
>> Brian Holt: So that's one, that's two.
>> Brian Holt: That's three.
>> Brian Holt: Well, let's make sure that these are actually getting called.
>> Brian Holt: Four.
[00:02:39]
>> Brian Holt: Five.
>> Brian Holt: I can type. Thank you. That would have been a fun bug to find.
>> Brian Holt: Seven.
>> Brian Holt: Eight.
>> Brian Holt: Nine. So now, I have a list of all of these various moles.
>> Brian Holt: And I probably should go through
>> Brian Holt: Well, whatever, this is fine for now.
[00:03:18]
>> Brian Holt: But I have a generic representation of all these different moles, right? I have how long they should stay sad. And then later, I'm going to convert them to be gone.
>> Brian Holt: Okay, so
>> Brian Holt: Let's start going over time, right? If you remember previously, we talked about setInterval and requestAnimationFrame, right?
[00:03:56]
So let's just have a brief recap about that.
>> Brian Holt: That's a cute dog.
>> Brian Holt: So let's do Front End Masters [INAUDIBLE] Boot Camp. Going back to the game here, the Feed-A-Star-Mole.
>> Brian Holt: So this mole's going back and forth between happy and sad, right? And let's take a look at how it's doing that.
[00:04:27]
>> Brian Holt: Or do I have request animation frame up here? This is the one I want to look at. Okay, so we have setInterval right here, and requestAnimationFrame. You can choose which one of these that you wanna do for your game. I would say that the superior approach, in my opinion, is gonna be with requestAnimationFrame.
[00:04:43]
I'm going to say that the simpler solution is with setInterval.
>> Brian Holt: So I leave that to your judgment of which one that you actually wanna do. Together, we're gonna do requestAnimationFrame, okay? So setInterval right here. This is a function that allows you to run the same function every x amount of milliseconds.
[00:05:04]
So in this case right here, every 1,000 milliseconds, every one second, right? We're doing interval count plus plus, and then we're setting the value of that right here, right?
>> Brian Holt: Here, with requestAnimationFrame, basically what we're doing is we're saying
>> Brian Holt: Right here, next time the browser is idle, run this function.
[00:05:35]
>> Brian Holt: Then, what I'm doing here, is I'm saying if it hasn't been a second, then don't do anything. If it's been a second, then go ahead and do it again. Cuz you can see here, run again at, I'm saying date plus now plus 1,000, right? So I'm saying 1,000 milliseconds in the future, then run this again.
[00:05:52]
If I don't do this check,
>> Brian Holt: Let's just put that here.
>> Brian Holt: Console.
>> Brian Holt: Now, you can see, if I don't put that check there, this runs actually quite frequently. I think I showed this to you before, right?
>> Brian Holt: So that's why you do this check because you wanna say if it hasn't been 1,000 milliseconds, then don't run this function again.