Check out a free preview of the full Complete Front-End Project: Build a Game course

The "Refactoring" Lesson is part of the full, Complete Front-End Project: Build a Game course featured in this preview video. Here's what you'd learn in this lesson:

Brian refactors the gameState.js file by adding logic statements to various states, and adds the different timers for the fox to switch from one state to the next: from awake tu hungry.

Preview
Close

Transcript from the "Refactoring" Lesson

[00:00:00]
>> And then we just really quickly need to go into our constants.js, we need to put one more function in here which is export const.Get next. Poop time equals clock. And then we're going to return math.floor math.random times and what do I put here, times three plus four plus clock.

[00:00:34]
Okay, so let's, poop time. I did zero two seconds plus four seconds. That's how long it takes before feet after feeds before poops. Let me go back to gameState just really quick and import, get next poop time, get next poop time. And let's go ahead and, see that happen.

[00:01:00]
I'm gonna change the tick rate to one second just to make the game go a little faster. It means the animations will be kinda cut off, but that should be fine. We just wanna make sure that everything works. Okay, so the fox should get hungry and then you feed it.

[00:01:19]
And there you go. Now it's fed. And then we've kind of stalled out there because we haven't implemented time to start celebrating yet. So yeah, last thing here, let's go ahead and implement really quick time to start and end celebrating. Change that back to 3000 to slow down the game a bit.

[00:01:47]
And we are gonna put in two more times here, timeToStartCelebrating negative one, and timeToEndCelebrating. Okay, start celebrating And do it here underneath maybe die, startCelebrating. And this is gonna be this.current = CELEBRATING, modFox celebrate This.timeToStartCelebrating equals negative one, cuz it's already started celebrating. And it's gonna say this.timeToEndCelebrating is going to be equal to this.clock and I again gave it two but you can mess around with that.

[00:02:49]
Okay, and then endCelebrating. It's gonna be another function. And here we're gonna put this.timeToEndCelebrating equals negative one. And we're gonna say this.current, it's gonna go from celebrating to idling, Idling and then we have to write a quick function really quick called determine Fox state. So we're gonna say this.determine fox state.

[00:03:34]
Now the reason why we're doing this, if you're coming out of celebrating, if it's raining you have to go back to looking away from the camera. If it's idling, and it's daytime then it looks normally at the camera. So that's what determined Fox state is gonna do for us.

[00:03:51]
And we're gonna say, if this.current triple equals idling, which it always should, if we call this function. Then we're gonna check the scene and sort of say if scenes This start scene triple equals rain, then MOD fox rain else MOD fox idling. Now, what's great about this is we can actually go back to wake as well.

[00:04:39]
And we can remove the modFox idling here and underneath the modScene here, we can just put it the last thing is even. We can just put this.determine fox state and we can reuse that same Bit of logic that we wrote. So now when the day wakes up and it's raining, the fox will be appropriately facing away or facing the camera.

[00:05:05]
Okay, so now the fox should be able to be fed and it should celebrate. So you can see now the fox is appropriately facing away. We'll wait just a bit of time and then the fox will want to eat. Maybe, at some point, it might. Then we can feed it.

[00:05:37]
So the fox is fed, is sitting there fat and happy. You know the one part we didn't do? We didn't do the tick part. So, good reminder to go do that really quick. So hop back into VS code really quick and we need to do right here. So else if this.clock, triple equals this.time to start celebrating, this.start celebrating.

[00:06:12]
Else if this.clock triple equals time this.start time to end celebrating, then you're gonna call this.end celebrating. All right, one more time. And actually we can well, we're in a now So the fox should begin idling. Notice the fox is appropriately facing the camera because it's day. It should begin getting hungry anytime.

[00:06:59]
Okay, it's hungry, so we'll feed the fox. And then it's celebrating, very happy that you fed it. And then it's back to idling. So that's kind of completed that loop there. And now the fox has a poop time, but we haven't acted on that poop time yet. Which is what the next section the act of cleaning poop section will be about.

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