Transcript from the "Feed-A-Star-Mole Exercise" Lesson
[00:00:03]
>> Brian Holt: So, we've completed the calculator, nice little portfolio piece for you. Kinda of a fun thing to do and hopefully you got a little bit more understanding of what kind of engineering goes into a calculator. That's my entire goal. Just kidding, I don't care. [LAUGH]. So. This is going to be your exercise for today.
[00:00:25]
This is definitely the hardest one I've given you so far and you're probably thinking like, dear God, is that like a vendetta against me or something like that? I do. That's actually what it is. No, but I'm really excited about this. I'm super, super excited about this. We're gonna be making.
[00:00:41]
It's not whack a mole because that's animal abuse. We're going to do feed a mole. Which is so much more pleasant. So we have some artwork for you from I think your last name is Barretton. Alice Barretton. And it's phenomenal and I'm really excited to show you this.
[00:01:03]
So I'm going to show you my version of the game here. And I'm just going to zoom out a little bit. So you have a little bird here and the bird is trying to feed the moles.
>> Brian Holt: It gets a little sad if you don't feed it and then it goes away, but if you feed it then it's got like a happy face and it goes away and it's happy.
[00:01:26]
You can see here's a little guys growing over there, and sometimes you'll see little king ones that come out that are worth double points.
>> Brian Holt: There's the king. And then, you have a happy little star mole at the end, once you fed it all. Come on though, this just has to like warm your heart.
[00:01:48]
It warms my heart. This is what you're going to be building right now. It's probably gonna be tough to build in the day, but I expect you to, like go through and over time be able to finish this project. So here's my advice to you when you're trying to build this game.
[00:02:11]
It's helpful to try and do the HTML and CSS, more of that kind of stuff up front. Then after I have like HTML like the background and a little warm up there and all that kind of stuff I would probably just make them moles show up and disappear.
[00:02:29]
Don't make them clickable, don't do anything like that. Just make them show up and then go back in their hole. So I think something that bears mentioning here. If you inspect element here you can see here that, let's make this a little bigger. These have like a background.
[00:02:52]
They're just black backgrounds. Did Jen show you border radius stuff and how to do border radius and how to make things circles. Cool. So you just can use that same technique here. And then all I'm doing here is I have an image inside of it, that I'm you can see here that it's just changing the source of the image right there.
[00:03:13]
There's a little mole butt
>> [LAUGH]
>> Brian Holt: That was my favorite part. When it's gone then I add like the gone class to it then when it comes and it's hungry then it puts the hungry class on it and does stuff like that and then you can just change the source here as things change, okay?
[00:03:38]
So going back to this.
>> Brian Holt: Okay and then once you kind of have them coming and going, right? Then I want you to be able to like click on one of them and that will add a point, right? And don't worry about making them have the happy face or anything like that.
[00:03:55]
Just make them show up with the hungry face. And if you don't click on them, then just have them disappear. Don't worry about the butts or any of that kind of stuff. After they click ten times, have them win, that's another thing that you could do. Then after that, maybe work on the worm meter, so it fills up over time.
[00:04:11]
At that point you can probably make one in 10 of the moles using math dot random. Okay, if a user doesn't click a mole, then you can show a sad mole and then have them disappear. If someone doesn't feed a mole or if someone feeds a mole then show a fed mole, that's the pie the next step there.
[00:04:32]
And then after both sad and fed moles, you should show a mole button, right? At that point, you should be more or less done with the game.
>> Brian Holt: So feel free to play around with the game and the timings. I'm having, right now, moles show up for two seconds.
[00:04:48]
If you don't click on them, then they go away. But you could try maybe making that three seconds or one second. Maybe it's random, like they only show for maybe one to four seconds using that math.random function. That's up to you.