Placeholder Image

Subtitles section Play video

  • welcome back to Webb have simplified in today's video.

  • We're gonna create your very first game, which is going to be incredibly simple to put together and have a near infinite possibility of things that you can do with it.

  • Also, if it's your first time at the channel, make sure you subscribe for more videos where I simplify the Web for you.

  • Let's get started.

  • Now Let's first take a look at what we're gonna build, which is this simple text adventure game over here.

  • As you can see, we have some texts and some options.

  • For example, let's leave the group behind and that we get more text and more options.

  • But this isn't a very simple text adventure game.

  • If I refresher and actually take the goo, you said, we get different options.

  • So this game actually has state built into it, which you can use to determine the path that you're different text notes can take for you.

  • So let's get started building this now.

  • First we need to create index dot html page, which is where all of our HTML for the game is going to go.

  • We're also gonna want a style sheet for style in our pages as well as lastly, a game dot Js which is going to store all over code for the Java script for our game, which is the bulk of this video.

  • Let's set up our index dot html here budgeting, exclamation point and enter, and that'll generate boilerplate for us.

  • We could just call this text adventure and inside of here is gonna need the basic code to create our container, which is going to contain our question here.

  • Our text as walls are different options.

  • So what's first here?

  • Creative with the class of container just like this and inside of here, we're gonna need a diff which is going to have an I D, which is text, and it's just going to contain our text.

  • This is going to be this first section up here and then we're gonna need a another container, which is gonna be a diff with the idea here, and it's gonna be option option buttons because they're all of our different option option buttons.

  • They're gonna be stored in here, and this is going to have a class as well, which is just going to be buttoned grid because we're gonna have a grid of buttons down here, As you can see and inside of here, we're gonna have all of our different options, which is just buttons with a class here of button.

  • And we could just say option one.

  • Copy that down multiple times.

  • So option 23 and four.

  • Now it's open that up real quick.

  • Using live server, make sure it's saved.

  • And as you can see, we get our text and our four different options.

  • Now let's work on style it.

  • So we have that card system, we go over our styles, and the very first thing we want to do is something that I do in every single one of my projects, which is just said a border box properly so we can just come in here.

  • It's locked all of our attributes before and after, and we just want to set the box sizing right here.

  • It's box sizing to be border box, which just makes dialing our wits and heights and patting and margin much easier.

  • Also, I have the font Gotham rounded on my computer, which I like to use in all my videos, and you can use whatever if I hear you want or just the default.

  • Here we go.

  • If we save that, make sure that we're actually linking that style sheet so we could come in here.

  • We could just say link.

  • A trip is going to be equal to Stiles, Nazi SS, and we want to make sure we tell it.

  • But it is going to be a style sheet just like that.

  • There we go.

  • Now we say that you see are fun is being applied.

  • What's also Lincoln here?

  • Our script tag while we're at it So we could just stay, differ.

  • And we want to set the source here, which is equal to game dot Js and close that off now, inside of our stylist here, what's work on style in our body first.

  • So we wanna have everything in the center of our screen.

  • So we're gonna set padding here to zero margin to zero so that we can get our background color properly.

  • Never gonna use display flex combined with justify content in the center and a line items in the center which is going to send her our content in the screen.

  • But if we say that you'll see it's not centering it vertically.

  • So what we need to do is first set the with here to be 100 view with.

  • So it's gonna take up the entire with and we also need to do the same thing with height.

  • We just want to set that equal to 100 view height.

  • Now, when we say that you see are content is centered in the center of our screen.

  • The last thing we need to do here.

  • Just take our background color.

  • I just want to set it to a nice start, Grey.

  • So what does use 333 which was is that nice gray color that we can see on our screen over here.

  • Now the next thing we need to do is work on styling our container.

  • So it's like that and the container here is just going to have a with we're going to set that to 800 pixels, get 100 pixels, and we're also gonna set a max with We're just going to be 80%.

  • This is just so it never expands too far on our screen.

  • And as you can see, it now only takes up 80% of our screen instead of the entire thing.

  • Now we can set the background color.

  • We're gonna set that equal toe white.

  • We're also gonna set some padding of 10 pixels as well as we want to make our corners a little bit rounded.

  • It's we're gonna set the border radius, which is just going to be here of five pixels.

  • Now you can save that.

  • We see this is working well, but we want to add a little bit of a box shadow around our object to make it pop.

  • So don't do that.

  • We'll use pocket shadow.

  • We're gonna set this here are ex offset to zero R Y offset to zero are spread to 10 pixels.

  • So it gives us this nice spread out effect, and then we're gonna have set our blur.

  • Sorry, this is our blur, and then lastly are spread is gonna be two pixels.

  • So we get a nice little black line around it.

  • As you can see here, the last thing we have left to do is Styler Buttons.

  • What?

  • Select our button grid just like this, and inside of our button grid we want to do is we want to make it a display of grid.

  • We want to make it so two columns.

  • So we're gonna use grid template columns for that.

  • And here we go.

  • We can set.

  • We want a repeat of two, and we want them to be auto sized.

  • So we're gonna put auto here.

  • Auto, we say that.

  • You see, we now get a two column way out, and we're gonna put a little bit of gap between them of 10 pixels.

  • Let's say as well as we want to set a margin on the top of 20 pixels.

  • Now, if we say that you see a space stuff from our text up here as well spaced out between Oliver individual buttons, now we can move on to styling our individual buttons.

  • First thing we're gonna do is we're gonna put a background color on all these different buttons were gonna use HS alphabet, a queue of 200.

  • We're gonna have a saturation here, 100% and we want a lightness of 50%.

  • This is going to be a nice blue color, as you can see what's copy that down and we're gonna do the same exact thing.

  • This is gonna be for a border.

  • So we're gonna do a one pixel solid border, and instead of doing 50% lightness, we're gonna do 30%.

  • So it's a little bit of a darker blue color around.

  • As you can see now we can assign the border radius is just going to be five pixels.

  • Looks five pixels just like that.

  • And we're also gonna put a little bit of padding.

  • Will say five pixels and 10 pixels changed the color of the text toe white, and we're gonna lastly remove the outline, so we'll say outline of none.

  • Now, as you can see, our buttons are looking a lot nicer.

  • Lastly, let's just add a simple hover effect just like this ember just gonna change the border color.

  • We're gonna change it to black.

  • Now, when we hover over, we can tell which button we're hovering on based on that border color.

  • Now we can finally jump into the fun part of the application, which is gonna be coating the entire game.

  • The first thing we need to do is we need to select both our text element, which is this text here that we have.

  • So we can just say that that's going to be equal to document that get element by i d of text, which we set instead of her index toe Each team out here and the next thing is we want the options button container.

  • So what's just do the exact same thing?

  • Constant option buttons.

  • This is just going to be equal to here.

  • Document that get elements by i d of option buttons on.

  • Let's make sure we call this option buttons element.

  • So we know that this is an actual element in her application, and now our application is going to have a few different steps.

  • The first thing is, we're gonna have a function for starting the game, So we're gonna say, Start game, start game.

  • This is going to start up our game and set all of our state an application to where it needs to be.

  • We're also going to have a function which is going to happen every time we select an option.

  • So we're gonna say select option, and this is going to take whichever option that we select because we need to know which option we're selecting.

  • And lastly, we're gonna have a function which is going to allow us to display whichever option we're on.

  • So we're just going to say that we want to show text note and we could just come in here and this is going to take a particular index of a text note.

  • We're gonna save text note index just like that.

  • Now, with all those functions out of the way, let's make sure that we call start game as soon as our page lows.

  • We could just do that at the very bottom are a script like this, and it's going to call this function as soon as everything is loaded.

  • And here what we want to do is want a state function state variable here.

  • We're going to call it State is going to be an equal to an empty object.

  • This is we're going to keep track of what our character has on them, for example to do in this previous example here.

  • So when we start our game, we want to take our state and make sure that this is an empty object and we also just want to show the next text note so we can say show, text, note.

  • We want to show the very 1st 1 and these text notes are gonna be to find down here in a variable.

  • We're just gonna be called text notes and inside of here we're gonna have an object which is gonna have an i d.

  • For example, of one which is going to be our very first text note.

  • We're also gonna have some text just like this.

  • This text we're gonna take from our previous example I'll just pasted in here says you wake up in the strengths place and see a jar of blue blue near you.

  • Now, from here, we're gonna have different options for what we can do, and these options are gonna actually have quite a lot of parameters.

  • The main thing you notice is the actual text which is gonna show up on our button here.

  • So are two options are we can take the goo, and then we also want to cut another option, which is going to have the text of leave it.

  • So we could just say we've got you just like that.

  • This is first gonna be the text for two different options.

  • But we also need to have an option which is going to set state for us because if we take the goo we need to set the state so we can say we want to set our state tohave the goo So blue goo is going to be true because our character now has blue goo.

  • So this will set our state for us.

  • We also finally need an option which is gonna tell us what the next text notice.

  • So in our case, we're just gonna go down to I d of number two, which will create down here.

  • Let's just do that now I d of two and for now, we're just not gonna phony they all set in there.

  • We just know that that our next text is going to be number two.

  • For example, if we leave the glue, we're not gonna actually set any state, so we can ignore that.

  • I just said our next text, which is again going to be the same one Number two in our example.

  • So now that we know how this text note information is working was we're gonna implementing our show Text note.

  • This is just going toe.

  • First, get our text note, which is going to be equal to text notes dot find and it's going to take in a text note for each one in the array and we want to find the one that has the current I D.

  • So we're gonna say text mo dot i d is going to be equal to text note index Just like that.

  • This is going to be the current text note we want to show and to show the text.

  • The first thing we can do is set the inner text in a text of our text element equal to that text node, not text.

  • And if we say that you see the text is being shown up right here now, the next thing we need to do is remove all the options.

  • We could just do this in a simple wild do, so we can say the option, but an element dot first child.

  • So while it has a first child, we want to just remove that child.

  • So we're gonna say remove child of the option, but known it dot first child.

  • Now, if we say that, you see, it removes all of our options and now we can actually go around and adding the options that we need to to do this.

  • We're just gonna look through all of our options, which is gonna be text, no doubt options.

  • And we wouldn't want to do it for each, over all these different options.

  • And in here, the first thing we're gonna do is we want to check if we can actually show that note.

  • So we could just say if show option, which is a function we're gonna create.

  • And if it were passing the option and if we can show it, we're gonna execute the code inside here.

  • This is because, as I showed earlier, sometimes we can show some options based on the state that we have up here.

  • So what's just create that function now, show option.

  • And for now, we're just gonna actually return true from this every single times we're gonna say return true, because we don't know how to implement this option function yet.

  • So inside here Now, we actually need to create the option.

  • So we're gonna create a button which is just going to be equal to document Dockery Element create element and we want to make sure we create here a button and then with that button, we want a first step a text of it, which is going to be equal to our option.

  • That text.

  • And we also want to come in here and we want to set the class.

  • So we're gonna get the class list.

  • We're gonna add that button class so it's gonna be styled properly.

  • And lastly, we need to set up a quick event listener.

  • So we're gonna add this event listener for Click Onto Here.

  • This is again.

  • He's going to take a single function just like this, and it's going to be our select option function.

  • And it's gonna pass in the option that we're currently selecting.

  • Just like that.

  • It'll call down here with that option we're on.

  • And now let's add that to our option but element group.

  • So we could just say a pen child and we want to upend the button.

  • Now if we say that you see it showing up are two buttons down here, and if we click on it, it's obviously not going to work because we don't have anything for our second know that we're going to be adding on to let's add on and actually create this.

  • So the first thing you do is add the text.

  • I'm again.

  • Just gonna copy this over.

  • It's just going to say you venture forth in search of answers to where you are when you come across the merchant and in here we are again going to have our options, which isn't an array.

  • And the very first option we want to do is we want to be able to trade with the person if we have the Blue Blue.

  • So we're just gonna say trade they do for a sword just like that, And this is going to actually require us to have goo in order for this option to show up.

  • So we're gonna need to be able to check required state, we're gonna say required state This is actually going to take a function, and this function is going to pass in the current state that we have.

  • So as you remember, we have this state variable up here, and this required state function is going to take in that current state, and it's going to check if we have what we need.

  • So it's gonna say if the current ST dot blue goo, so essentially, if we have the blue goo than this option is going to show up, and if we don't, it will not show up.

  • And this is going to happen in our show option function here.

  • When we get ready to implement that, the next thing we're gonna do is we want to set the state.

  • So in here, what we're gonna do is we're gonna make sure we have no blue goo.

  • So we're gonna say Blue goo is going to be false since we got rid of it.

  • But sword is going to be true, since we just picked up a sword from him.

  • And now we can sit.

  • The next text is just going to be number three here, So let's do that now.

  • We can copy this down because we're gonna have another option which is going to be trading for a shield.

  • And here we're gonna begin gonna have to have a blue goo.

  • But instead of setting our sword, a true we're gonna set of shield the truth.

  • And then, lastly, what are we gonna do if we don't have any goo?

  • We could just sit here that we want to ignore so we can say ignore, ignore the merchant, never go and this is not gonna require any state so we can remove this.

  • It's not gonna set any state, but it is gonna move us on to the next text in our array.

  • Now, with that out of the way, let's actually get our show option Toby working properly.

  • So we need to do is we want to check first if we have a required state object.

  • So if this is equal to know, which means we have no required state that we want to return true or if option got required state of our current state, which is just state.

  • So if this returns true or if we don't have any required state, then we're going to show the option.

  • So this is going to work properly when we get to our second step.

  • But in order to get to our second step, we have to implement our select option function.

  • So in here, we want to get our next text note so we can say next text node I d is going to be equal to option that next text just like this, and then we want to get our state.

  • So we want to take our state and we're gonna set it equal to object dot a sign.

  • First, our initial state and then the option dot set state.

  • And what this does is going to take our state that we have currently it's going to add everything for options, set state to it and override anything that's already there.

  • So if blue goo is true here, but it's false in our options set state, it's gonna set it to false in our state, and this is going to return a brand new object which we're gonna set to our current state.

  • Then, after all that is done, we just want to show the text note for our next texted I d just like that.

  • And if we say that and we click on here and we say, Take Gu, you'll see we get all three of our different options.

  • But if we refresh and we don't, you'll see we only get the one single option.

  • So our state information is working properly.

  • Now, I'm gonna copy in the next text note that we're going to have, which is our text note number three.

  • So when we just paste that in here and essentially all this insane is that after we leave the merchant, we see both the town and a castle, and it gives us options based on what we want to do for all of these different things.

  • So now it's implement what happens if we explore the castle, but our characters very tired.

  • So we want this to end the game.

  • So we're gonna come down here.

  • We're gonna set an I.

  • D.

  • Of five or four actually exists is the next text of four and the text for this?

  • I'm just gonna copy this over and essentially just says that you retired while you're exploring the castle, and the monster inside kills you when you fall asleep.

  • So this is going to end our game, so we're gonna have one single option which is going to restart the game for us.

  • We're gonna set the text equal to restart, and here we don't actually have a text note we can go to because we want a recall.

  • Appear this start game function.

  • So we reset our state.

  • So we want to do is we want to use a special next text, which is just going to be a negative one, and this is just gonna signify Tow us.

  • We want to restart the game.

  • So let's make sure we check for that up here instead of our function for selecting An option we want to do is if our next text note I d is less than or equal to zero.

  • So essentially it's negative.

  • One or below, etcetera, etcetera, etcetera.

  • What we want to do is which one to call start games.

  • We're gonna return here, start game just like that, and that's actually gonna restart the game for us.

  • So let's go through here.

  • Get to that step, and if we click, explore the castle, you're gonna see that It says you're so tired, you fall asleep.

  • So we restart and it's going to reset our state everything for us now.

  • So you don't have to watch me type out.

  • All of the different text knows that we're gonna have I'm just gonna copy in the fully complete game here, and we're gonna scroll back up to the top, save it and walk through it.

  • So let's just say you wake up in a strange place and you see a jar Blue goose.

  • So we're gonna take the goo and we see a merchant's lunch trade that Gu for a sword because we might actually want to use that.

  • And it says after leaving the merchant, you feel tired.

  • We stumble upon a town and a dangerous looking castle.

  • We already know the castle option is bad.

  • So let's say that we want to find a room to sleep in at the town.

  • And you see that without any money to buy the room, we get thrown in jail for trying to break into a room.

  • So we have to restart.

  • And if you want to play through this game, make sure you go to my get hub, pull it down.

  • It has the entire game code in it for you to play around with, and you just created your very first game.

  • I really want you to expand upon this and show me what you can create.

  • So when you do create a game, tweet me at Deb's, simplified with a link to your game so I can check it out.

  • Also, if you want more videos of me simple, find the Web.

  • Make sure to check them out.

  • Linked.

  • Over here, I subscribe to the channel for more videos like this.

welcome back to Webb have simplified in today's video.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it