Build A Text Adventure Game With JavaScript

Key Takeaways

welcome back to web dev 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 near infinite possibilities of things that you can do with it also if it's your first time at the channel make sure to 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 going to build which is the simple text adventure game over here as you can see we have some text and some options for example let's leave the goo behind and now we get more text and more options but this isn't a very simple text adventure game if i refresh here and actually take the gute you see we get different options so this game actually has state built into it which you can use to determine the path that your different text nodes can take for you so let's get started building this now first we need to create an index.html page which is where all of our HTML for the game is going to go we're also going to want a style sheet for styling our pages as well as lastly a game jeaious which is going to store all of our code for the JavaScript for our game which is the bulk of this video let's set up our index.html here by just hitting an exclamation point and enter and that will generate the boilerplate for us we can just call this text adventure and inside of here we're just going to need the basic code to create our container which is going to contain our question here our text as well as our different options so let's first here create a div with the class of container just like this and inside of here we're gonna need a div which is going to have an ID 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 another container which is going to be a div with the ID here and there's going to be option option buttons because these are all of our different apps option buttons are gonna be stored in here and this is going to have a class as well which is just going to be button 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 are just buttons with a class here of button and we can just say option one copy that down multiple times so we have option two three and four now let'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 styling it so we have that card system we go over to 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 set a border box properly so we can just come in here select all of our attributes before and after and we just want to set the box right here whoops box-sizing to be border-box we'll just make styling our wits and heights and padding 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 font here you want or just the default here we go if we save that make sure that we're actually linking that stylesheet so we can come in here we could just say link href is going to be equal to Styles dot CSS and we want to make sure we tell it that it is going to be a style sheet just like that oops there we go now if we say that you see our font is being applied what's also linking here our script tag while we're at it so we can just stay deferred and we want to set the source here which is equal to game J s and close that off now instead of our stylist here what's work on style in our body first so we want to have everything in the center of our screen so we're just going to set padding here to zero and margin to zero so that we can get our background color properly I'm never going to use display Flex combined with justified content in the center and aligned items in the center which is going to send 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 width here to be 100 view width so it's going to take up the entire width 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 our content is centered in the center of our screen last thing we need to do here is just take our background color I just want to set it to a nice dark gray so we'll just use three three three which goes 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 let's select that and the container here is just going to have a width we're going to set that to 800 pixels whoops 800 pixels we're also going to set a max width which is 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 just going to set that equal to white we're also going to set some padding of 10 pixels as well as we want to make our corners a little bit rounded so we're going to set the border radius which is just going to be here of 5 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 to do that we'll use box shadow we're going to set this here our X offset to 0 our Y offset to 0 our spread to 10 pics 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 our spread is going to 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 style our buttons let's select our button grid just like this and inside of our button grid what we want to do is we want to make it a display of grid and we want to make it so it's 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 just gonna put Auto here whoops auto if we save that you see we now get a two column layout and we're gonna put a little bit of gap between them of ten pixels let's say as well as we want to set a margin on the top of 20 pixels now if we save that you see a spaced out for my text up here as well as spaced out between all of our individual buttons now we can move on to styling our individual buttons first thing we're gonna do is we're going to put a background color on all these different buttons we're gonna use HSL for that a hue 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 let's copy that down and we're gonna do the same exact thing so this is going to be for our border so we're going to do a 1 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 this is just going to be 5 pixels oops 5 pixels just like that and we're also going to put a little bit of padding we'll save 5 pixels and 10 pixels change the color of the text to 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 and we're just gonna change the border color we're going to change it to black now when we hover over it 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 going to be coding 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 this is going to be equal to document get element by ID of text which we set inside of our index.html here and the next thing is we want the options button container so let's just do the exact same thing Const option buttons this is just going to be equal to here document dot get element by ID of option buttons and let's make sure we call this option buttons element so we know that this is an actual element in our application and now our application is going to have a few different steps the first thing is we're going to have a function for starting the game so we're just going to say start game oops start game and this is going to start up our game and set all of our state and 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 just going to 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 can just come in here and this is going to take a particular index of a text note so we're going to 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 loads we can just do that at the very bottom of our script like this and it's going to call this function as soon as everything is loaded and in here what we want to do is we want a state function state variable here we're going to call it state this 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 node so we can say show text node and we want to show the very first one and these text nodes are going to be defined down here in a variable we're just gonna be called text nodes and inside of here we're gonna have an object which is going to have an ID for example of 1 which is going to be our very first text node we're also gonna have some text just like this this text we're gonna take from our previous example I'll just paste it in here and says you wake up in a strengthless place and see a jar of blue glue near you now from here we're gonna have different options for what we can do and these options are going to actually have quite a lot of parameters the main thing you notice is the actual text which is going to show up on our button here so our two options are we can take the GU and then we also want to create another option which is going to have the text of leave it so we can just say we've the GU just like that so this is first going to be the text for our two different options but we also need to have an option which is going to set State for us because if we take the goop we need to set the state so we can say we want to set our state to have the GU so blue GU is going to be true because our character now has blue goo so this will set our state for us and we also finally need an option which is going to tell us what the next text note is so in our case we're just going to go down to ID of a number two which will create down here let's just do that now ID of two and for now we just not going to fill anything else up 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 going to actually set any state so we can ignore that I just set 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 once we're going to implement in our show text node those are just going to first get our text node which is going to be equal to text notes dot find and this is going to take in a text node for each one in the array and we want to find the one that has the current ID so we're going to say text node ID is going to be equal to text node index just like that this is going to be the current text node we want to show and to show the text the first thing we can do is set the inner text oops inner text of our text element equal to that text node dot 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 can just do this in a simple while loop so we can say the option button element dot first child so while it has a first child we want to just remove that child so we can say remove child of the option button element dot first child now if we save 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 going to loop through all of our options we're just going to be text note options and we would want to do it for each over all these different options and in here the first thing we want to do is we want to check if we can actually show that node so we can just say if show option which is a function we're going to create and if we passing the option and if we can show it we're going to execute the code inside of here this is because as I showed earlier sometimes we can show some options based on the state that we have up here so let's just create that function now show option and for now we're just going to actually return true from this every single time so we're going to say return true because we don't know how to implement this option function yet so inside of here now we actually need to create the option so we're going to create a button which is just going to be equal to document create element whoops create element and we want to make sure we create here a button and then with that button we want to first set the text of it which is going to be equal to our option text and we also want to come in here and we want to set the class we're gonna get the classlist and we're gonna add that button class so it's going to be styled properly and lastly we need to set up a click event listener so we're gonna add this event listener for click on to here this is again just going to take a single function just like this and it's going to be our select option function and just going to 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 button element group so we can just say appendchild and we want to append the button now if we save that you see it's showing up our 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 node that we're going to be adding on to let's add on and actually create this so the first thing we need to do is add the text I'm again just going to copy this over as you're just going to say you venture forth in search of answers to where you are when you come across a merchant and in here we're again going to have our options which is in 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 glue so we're just going to say trade the GU for a sword just like that and this is going to actually require us to have GU in order for this option to show up so we're going to need to be able to check on the required state so 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 state blue goo so essentially if we have the blue goo then 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 want to do is we want to set the state so in here what we're going to do is we're going to 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 set 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 in here we're gonna begin we're gonna have to have blue goo but instead of setting our sword to true we're gonna set a shield the true and then lastly what are we gonna do if we don't have any goo we can just set here that we want to ignore so we can say ignore oops ignore the Merchant there we go and this is not gonna require any state so we can remove this it's not going to set any state but it is going to move us on to the next text in our array now with that out of the way let's actually get our show option to be 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 null which means we have no required state then we want to return true or if option that required the 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 need to implement our select option function so in here we want to get our next text node so we can say next text node ID is going to be equal to option dot next text just like this and then we want to get our state so we want to take our state and we're going to set it equal to object dot assign first our initial state and then the option set state and what this does is it's going to take our state that we have currently it's going to add everything from options set state to it and override anything that's already there so if blue GU is true here but it's false in our option set state it's going to set it to false in our state and this is going to return a brand-new object which we're going to set to our current state then after all that is done we just want to show the text node for our next text node ID just like that and if we say bed and we click on here and we say take GU you'll simply 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 going to copy in the next text node that we're going to have which is our text node number three so let me just paste that in here and essentially all this is saying is that after we leave the merger we see both a town and a castle and it gives us options based on what we want to do for all of these different things so now let's implement what happens if we explore the castle but our character is very tired so we want this to end the game so we're going to come down here we're going to set an ID of five or four actually because this is the next text of four and the text for this I'm just going to copy this over and essentially it just says that you're tired 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 just 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 node we can go to because we want to all up here this start game function so we reset our state so what 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 going to signify to us we want to restart the game so let's make sure we check for that up here instead of our function or selecting an option we want to do is if our next text node ID is less than or equal to zero so essentially it's negative one or below etc etc etc what we want to do is which one a call start game so we're just going to return here start a game just like that and that's actually going to restart the game for us so let's go through here get to that step and if we click explore the castle you're going to 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 nodes 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 so let's just say you wake up in a strange place and you see a jar of blue goo so we're gonna take the goo and we see a merchant so let's trade that goo 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 to go to my github 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 dev simplified with a link to your game so I can check it out also if you want more videos of me simplifying the web make sure to check them out linked over here and subscribe to the channel for more videos like this thank you very much for watching and have a good day