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

The "Timing Implementation" 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 displays an implementation of the requestAnimationFrame method that changes the mole image and offers suggestions for the exercise.

Preview
Close

Transcript from the "Timing Implementation" Lesson

[00:00:00]
>> Brian Holt: So one more thing just to show I chose to implement our moles. So you can see here I have the happy face and the sad face just looping back and forth to each other. And the way that I did that is let nextTime equals Date.now, this is the same thing that basically is above.

[00:00:23]
And you're just saying if he's hungry then change him to sad, and if he's sad change him to hungry and then you just flipping that back and forth. We talked about the exclamation point, that just means if it's true that's false and if it's false becomes true. It's the opposite of whatever it is.

[00:00:43]
So this is just flipping his hungry back and forth every single time and then it's just doing that every one second. Yeah, notice that we grabbed the mole here, so get document.getElementbyID mole, which is this one here, ID mole.
>> Brian Holt: And then, at that point, it's just changing mole.source, which is how you change the image on something.

[00:01:13]
>> Brian Holt: So you are going to need to grab all the assets. Last piece of advice on the game here. My best advice for you is I would make the section or the div or whatever you wanna do for the background, just make it a fix with I have it fixed to 1,920 pixels by 1,080 pixels.

[00:01:47]
And that way you can kind of depend on everything being in the same height and width and all that kinda stuff. I used Flex, that's why everything's kinda centered around the middle. That helps as well. If you wanna get the cursor, so you see down here at the bottom, cursor, if you just give it a URL like that you can load an image as your cursor.

[00:02:14]
So that's how I got the little bird to be my cursor. And then Jen showed you how to do hover state? So if something hovers over something, you can change the cursor to be something else, which is how it changes to be the bird with the worm in there.

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