Introduction and Project Goal
Yo, what's going on guys? Welcome to your 13th Vue.js tutorial and in this video I'm going to bring everything together that we've learned so far and create a little punch bag game. Okay, then so we're at the stage now where we've kind of learned a lot of the basics and I want to bring everything together now that we've learned and put them together in one little project that is going to show you how these kind of things work together. If you like, so we're going to create this mini game and yet it's going to be pretty crappy but nevertheless it's going to shed some light on how everything works together.
Game Concept and Assets
The game is going to be a punch bag game. We're going to have a picture of a punch bag, a couple of buttons to punch the bag or restart the game and when you punch it the health is going to go down until it reaches zero then it's going to show a burst bag. Alright, Tada. That's it. So we have these two images right here in this image folder: bag and bag burst. Now you can find those on this repo right here, Vue JS playlist. I'm going to leave the link down below. You want to come to branch lesson 13 and it's in the images folder right there, so you can download those. Okay, cool.
HTML Template Structure
So the first thing I want to do over here is outline the structure of our HTML template so I'm going to create a few different comments to say where everything's going to go. Now we're going to have three elements on this page: the picture of the bag, the punch bag, then the punch bag health bar, and then finally the game buttons, the controls at the bottom right. So let's create these comments to say where everything is going to go. So bag image for first of all, then underneath another comment and that is going to be the bag health and then finally underneath it's going to be the game controls. There we go. So let's start with the bag image. This is going to be a div with an ID equal to bag and this ID is just so I can style it up. So there we go, that is our bag sorted. Now then the health bar: this is going to be a div again this time with an ID equal to bag-health again for CSS purposes and inside this I'm going to create another div. So the idea here is this surrounding div right here is going to be the container of the health with a border and this right here is going to be a block of color which represents the health which is going to go down as we punch it. Okay, so we'll style these up shortly. Finally the game controls, so we'll say div id equals controls and then inside this div we want two buttons. We want a button first of all to punch the bag and then we also need a button to restart the game. Not that we'd ever want to restart this game because it is going to be pretty crap anyway. So now we have our two buttons, we have our health and we have our bag and that's it. That is the HTML done. If we check this out in the browser it's going to look like pretty much nothing at the minute; all we see is these two buttons.
Styling the Bag Image
All right, so now what I want to do is style these up a little bit. So I'm going we're going to start with the bag. So that's #bag and this is going to have a width of about 200 pixels. It's also going to have a height of 500 pixels and we're going to give it a margin: zero top and bottom, left and right is going to be auto which is going to centralize this div to the center of the page. Now the background is going to be an image; this is going to be how we show our image of the bag. So this is going to be url and inside it's in the images folder and/bag.png. So that is this image right here so we're going to show that first of all. Now we want to centralize this in this div so I'm going to say center for position and also we don't want this to repeat so I'll say no-repeat just to show it once. Finally I'm going to give this a background-size of around 80% something like that. Okay, cool. So now if we save this we're going to see our bag on the page. Cool.
Health Bar Styling and Behavior
So let's now style up the bag health. So again #bag-health, that's this ID right here so we're styling that up now and this time I want it to have a width again of 200 pixels. It's going to have a border; this is going to be two pixels solid and black which is #000000 and then finally a margin at the top is going to be zero, right is going to be auto, bottom is going to be 20 pixels and left is auto so centralizing those, uh, that health bar again. Now right now this is just a black line. Why is that? Well because it's got no height and nothing really is in it. So remember this div inside it: this is going to represent the actual color block inside it of the health. So we want to copy this, paste it, and then style up the div inside it and this time it's going to have a height of 20 pixels and it's also going to have a background of crimson which is kind of like a deep red. So if we save that now we can see this health bar inside. So as we punch this health bar is going to go down and we're going to basically change the width of this from 100% to 0% sequentially as we hit the punch button. Makes sense? Okay.
Controls Styling and Vue Instance Setup
So finally we want to style up these controls so I'm going to copy that and down here in the CSS we'll say #controls this time a width of 120 pixels and again margin is going to be zero and auto to centralize those dudes as well. Cool. So that is looking okay now. Now then we need to start adding some functionality and data to this game and we're going to do that in our Vue instance right here which is pretty empty at the minute. We just have the element selector which is this thing, so it's controlling this area. Then we have an empty data object, empty methods object and an empty computed object. We're just going to use these top two for this tutorial. So the first thing I want to do is create a data property called health which is going to store the health of this bag. Now it's going to start off at 100 which will represent 100% right and it's going to go down sequentially by 10 as we punch it. So this right here is 100% at the minute.
Punch and Restart Methods
The first thing I want to do in the methods is create a punch method. So this is every time we click this punch button right here it's going to call this punch method. So this is a function and then what do we want to happen inside this function? We want to reduce the health of the bag. So we can refer to this health right here by saying this.health and that is equal to 100 right now but we want to say -= 10 so we're taking off 10 from this health every time. Okay, makes sense; that's what -= means: it takes off 10 of the current value. So next we want to create another method and this time it's going to be called restart and that is when we click this restart game. So we might get halfway through the health will be down here, we said don't, what I want to start again I'll click restart and it's going to take the health back up to 100. So this again is going to be a function which inside is going to say this.health is now equal to 100 because we want to bring it back to the beginning. We want to restore the health, if you like. Okay. So now what we want to do is hook up these methods with these two buttons right here. So inside here we can use v-on to listen to events and it's going to be a click event and when we click the punch button it's going to fire the punch function we just created. Same down here v-on and this is going to be a click event again and I'm going to set this equal to restart. So now when I click this punch it fires the punch method. Okay, cool.
Game End State and Conditional UI
Now I want to create one more data property right here and that is going to be called ended and that is going to keep track of whether the game is ended or not. Now the game ends when this health right here reaches zero and when it ends I want this to become a burst bag. So we need to keep track of whether the game is in play or whether it's ended. Now at the start the game is not ended; it's only just started, right, so this is going to be false and when we reach zero health right here we want the game to end so we want to say this.ended is true then. So how do we know when the health is zero? Well every time we punch it we're taking off 10 and after we've taken off 10 we can say now I want to check if the health is zero or less and I can do that using an if statement. So I'll say if this.health is less than or equal to zero then I want the game to end. So I'll say this.ended to refer to this data property and I'm going to set this equal to true because now the game has ended. Likewise when we restart the game if the game has been ended previously we want to reset ended to false because now we're playing again so we can say this.ended is equal to false. Make sense? Okay, cool. So there's a few things I want to do in here now and the first one is regarding this punch button. So I only want to show this punch button when the game is in play; hence the game ended property will be false, right? So I can show this conditionally using v-show and if I set this equal to a variable which is either true or false it's going to show or not show. So if I set this equal to ended then what's going to happen? If I save this then punch is not going to show by default because ended is currently false; we're currently in play. Now I want to show this to begin with and I only want to hide it, sorry, when the game is ended when this right here is true. So I can use the negation operator and now when ended is false this negation operator is going to turn this whole statement into true. It kind of reverses it all, alright? So when ended is false it turns this into true. When ended is true it turns this into false. So if I save this now then punch will show to begin with but when health reaches zero then punch won't show, therefore it cannot go to minus health. Right, makes sense? Cool.
Dynamic Health Width, Burst Class Binding and Conclusion
So the next thing I want to do is this health bar right here. So as we punch it and we're taking 10 off the health I want to dynamically change the width of this health bar to kind of represent its health. We're going to do that using data binding and we're going to do it on this div right here because this is this red thing. So we know how to do that: we can use v-bind and we're going to bind to the style attribute and this style attribute is going to take an object as a parameter right and we can pass through our different style properties in here. Now the style property we want to change is the width so I'll say width and that is going to be equal to the health right here that we defined and we can reference that just by saying health and we're also going to tack on a percent at the end so single quotations not double so that we don't escape out of the double quotes here, do a percent and now it's going to be whatever health is plus this percentage. So to begin with 100% but as we click the punch button this will go to 90, 80, 70% etc. So if we save this now and take a look if we keep punching then the health goes down pretty cool. But at the minute what happens when we get to the bottom? Yeah, the punch button goes because of this thing right here and the health is at zero but this bag it's not destroyed. I want to destroy this bag all right. I want it to be burst. So what we need to do is some more data binding on this bag to listen out when the game has ended right and when the game is ended we're going to apply a class to it which we can style differently to show that burst image. So again data binding is a v-bind to bind to a particular attribute this time it's going to be class and this is going to be equal to an object and remember we can pass through as many classes here as we like and each class has got a name so this one is going to be burst. We want to apply the burst class when the game is ended so this expects a boolean right here true or false. When this boolean is true it's going to apply this class to the div; when this boolean is false it's not going to apply this class to the div. So when the game has ended when ended is true then we're going to get this burst class. Right, cool. So now if we inspect this element right here and we keep on punching you see this bag element when we get to zero now keep an eye on this right now when I click it one more time you get a class of burst because the game has now ended so now we can style this up differently. So in the CSS letters go to bag and then paste that in and now bag.burst when it has a class of burst we want to give it a different background so we'll copy these two things right here paste them in and this time it's going to be bag-burst which is this other image so bag-burst. Save it and if we refresh right over here keep punching it and now we get the burst, B. Voila. Cool. So there we go. There is your very first little crappy game with Vue.js so hopefully this has kind of demonstrated how we can bring the different techniques we've used together to create something very simple like this and as we go through future tutorials we're going to create better projects than this believe me, but I just wanted to demonstrate what you've learned so far.
