Transcript from the "Worm Score Meter" Lesson
[00:00:00]
>> Brian Holt: Cool, so now we have kings, and that whole system is working as well. We are almost done. We have one more thing to do, which is we have a little score meter that we wanna add to our game.
>> Brian Holt: So let's go add our little worm container, Let me grab that from the HTML, what that looks like.
[00:00:24]
So index.
>> Brian Holt: And the first thing before the first container, I'm gonna add something, a little bit of HTML. And this is gonna be the div class = worm-box.
>> Brian Holt: Okay, inside of that, I'm gonna have a div. And the class of that's going to be worm-container. And the image is gonna be of source ./worm.png.
[00:01:03]
And this is gonna be the worm score meter. And the class here is worm. Okay, Save and refresh here. You can see it now we have a nice little wormy guy at the top. Let's go add some CSS to make sure that we get all of that. So mole.css.
[00:01:32]
It's a couple more lines here to add at the end, worm. So we're going to fix the worm at width 1660 pixels. Because what's going to happen is this worm, we're going to make it always the entire length of the screen. But we're going to use a div that's going to slowly expand to show pieces of it.
[00:01:56]
And using that overflow hidden, we're going to be able to slowly reveal parts of the worm as people progress more and more into the game. Make sense?
>> Brian Holt: So we fixed the worm at that width.
>> Brian Holt: The worm-container is going to be overflow: hidden; transition. We'll look at the transition here in just a second.
[00:02:30]
We'll leave that off for now, and then the worm box is also gonna have that same width.
>> Speaker 2: What's the difference between worm box and worm container?
>> Brian Holt: So the worm box is going to be what we're gonna have take up the entire width of the screen. If we have variable width, it might wrap onto the next line.
[00:02:56]
It would also not, we want the worm to stay fixed in the sense that the head is always gonna be on the left. If we didn't fix the width, and have both the worm box and the worm then it would expand from the center which is not what we want.
[00:03:17]
So I think it'll be a little more concrete once we see the animation here happen. So we have this. We want the user to start out with zero score right? So we're gonna say here is on the worm container here. We're gonna say width equals 5% or sorry, rather style equals width 5%.
[00:03:49]
So now notice it starts with just a little head right here, right? And if we didn't have the worm container kind of expanding and contracting there, then you would be be able to see the entire worm. Makes sense? It's a little bit of some advanced CSS, but we're using this container to kind of, see if we can actually, let's do this, kind of explore what these are doing.
[00:04:25]
So
>> Brian Holt: Specter.
>> Brian Holt: So if I look here at the worm,
>> Brian Holt: So the worm box takes up that whole top half of the page, right? Then I'm using the worm container to only show a tiny, tiny piece of it. And then as the user scores more and more points.
[00:04:54]
>> Brian Holt: Let's see. Here on the worm container. We're going to expand this worm container like that so that we can show more and more of the worm. Just by changing the width on that worm container. And it's important that we keep this worm as well fixed at 1660 pixels, cuz if we didn't have this, it would try and squish it into wherever it was.
[00:05:20]
Does that makes sense, sort of?
>> Speaker 3: Yeah it's similar to what you were talking about earlier where something goes off the screen, and you could theoretically make it scrollable I suppose right?
>> Brian Holt: Right, that's exactly it. So if we came to worm container and make this scroll, now you could probably if I can get my mouse on it, you can scroll through the worm right here.
[00:05:47]
>> Brian Holt: So we're basically just creating like an artificial window using CSS, right? Then you can only see the worm as it's exposed right here.
>> Speaker 3: Technically you already won, because it's all there, it's just not showing it to you.
>> Brian Holt: Right, exactly. So technically they start with zero points, right?
[00:06:03]
So we would have this worm at 0%. But I thought it was a little bit better so that the user could initially see something right. So they could tell that that's where the meter started, right? So that's why I started that 5%, just you can see the little frowny face.
[00:06:20]
Now what we're going to do, if we come back to our game JS. Whenever a user scores, we're gonna adjust to this the the width of that container. So what we're going to say, here in mole.js, worm.container, worm container rather, let's just do this, document.querySelector.worm-container,
>> Brian Holt: .style.width =,
[00:07:04]
>> Brian Holt: I'm gonna use back ticks there. I'm gonna say,
>> Brian Holt: 10*score%.
>> Brian Holt: Right, because score is going to be number from zero. Well, it's gonna start at zero but this is never firing zero. So it's gonna be a number from 1 to 10. So whenever user hits, correctly clicks on the mole, it'll expand it to 3 times 10%, so 30%.
[00:07:44]
So if I refresh again here, now if we click on one of these, it should expand a little worm friend there, right.
>> Brian Holt: Now your users have an indication of where they are in the game. And you can see that when you click on a king mole, it expands even further.
[00:08:06]
And then until you win.