Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course

The "Changing Mole Status" Lesson is part of the full, Build a Game Project: Feed-A-Star-Mole course featured in this preview video. Here's what you'd learn in this lesson:

Brian codes a function to change the expression status of the moles after an amount of time.

Preview
Close

Transcript from the "Changing Mole Status" Lesson

[00:00:00]
>> Brian Holt: Next thing here is gonna be called function getNextStatus. It's gonna take in a mole.
>> Brian Holt: And we're gonna go codify that kinda state machine that I talked about, that flow. So we're gonna use a switch statement, which we've talked about before, switch.
>> Brian Holt: mole.status.
>> Brian Holt: Let's start with sad.

[00:00:33]
>> Brian Holt: So, if a mole is sad,
>> Brian Holt: The first thing we do is we're gonna update its next status. So, we're gonna say mole.next equals getSadInterval, which we already wrote, right? So this is going to put another SadInterval on top of that. And it's gonna go to, become leaving.

[00:00:54]
So mole.status equals leaving. Now I chose to make the amount of time that it's sad and the amount of time that it's leaving to be the same thing, right? It does 500 milliseconds of both. Or what did I put up here, it's gonna do a second of both.

[00:01:13]
But you could have another function up here called getLeavingInterval, and you could mess with those times individually if you want to. For me, I'm happy to make them the same thing.
>> Speaker 2: And so the reason that we would write mole.next equals getSadInterval again is because now we are asking for a new 1,000 milliseconds after the date, after right now.

[00:01:38]
>> Brian Holt: Right.
>> Speaker 2: Because we already did that in when we defined the moles.
>> Brian Holt: Right, so it has a set interval right here. That's gonna put its timing 1,000 seconds into the future, right? Now when it goes from sad to leaving, it's gonna be leaving for a second, right?

[00:01:53]
So we're gonna get a new Date.now plus 1,000. Make sense?
>> Speaker 2: Yes.
>> Brian Holt: Cool.
>> Speaker 3: So we could have named it getNextInterval if we use it for each of the status?
>> Brian Holt: Yeah, or get sad or leaving interval.
>> Speaker 3: [LAUGH]
>> Brian Holt: That works for me too.
>> Speaker 3: Just for normal English sake.

[00:02:13]
But yeah, got it.
>> Brian Holt: Yep.
>> Brian Holt: Okay, and then we're going to say mole.source, or mole.node.source, right? We're going to change the image of what it looks like, right? And we're going to change that to ./ and what did I call it here, mole-leaving.png. If you remember, each one of them has their node on here, which is like the DOM element that actually represents the image, right.

[00:02:46]
>> Speaker 3: Have we written the code yet for changing the image? Or how is that connected? How does it know which image it's going to next? Just by the status changing?
>> Brian Holt: Mm-hm, so.
>> Speaker 3: Because that's connected to a specific image?
>> Brian Holt: So if it's sad, it's gonna have a sad image like this one, right?

[00:03:11]
The next image you're going to show there 100% of the time after sad is going to be leaving.
>> Speaker 3: Just cuz that's in the [INAUDIBLE].
>> Brian Holt: We've constrained our problem to be like that.
>> Speaker 2: Can you scroll down a tiny bit again to the run again function?
>> Brian Holt: Okay, and then after that, we're gonna break.

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