Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course
The "Feed-A-Star-Mole Q&A" 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 fields audience questions about making the game more configurable, how the feed function works, and the process of planning code structure for large projects.
Transcript from the "Feed-A-Star-Mole Q&A" Lesson
[00:00:00]
>> Brian Holt: So,
>> Brian Holt: Any questions?
>> Speaker 2: Can you show us the worm, I guess the JavaScript for the worm stuff?
>> Brian Holt: Yep, really the only thing that affected the worm was this one, line 146 there.
>> Speaker 2: And that is inside of your feed function?
>> Brian Holt: Yep, so if they successfully or are able to click it then you just use the new score that you added to or added two to, and then you just say ten times score.
[00:00:34]
So let's say they're at four, right, 40% of the worm container would be showing.
>> Brian Holt: So who here was able to follow along mostly? Yeah, that's great. Is there any part of this that doesn't make any sense to you?
>> Speaker 3: This, not that this doesn't make sense necessarily, but if we were working on it, we did make it a score of three, then the worm would never show up properly, right?
[00:01:15]
>> Brian Holt: Correct.
>> Speaker 3: If you were saying, all right, I'm giving this to a customer and I want them to be able to adjust the score that they need to get to get 100%, then you'd have to do a little, turn what, I didn't do.
>> Brian Holt: So you're saying max score and let's just assign it to five for argument's sake.
[00:01:33]
This is a great question, right. And then we're gonna make everything based on the math from this, okay. So we would come down here and into feed, so score is greater than or equal to max score, right. And then here ten was just the max amount of things, right, so this would be,
[00:01:59]
>> Brian Holt: So this has to be a function of ten.
>> Speaker 3: Max score times something equals 100%.
>> Brian Holt: Percentage of 10, so it would just be the score divided by max score times 100, right. Am I getting my math in correctly? I can never tell.
>> Brian Holt: So this was 3, right, 3 divided by 5, 3 divided by 5 would be 0.6 times 100.
[00:02:31]
You'd end up with 60%, right. So then you would be able to do that I think
>> Brian Holt: And then the worm would be always the correct size based on max score.
>> Speaker 3: And all you did was create a new constant?
>> Brian Holt: Yep, and then your client can come up here and just say change that number or you can change the number for them and charge them a lot of money for it.
[00:03:02]
>> Speaker 3: Right [LAUGH]
>> Brian Holt: And then the number would always be correct. Let me validate my assumption here because I talk a big game but sometimes it's not true. So that looks roughly right doesn't it?
>> Speaker 3: Yeah, cuz first one was a key and threw me off.
>> Brian Holt: Yep, then you might make it adjustable how many points to each mole's worth or something like that.
[00:03:26]
It probably would make the math easier if you just adjusted how many points each mole was worth, right, and make it out of 100 or something like that. But that's obviously something you can play around with, you can make your own design decisions. Again, this is one way to code this game, there are a myriad of other ways, infinite amount of ways that you can code this, and no one of these is gonna be any better than the other.
[00:03:48]
The best kind of game is the one that's done, [LAUGH] right. So if you finish it, then it's the best one.
>> Brian Holt: Any other questions?
>> Brian Holt: Yeah.
>> Speaker 2: Can you go over the feed function, I'm just a little confused on how it works away, once the mole is fed, how it works away from hungry instead of going to sad.
[00:04:13]
>> Brian Holt: Okay, sure.
>> Brian Holt: So here inside of our getNextStatus, right, this is running roughly every, well this only runs when the mole has a next status, right, so after 500 milliseconds or 100 milliseconds, right. So it comes in here and it says this mole at this given time, what is it status, right, and it goes through one of these statuses.
[00:04:39]
So this is a type loop, again, you can see here that this just runs indefinitely unless, well yeah, it just runs indefinitely through this cycle of statuses. Now if a user correctly clicks on a hungry mole, than it calls this feed function, right. So what we do here is we change the status to fed manually outside of that loop, right.
[00:05:02]
So before everything was happening inside of the next status one, right, but now we're kind of hitting a fork in the road here. We're forcing this to be fed, we're changing its .next, right, so we're kind of modifying it out of cycle.
>> Speaker 2: And that event at the top is saying, but it's saying if you, wait, I'm a little confused about the not cuz the exclamation mark means that-
[00:05:30]
>> Brian Holt: Not, right.
>> Speaker 2: Okay.
>> Brian Holt: So the reason why we do this stuff up here, there's one event listener for this entire page, right. If you scroll down to the bottom here, we're listening for events on background, right. So if I click here, not on any of the moles, it's still firing events that this event listener is catching, right, so I have to weed out all of that stuff.
[00:05:55]
So here I'm checking is this an image and does that image contain hungry? Honestly, since nothing else can possibly have hungry on it, cuz we don't put it anywhere, you really could just get rid of the first part too. And honestly,
>> Brian Holt: This is better, yeah. So you still have to check does this contain hungry, right.
[00:06:19]
If it doesn't contain hungry, then just stop, yeah. Does that follow?
>> Speaker 2: Yeah.
>> Brian Holt: Okay, any other questions on it? Cool.
>> Brian Holt: Other questions?
>> Speaker 2: When you are writing code like this, would you, I feel like we did a lot of jumping in and out of different functions.
[00:06:46]
And okay, now we're adding a new feature, so we're changing something in this function, and this one. And it's not super intuitive to me how to know which function, where to put certain pieces of code. So when you would be writing something like this would you like the entire feed function first and kind of fill in the functions that you know you need, kind like what we did verses like, I guess it doesn't make sense to do it based on features.
[00:07:16]
What's the trade off there?
>> Brian Holt: I think it's gonna vary wildly depending on who you ask. I try and solve a problem at a time, right, and kind of validate assumptions, right. So you can see the first thing I chased after here was making that cycle work correctly, right.
[00:07:37]
That was one of the bigger features to tackle. But honestly I think when I was writing this from scratch, cuz I have the notes here, I know how this all works, I've already thought all the way through this before. I think what I did first time is rather than doing the whole cycle here, I just had to go back and forth from hungry and gone.
[00:07:55]
And I started there with like a really simple thing that I could write this and immediately see results, right. And then I kind of just slowly added more and more steps to this, right. But I try and just solve one problem at a time. So a lot of times I'll do things like this, remember how I just wrote win?
[00:08:13]
It was like, I don't wanna think through what winning means right now, I just want to know that this is where winning happens, right. And sometimes I won't do that, I'll just do you win here, and then I'll just keep going and finishing up the rest of my thought.
[00:08:28]
So I'll leave myself a lot of like to-do's, like this to-do. And then I actually have a tool here that won't let me check and code if it still has to-do's in it cuz that means I didn't finish something. So I do that a lot. And then I just try and keep these functions pretty small.
[00:08:45]
In this one the getNetStatus got pretty long, I'm a little unhappy with how long this is. Next time I might have a function that says make leaving or something like that, and then have them just broken out into smaller and smaller functions. But for now this works. Does that kind of roundabout answer your question?
[00:09:11]
Just try and tackle bite sized pieces at a time. As much as small pieces you can break off at a time. And if it's too big, then break it into two smaller pieces.
>> Brian Holt: But I don't have that much room for stuff in my brain, so the less amount of stuff I can keep in my brain, the less I'm gonna get confused and forget about things and have to regain context and all that kind of stuff.
[00:09:36]
Cuz I feel like half of my time spent as a programmer is staring at my code, trying to get everything in my head so I can think about the problem holistically. So the more I can limit that so that the smaller about it means I can read about it and reason about that code more easily and more quickly.
[00:09:57]
So yeah, I think that's my thought on it.
>> Brian Holt: Cool, well I think my challenges for you here then is to go and complete this game on your own and get it on your profile so you have another thing that you can show people, like check out this thing I built.
[00:10:15]
And yeah, thanks for coming. That's the end of at least the coding part of the boot camp. Congratulations, you made it.
>> [APPLAUSE]
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops