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.