Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course
The "Feed-A-Mole JavaScript" 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 begins writing the JavaScript for the game.
Transcript from the "Feed-A-Mole JavaScript" Lesson
[00:00:02]
>> Brian Holt: Let's go do the JavaScripts. I'm gonna link to a script down here at the bottom. I'm gonna call this game dot js or something like that. You can call it whatever you like.
>> Brian Holt: I'm gonna say new file, call it game dot js.
>> Brian Holt: And now, we can start working on the JavaScript.
[00:00:26]
I think the first thing I'm gonna do is I'm gonna create an object that represents each one of these moles. So I'm gonna say const moles equals an array. And I'm gonna have a bunch of objects for each mole in the array.
>> Brian Holt: So I'm gonna say the status of each one of these.
[00:00:45]
>> Brian Holt: And I'm gonna start them out with, let's say you can have them start out as hungry or gone or something like that. I'm gonna have some start out as sad.
>> Brian Holt: Which is like they had just missed eating a worm.
>> Brian Holt: Okay, the next time that they're gonna come out
[00:01:06]
>> Brian Holt: Or rather actually, the next time that their status is going to change.
>> Brian Holt: So I'm gonna say something that's gonna be like date now plus 2,000, right? So they're gonna be sad for two seconds. Let's actually make it just one second.
>> Brian Holt: If they're gonna be a king mole or not.
[00:01:25]
So I'm gonna have that be false.
>> Brian Holt: And then, I'm gonna have the node that represents each one of these, right?
>> Brian Holt: So I'm gonna have this be node.
>> Brian Holt: Document get element by ID whole dash zero.
>> Brian Holt: Or if you wanted to, you could totally have the speed document dot query selector.
[00:01:51]
Pound whole dash zero. Just write that one, cuz I'm so used to writing it for so long.
>> Brian Holt: Either or.
>> Brian Holt: Okay?
>> Speaker 2: So is this starting off by saying this,
>> Speaker 2: This object represents just the first mole? And then, you are gonna need to make nine more?
[00:02:19]
>> Brian Holt: Yeah.
>> Speaker 2: Okay.
>> Brian Holt: So I think this is kind of the easiest way for me personally. There's, again, there's 10,000 ways to write this. And you give even very similar developers, or even asked me on a different day and I would have written this a different way, right?
[00:02:34]
So this is just the way that I'm choosing to do it. Other people would have written this totally differently. To me, it makes sense to have an object with all the metadata about each mole in some sort of array here.
>> Brian Holt: So if you have some different way that you think you can solve this better or differently or something that makes more sense, then by all means you should definitely do that.
[00:02:59]
So here, I'm just gonna copy and paste this a bunch of times. So this is gonna be hole one.
>> Brian Holt: And actually, it'd be better if I could have some sort of function that generated times for me. So I'm gonna actually abstract that out into a function, which I'm gonna call something like function get sad interval.
[00:03:22]
>> Brian Holt: And that's gonna return to the date now plus some sort of timing right? So how long do you want moles to be sad? I think in my game here that I wrote, I think the sad interval was 500. So they're sad for half a second before they disappear.
[00:03:39]
Let's just go with a full second for now.
>> Brian Holt: So rather than saying date plus now plus 1,000, so I'm not just doing this everywhere, I'm gonna say get a sad interval. Get sad interval. And now, I have this reusable function. So if later, I wanna mess with these timings, I don't have to go change it in 12 places.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops