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

The "Building a New Action" 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 adds a new functionality to the code of the fox pet game by reusing functions that are already available to allow the pet to do more, and adding another layer of difficulty to the game.


Transcript from the "Building a New Action" Lesson

>> And we have reached the Transitioning States Milestone. So if you are following along and you can head to the Transitioning States Milestone the code should be in that state at the moment. So we're gonna move on to my personal favorite section which as I've been talking to in alluding to it is the pooping section.

So if you head back to Project Fox Game here we are down here at Pooping, Okay? So after a fox eats it needs to poop. I think that's just laws of nature. So let's go ahead and make it so that our fox, our Foxy friend can relieve himself.

So the next thing we wanna do is we wanna track pooped time that's underneath dieTime here, so ahead and throw out a poopTime. Make that -1. Okay, we're gonna add a else if here, else if (this.clock === this.poopTime). This.poop is what we're gonna do. Okay, and then somewhere in here at a function called poop.

And let's say this.current = "POOPING". This.poopTime, = -1 cuz after it poops it doesn't need to poop anymore. This.dieTime cuz you can die of poop, that's the thing I'm told, = getNextDieTime (this.clock), And you're gonna modFox to ("pooping"). Okay. So pretty straightforward, I think that should be enough for us to go ahead and see our fox poop.

Just go ahead and just close that up a little bit. And, Fox should go ahead and eat pretty quickly. And once it's hungry then we'll go ahead and feed him. Okay, feed the fox. Then it should celebrate. Very happy that we fed it. And then we'll have to switch over to the poop here in the middle.

And after a certain amount of time it should go ahead and begin to poop. So there we go. And now our Foxy friend has pooped. This is actually the real game, so this is actually what I'm about to program which is the cleaning up part. Let's go ahead and clean that up and then here we go.

Okay, [INAUDIBLE] that should work as we expect it to. So what we wanna do is we're gonna go modify our cleanupPoop action here so the user can clean up the poop. So we're gonna say if (this.current === 'POOPING'), Then we're gonna say, well, if it's not equal to 'POOPING' then we're gonna say return otherwise we're gonna say this.dieTime, = -1.

We're gonna togglePoopBag to (true) cuz you want to turn it on, right, so it shakes. And the fox just celebrates when the poop is being cleaned up, so we can actually just directly call startCelebrating. Which is great we don't have to like set a time or anything like that, we don't have to program anything new we can just reuse that same functionality which will also automatically set the end time, so we don't have to worry about that either.

Then we can say this.hungryTime, which is the next part of the cycle here, = getNextHungryTime or HungerTime rather with (this.clock), Okay, and the cool thing is, is that's really about it for cleaning up the poop. We're just kind of reusing a lot of the functionality that we already had.

The last thing that we need to do is we need to go to the end celebrate. Because when the fox is celebrating from the poop cleanup there will be like the bag that shuts, starts shaking is like okay, cool, we clean up the poop we need to remove that upon EndCelebration.

So we can actually just say, togglePoopBag(false). Now, when the fox eats it also celebrates, and we don't need to hide the poop bag, but no matter what if we just say always hide the poop bag it doesn't matter if it's eating or pooping because the bag will just get hidden, right?

So we can just always say no matter what if it's showing or not showing just make sure it's not showing which is what we're doing there on line 90 right there. Okay, again now this should all work. And that really should be it for pooping. The nice thing is we were able to largely piggyback on other functionality that we already had running which is great.

So let's make sure that all that works, Before we move on to our last section of coding. So feed the fox. It's very happy that we fed it. It's like it taunts me with its swinging arms. So this.poop, = poopTime, returns -1. ModFox ("pooping") this.dieTime, okay. And getHungry we do that once we feed it that's when we set up the, getNextPoopTime(this.clock).

getNextPoopTime that's coming from */constants'. So mysteriously it is not pooping. Probably should figure that out. So let's go ahead and do this let's change the TICK_RATE to something real fast, so half second ticks. And then what we're gonna do is we're gonna log out every tick. And we're gonna log out this.

Looks like it worked just fine. Okay, I don't know what's going on there. But you can see there all this stuff is working now. Must've just not refreshed the page. Up, and then it got to sleep. Okay, so that should all be working. Let's change our tick time back to 3000 cuz that's really hard to keep track of.

All right, so, Let's go ahead and go on to there's one thing that we haven't actually implemented which the change weather, so let's just go ahead and do that really quick. So when you go to change the weather, cuz that's this last button here, it should really just flip between raining and not raining.

It should be pretty quick and simple. So we're gonna go down to our changeWeather, And we're gonna say if (this., Let's see if (SCENES), What's the best way to do this? Let's go ahead and do it this way. This.scene = this.scene + 1 modulo SCENES.length. And again, We could just do modulo 2 because that's how many scenes we have right now but if we add one later we would want this to work like this.

And then we're just gonna say modScene, With (SCENES (this.scene). So again, now that should work except it has one particular problem that we will have to fix here in just a second. So notice that the fox is not in the right state now when we change the weather.

So we have to do this.determine, FoxState. That'll help with that. Okay, so now that's correct. But now we have a different problem, That if the fox is hungry that I don't think it'll work. Let me check cleanupState or sorry, determinFoxState. Actually this will work just fine, so it'll only flip it if the fox is in idling.

So we are actually, we're already really smart about doing that. So now we can still change this and the fox is still hungry. Okay, so that was a changeWeather. Again, we were able to mostly leverage all the things that we'd already written we just had to flip the weather and everything just worked which is great.

So now we're gonna move on to the last section which is death.

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