24: How To Create A Game Using JavaScript | Part 2 | Making The User Interact | JavaScript Tutorial

how's it going and what I'll come back to our next step so we're gonna continue building in this video game we created in the previous episode now I do need to apologize for the delay in this video because it's been quite awhile since the first episode as you can see amethyst everything looks slightly different in the background don't worry everything is fine I just simply moved office because the sound is a lot better in here so just to sort of improve the overall experience when you hear my lessons here so what we have here is our game from the previous episode and as you can see what we did so far is we actually build our well the first part of the interface without really styling it using CSS because we're gonna do that in the last episode because CSS styling is not really part of the JavaScript course if you can say that so what we're going to do in this episode we're going to go ahead and actually build the functionality of this game here just one introduce what we did so far we have a index page with a bunch of HTML markup inside of it right now we have a couple of players to be confused from an extra to two character but we haven't actually set a chav script function to run once we click on one of these players inside the HTML markup so as you can see we have an on click event on one of the players but right now the unclick event is set to something empty so what we need to do is inside our what you call our JavaScript files we're gonna go ahead and set a player wants to do actually click on a player inside the first page of this specific game here so we have a couple of different things we need to do first of all we're going to go into the game manager and inside the game manager we're gonna go ahead and create the specific method that we're going to use once you do actually want to select this player now I do have a specific way of doing this because there's a lot of ways you can create the same different things inside JavaScript the way that I decide to do it is I have a separate function that is going to set the player and then I have one function or sorry not function we're talking about objects now so it's called methods we have a separate method that it's going to set the actual stage that were inside of right now inside the file so we have two methods we need to create and we could create this inside one method if you wanted to but like I said we need to sort of keep functions and method simple so they do one specific thing each if that makes sense because otherwise we have these huge functions and methods that we can't really reuse if you want to so we need to make sure we make them simple and would you call it usable reusable if you could say that so inside the game manager what I'm going to do first is I'm gonna go and create a set game start method that is going to call on two other methods to run once we start the game now I know this might not make sense right now but just go ahead and wait for it then I'll actually show you how exactly that works so I'm going to say we have a method called sit game start and I'm gonna going to say parenthesis and my keep what is not said to what it needs to so I just need to change the layout first okay so I think the keyboard is working now we're gonna go and create this method T and we're going to set a anonymous function right afterwards parenthesis curly brackets and we're going to run two other methods inside this method here so we're actually going to create two more methods underneath this specific method so we can access a comma and think they're ready for the next one so we're going to create a method called reset player and this is going to be the one method that actually creates to play inside our game so like I said we need one method that does one thing inside the game and one method that actually sets up the game stage inside the game so reset player is going to actually create our player inside our game so we're going to just say curly brackets there we go and then we're going to have a another method that is going to set the the first stage inside the game so we're going to say comma and then we're going to set a set pre-fit set pre-fight method so we're going to say set free fight is that one word or two words I think that's two words so that's actually going to make the F capitalized I just looked at my note because my notes have then capitalized I can't speak today so we're going to do it the same way as inside my notes just to make sure we don't miss anything up so we're going to say function parentheses curly brackets and I can see if we do actually have three different methods inside our game-manager object so what I'm going to do is I'm going to run these two methods from inside the set game start method one to do to use a character and there's a very good reason for this which is the right now if I were to go inside the index page as you can see inside the unclick event we can only run one specific JavaScript function or method inside the onclick event and we do X need to have two functions or two methods run inside our object so we need to have one object that runs to other what we call a one method the runs to our the method inside our objects so inside our set game start method we're going to call into other two methods we have below it so we're going to say we have a this which parts to this optic we're inside of right now has a method called reset player you can actually see it pops up here's a suggestion and then we're just simply gonna close off the parentheses and then call on the next method which is this and it was called sets pre-fight parentheses and semicolon so now we do actually run these two different methods below us once we call in this one method inside the object here which means that right now we're going to go back to index.html and inside the index page we're going to need a way for us to tell the JavaScript method what play which shows inside the front page so the way we do that is by inside the unclick event I'm gonna go ahead and call on the method we have inside our JavaScript game object so I'm going to say we have a game manager object so instead of saying this dot the method we're gonna say game manager dot the method because we're not inside the actual object so we can't use this anymore so we're gonna say we have a game manager object the dot and I was called resets no not reset player what was it called we go into the game up game managers just to double check set game start it was called parentheses and inside the parentheses we need to bring in some information in order to tell it inside the reset player method what play which shows as you know as us inside the browser so we're going to bring in some kind of text so I'm gonna say we have the warrior here at the top so I'm just gonna say warrior and we can't use double quotes because we use double quotes inside the unclick event so we're going to use single quotes in here because we're bringing in a string so after doing this we can just simply copy paste into the other unclick events we have inside the front page so I'm just gonna change to rogue in the next one and do notice I spelled it capitalized you can of course choose to not do that and then just need to change something slightly inside the JavaScript function or method don't know why I keep saying function but we're just gonna go and change two other ones we have down here sometimes a hunter as the last one there we go so now that we have this done we do actually have everything we need to have inside the index base and all the rest of the changing the UI and everything is gonna happen inside the the JavaScript methods so going into a game manager I'm going to first of all say well we did actually tell it to bring in a string from inside the index page so we need to go back to the game manager object and inside the function here we have to bring in a variable from the outside so whatever we insert into the parenthesis in the index page is going to be set equal to class type which is a variable then I'm just gonna go and copy paste the variable in to reset player so now we're bringing in the text called warrior or hunter or mate or whatever into the reset player method which means that once we go down into the reset player method we also need to paste it in to make sure we bring it into the recent player method and inside of here we're going to set the player status so inside the recent player method we're going to create what is called a switch condition which is sort of similar to if and else if and else statements in the way that we can go ahead and setup some different scenarios using JavaScript code and depending on what the player chose inside the class type whether being warrior rogue whatever it's going to go ahead and set the player equal to that care to the vetos inside the index page so just to go ahead and create it because it's better to show then just talk about it I'm going to create a switch statement so going to say well we do actually get a pop-up suggestion here so we just created so we're creating a switch parentheses curly brackets and then inside the switch statement we set up a case which means that right now we do actually to bring in class type into the switch as a variable and depending on this variable here if case one is equal to say warrior then we're going to set the player equal to the warrior class we chose from inside the game so what we can do down here is we can say we have first of all some coca need to run so we're going to take the player from inside the play object that we set at the top here remember from the previous episode I said that we couldn't set the player inside another optic method because that was going to mess up things if not then do go back and watch that part because it's pretty important so we're going to set this specific player variable we created in the previous episode equal to the play that we chose inside the game and this one is just simply called player so in here we can just say we have a player variable that we already created inside the global what you call the global part of our JavaScript files and we're just gonna go and set this one equal to a new player object which we have inside the player the JavaScript file as well which is right here so we have all these information we to fill out depending on this specific player class type so we're going to go back to the game manager object and we're going to say we have a new player object which we create ourselves and in here I'm just gonna go and insert the class type into the first parameter because inside the game the player object we have the class type set as the first one then we have health mana strength agility and speed and we need to fill all this information into the play that we're creating inside the game manager method so the reason that I wanted to really called the string that we entered inside the index page to be with a capitalized first letter is because now we can actually call on this specific class type inside the player object and then we'll get the actual name of the character without having to do extra JavaScript code to capitalize the first letter it's already done ahead of us which is much better to do so after what we're gonna go and set up the player so we're going to say well the warrior is going to have let's say 200 in health so what we're doing is we're setting up one case where we chose the warrior and then we're going to going to create all the stats for the warrior in this example here then afterwards we're going to create another case condition that is going to say well what if the player chose hunter and then we're going to set up some new stats for that specific player object instead so just to finish off the warrior here I'm going to say we have zero and stats I don't exactly remember what these specifics are labeled as again you can just go back and look at them man extra activity speed I have my notes here so I'm just going to fill in what I have 150 so this is going to be the warrior spec which means that he has a lot of strength and he has very little ideality inside this what he called the numbers here so now that I have this we can actually go ahead and copy the case without the default one down here which if threw me inside sublime text inside the editor I'm just going to shift everything back by holding down shift tap because that is a neat trick you can do and then I'm gonna change the text into something else we're gonna say rogue and simply change the stats and year so now player is going to be equal to something else instead if you chose to rogue instead of the warrior so it's going to be a hundred then it's going to be 0 100 150 and 200 which I think is to speed we have back here then I'm going to copy/paste whoops go back I can't see my keyboard paste it in and again shift tap just to bring the code back then I'm going to change this one to mage then I'm gonna set the 1 to 80 custom age is not very strong as strength then I'm going to set 50 I might be mistaken there I don't exactly remember what the stats are here 200 and then we have 100 actually no that is actually 50 then I'm going to copy/paste one more time and do the same thing for the last one which is to Hunter and again if you want to bring in more care to stand again then you can just go ahead and create more characters here that you can use for your game you can just spit in as many as you want Hunter and I set this one to 200 0 50 200 and 100 I think I tried to make all the numbers sort of even up so everything evens up to the same amount I don't think I did that in the end but that's what I aim to do while I created this stats for these characters so no character was overpowered compared to the other one so after we did this I'm just gonna go and delete the default down here because the default is going to run if none of these case are going to be met so if the text inside class type is not going to be warrior rogue major hunter then the code is gonna go then what and that's what the default one down here is for so we can actually create some code in here and just simply run it if none of these were actually chosen so I'm just gonna go and delete that one because we don't actually need it you could say that there has to be a pop-up that says error and then it refreshes the page and you have to start over or something but just in this example II I don't think we need to have a default one so now that we did this we need to set the player inside the interface because we created the player now depending what we chose and now we need to actually decide how the interface needs to look like as you can see inside my example here watch it - a Tuesday character this is the finished version by the way this is not the one we're building on if I were to choose the rogue you can see we have the rogue showing up here with a image and all the stats down here and that's what we're going to set up right now so going back to our version if I were to go down below our switch I'm going to go ahead and create a variable or a let type variable I still haven't figured out who need to say that get interface that is going to get the actual interface from inside the index page I think it just whistled they're inside the index page we're going to get a specific class called interface because we were to go back and check you can see we have a couple of different sections we have a header section we have an interface section that is pretty long then we have an action sections arena section and an enemy section so we need to take all the content from inside the interface section which right now as a default we can choose a character and we to delete the content and insert new content inside interface and that is going to be just the stats for our player here so going back to the game manager I'm going to say first of all need to actually grab the interface from inside the index page so going to say we have 8 document dot a query selector I did get asked why I didn't use a document get element by ID or get element by class in the previous episode in the comments and I just want to point out that I do have a separate episode talking about why I choose to use course selector instead of these two other functions which are the old version of graphing stuff which you could argue might be slightly faster but it's so little they're faster that you might as well just use query selector I think I spelled this wrong I think that is query select aw just we don't get a spelling mistake so I want to grab the class called I believe it's called interface it's called interface and then I want to insert content into the interface buddy called a div elements we have inside the index page so what I want to do here is I want to say we want to get the interface dot the inner HTML it's going to be equal to some HTML code or markup because HTML it's not really code could argue that and now we're going to insert a bunch of HTML markup look just like we did with inside the index page but we're going to do it using javascript so I'm just gonna go ahead and write this here this would be very simple HTML I shouldn't really need to explain this to you but I will sort of talk about it while I start writing so the first thing I want to insert is an image or avatar of this specific player that we chose so I'm going to say they have an image then I want to say we have source there's going to be equal to single quotes actually another way to do this that would be easier would just to be use single quotes in the outside and then double quotes on the inside just so we don't accidentally write something wrong and then I want to dig into my image folder inside my project file um a project folder and get avatar - player after digging into the Avatar - player folder which also have inside my image folder I'm going to say I want to grab the specific file name and the file name is going to be decided by some JavaScript code because right now we can't just write what define that needs to be it actually needs to be dynamic so changes depending what we chose up here so we need to go out from the string by breaking up the string here and say plus plus because we're going to include some JavaScript code again this is not Plus as in we're going to add one plus two or something this just means that we're going to use a string operator that is going to a couple string together with JavaScript code and again this is something I taught previously so you should notice by now I'm going to grab the class type that we set up here because that is going to be warrior or hunter or whatever we chose from inside the index page and then I'm going to run a JavaScript method that's going to be called to lower case and parentheses which simply converts the entire name of the specific character which shows two lowercase letters so warrior with a capital W is not gonna have capitalize W anymore and this is going to be dot PNG after it because I used PNG images inside my file and now we have to link to the image afterwards we're going to go ahead and add a woody called a image description well we could just not do that because we don't really need to see optimize with a specific thing but in a regular website I would recommend you to create a alt tag that also has the image description inside of it that is basic HTML you should not have to do that by now but I will also a class because that is going to be relevant once we do at the stylesheet afterwards so in the next episode the class that I'm going to choose is going to be called class equal to image avatar image - avatar and that is basically it for the image then afterwards I'm going to open up and again we could just go to view toggle self wraps everything jumps on one screen so it doesn't continue out infinitely then afterwards I'm going to create a dip box that's going to contain all the information that we have of the character so I'm going to save of div you have an age three elements that is going to describe the name of the actual character we chose so I'm going to say we have class type so again we need to break this up by saying we have single quotes there we go plus plus then we need to set the class type there we go so we have the name for the class and then afterwards we need to close off the h3 tag so now we have two title for the character which again if I go back here is going to be what we have right here then after the title tag we're going to create a paragraph that it's going to contain the health of the player that we chose inside our game here so I'm going to say we have a paragraph using HTML I'm gonna close it off straight away there we go and inside the paragraph we're going to say we have health Col 1 and then I want to add some JavaScript code again so I'm just gonna go ahead and say we have closed off the string plus plus and then I want to include the player dot health now again player dot health is referring to the player we created up inside the switch statement so you can see we have the player variable that is equal to an object or dissection object constructor based off the player object we have so right now the player object has this dot health and because we created a variable called player equal to the player object this is going to replace with the player variable that we created up here so player dot health is going to be equal to what we have in here inside the playoff they've created inside the switch statement just so you know what exactly we're referring to here so player dot health is going to be equal to in this case if I chose the warrior 200 I do believe that is the health if I'm not mistaken yeah it's going to be equal to 200 so afterwards I'm just gonna go and copy paste my paragraph because me to have a cover more we need to have one for the man app so I'm gonna say mana and change play a dot mana and again we're just going to do this for all of them so I'm just gonna paste in the next one which is going to be equal to strength now you just sort of get a review of what exactly each of these numbers means so the next one is strength which is a difficult word to spell if you're not Native American or British or whatever language you might as well that that way the next one is going to be a DLT again we have agility and then the last one is going to be the speed do believe that was the last one just double-checking yeah I do think that was the last one if not then we're gonna have to come back and change it so now we set the interface and after doing this we just need to simply close off the Dib tag that I created up here so I'm going to create a closing div tag that is important we don't forget that and now we just finished off this specific function or method inside this object we have here called game manager so once you run the reset player we're going to set the player and set the player inside our game which is kind of cool so what we can do now is we can actually try and test this I don't know if it's just going to give us a error but if it were to choose the warrior you can see everything gets deleted and now we have to play a set inside our browser here which is kind of cool we have all the stats here we have everything that we need to have inside the interface of this specific player so we can actually reset and we can go ahead and choose the rogue and you can see everything changes depending on what specific character we chose inside the game so let's go ahead and set the pre-fight which is going to be the actual overall look of that we're going to change so one should you actually click a player so inside the set pre-fight method we're going to grab some different elements we have inside the index page because we need to change the all the contents of the different sections inside the index page in order for it to match up with the games as you can see if we were to go into my version here and just sort of refresh you can see once you do click a character we get a couple of different elements here we have first of all the character we also have a head up here that has a task inside of it that is a different section by itself we have a button area where we have actions you can actually choose and then we have an arena and an enemy area down here so we need to make sure we delete all the content from the previous existing one and jump into this new stage and fill in the new content into the game here so inside the set prefab method here the first thing we're going to grab and change it's going to be the header section which is the top part with the tasks inside of it so we're going to say we have a lit type variable and we're going to say get header again it's sort of a habit inside JavaScript in other languages that when you want to grab something and call it call it gets whatever and if you want to change something call it set whatever so set header for example we're going to go and set this equal to document dot quarry selector which I think I spelt correctly this time I did and then we're going to refer to the header section inside the index page we're going to say double quotes and I do think it was cold header just simply header which is kind of neat we don't have to do something complicated and remember to insert the class as well then I'm going to grab the actions section which is going to be right under our player avatar where we have the buttons where you can search one enemy and attack and that sort of thing that is going to be changed as well so I'm going to change this one to a from get hitter to get actions do believe I called it and then I'm going to change the class to actions then afterwards we're going to paste it in again because we're not we're not done grabbing things yet we need to get the arena so I'm going to say we have get rina and then inside of you can say arena there we go so now we can start changing it just like we did inside the previous method so underneath here I'm first gonna go ahead and change the header so we're going to say get header dot inner HTML it's going to be equal to double quotes actually not double quotes because like I said before it's easier with single quotes and then I'm gonna go and create a paragraph inside the paragraph we're gonna go ahead and say we have a task colon not tak that actually means thank you and Danis just FYI tasks and then we're gonna say find and enemy if I can spell that there we go extubation mark and then we're gonna go and close off the paragraph like so and that's basically it for the header then we're gonna go down to the next part we're gonna say get actions I'm sorry if you guys can hear the keyboard it might be pretty loud got in an HTML single quote and semicolon then we're gonna go and change this one so we have a link because we need a button to click on so I'm gonna say we have the link which is an anger tag just gonna close it off again immediately there we go and inside the anchor tag we're gonna set a hyper reference to nothing so we're going to set equal to hashtag which means that it's just empty it doesn't lead anywhere and then we're going to go ahead and insert a class because we want to do get to the styling part in the next episode we need to make sure we have the classes all inserted correctly so we're gonna call this one button pre-fight I called it so that's what we're gonna call it BTN pre-fight and then we're gonna go ahead and set a unclick event because once we click this specific button we need to jump to the next stage which is the fight stage where we do actually start battling with other opponent and once we click this button after we search for an enemy we're going to run a separate method that is going to randomly dinner a enemy depending on the enemy object we created in the previous episode and then we're going to fight him and change the layout of the arena so the unclick event is to make sure we run the next stage the way that we need to run it inside the game so this is a pretty important unclick event so we're gonna make sure we have that and I'm just gonna go and set this one to game manager again we didn't create this method yet but I'm just gonna insert it so we have it got set fight parenthesis then inside anger tag we're gonna go and say search for an enemy or to search for enemy you could write it whatever way you want to I'm just gonna say search for enemy just so it's the same as my notes over here and afterwards we're gonna go in teams the arena so we're gonna say get arena and then we're going to say dot inner HTML equal to single quotes semicolon that is important because otherwise you're gonna get a error if you get some what he called undefined syntax error or something then make sure you check for semicolons and all that sort of thing because they get a lot of questions in the comments of people saying that they get a syntax error which is when you don't close something lost problem something off properly as so make sure you double check that if you double take your code and you still can't find error double check it again because I have a lot of you posting in the comments you know sort of asking me to help you find error well you claim that there's no error but I always find one so make sure you double check it again and again and again until you find a since Excel because I promise you there will be an error in your code where you miss something so double check it now I did actually just notice that I didn't actually want to change the inner HTML here because that is not what I have in my notes instead I did actually already create the styling and to set up and everything for the arena what I just want to do here is I want to set it to visible because inside my CSS styling I set it to hidden as a styling so we can actually see it inside the inside the game but it's actually there but we just can't see it so I'm going to change the CSS styling instead of saying that we want to insert HTML into the arena so I want to say you want to access the style property we have inside JavaScript and using the style property I want to change something specific so I want to change a specific styling for this specific section here so I want to say I want to set visibility which is a CSS styling fYI equal to visible which is just simply going to make it visible inside our browser here so now that we have this we're basically done with the pre-fight part here now again we didn't create the set fight method yet which we referred to but let's go and check out what we have inside the browser here so forward to refresh click the rogue then you can see we don't really get anything that different other than search for enemy the actual arena that we're supposed to see our three set it's visible it's not here yet because we haven't actually activated the styling yet so we can't see the arena before we apply styling to it just so you know it what we're going to do now is we're going to go ahead and set the fight stage so afterwards I'm going to create a new method so we're gonna say comma again syntax check for it and we're going to say set fight and then we're gonna go ahead and say we have a colon function parenthesis semicolon or not semicolon curly brackets and inside to set fight method we're gonna first of all grab the different sections again just like we did before so we're going to just copy-paste what we have here paste it in now we do need to change one thing here because we don't want to get the arena and because it just needed to show that in the previous method instead we're gonna go ahead and get the enemy section we chose inside our body call our HTML and just so you don't get confused we do actually have an enemy section down here just like we have an arena actions and so on so we're not referring to anything inside JavaScript when I say enemy so it's just a enemy section inside the HTML markup so I'm going to change the class as well to enemy and afterwards we're going to go ahead and create different enemies that we can actually have in the game so this is where just like with the player that we have up here you could choose one for warrior rogue and you could create your own ones afterwards you can do the same thing for the enemy in my example I just chose to have two because we just need an example so the first enemy I'm just gonna go ahead and create a comment here just so we have it create enemy again it's important to have comments inside your code I should probably app help you create comments in your version but I think you can go ahead and do that yourself because I think I explained it pretty well when I explained the different code here so just go ahead and create comments it's very good for you in the future once you return to the code you can actually see what the different sections do so afterwards here I'm going to go ahead and create a let's variable I'm gonna call this one enemy zero and I'm gonna go and set this one equal to new enemy which is the enemy object we have inside our enemy file which is right here so inside this enemy here we're going to insert the stats that we want this specific enemy to have so in this case we're going to say well we can actually go back to the enemy object and see what we have here the enemy type health mana strength agility and speed so the enemy type is going to be a name that we're going to give the enemy so I'm going to call this something using a string and the first one I'm going to call a goblin and again you just make up something you want to call it I just called mine a goblin because that's what I have an image for and then we're going to insert two other stats as well such as health and that sort of thing so for the Goblin here I don't think this is a very strong enemy so I'm just gonna set 100 0 50 again I'm just looking at my notes over here hundred and 100 and then we can create the next enemy you want to have so I can say we have another constructor there's going to be call enemy one and this one is going to be called troll then I'm going to change the stats because I think the troll is slightly stronger than a goblin so I'm gonna say we have a hundred and fifty instead and we have eighty over here and then we have a hundred and fifty at the end here again if the enemy becomes too strong and too weak then you can just sort of tweak the the numbers in here and then next time you play it's going to be more difficult or easier for you to to beat the game so now we need to do something rather annoying right now javascript doesn't have a specific function or any sort of way for you to get a random number at least in a very simple way so the way we need to generate a random number because right now we need to get a number from zero to one that is going to randomize which enemy gets chosen so it's just gonna randomly choose one to zero zero or one yeah so we're going to run a very annoying process that I will create a separate episode on after we're done with their specific project here so I will have a mini episode and just explaining this so don't worry if you don't quite understand it we're going to create a leads type variable I'm going to call this one choose random enemy and I'm gonna set this equal to a math object we have inside inside JavaScript just like we have other types of objects we also have a math object that has a property called floor and again I'm going to explain all these properties and methods in the next knot the next with the next episode after that one because in the next one we're gonna do the styling for this game here parentheses this is not a property by the way this is a method semicolon inside the floor method we're going to run another math what you call another math object with a method so we're gonna say dot random parentheses because this is a method and we're gonna go and keep this one empty and then we're going to multiply with another math objects dots floor which again is a method and then we're going to insert a number into the floor were here we're going to insert two and again this is a very annoying way to get a random number generator because it should be a much simpler way to do it but this is how we can do it in JavaScript so far there might be a function or something in the future we can use but right now this is how we need to do it the reason I want to create a separate episode on it is because I know people will search for this inside Google or YouTube and I want to have a video that sort of explains how to get a random number between two numbers so that is going to be a separate episode just know that choose random enemy is going to choose a random number between one and zero right now so what we're going to do here is I'm going to run a console log because I want to actually see what exactly we get when we do run this specific random enemy number just to show you so I'm going to say we have a console dot log parenthesis and then I just want to insert twos random enemy again just to sort of show you what this method here does or what this long equation here does if it were to refresh choose the rogue for example and then go into my console log then if we were to click search for enemy because we don't run the set fight function until we click search for enemy when I click it you can see we get one if I click it again you can see you get one zero zero one zero zero and we get a bunch of random numbers between zero and one so it's going to randomly choose an enemy for us to use inside our game here so that is what that specific thing does that we just created and afterwards we're gonna go and create a switch and as you can see it just deleted my console log because we don't actually need it so I'm just gonna go and create another switch inside the parenthesis I'm going to say you want to depending on user andum enemy I want to run a specific case and I'm just gonna delete the t4 one because you don't need that in this example as well and the first case is going to be that it ends up being zero so if case is zero then it's going to choose enemy number zero up here so we're going to say that enemy is going to be equal to enemy zero now you might be asking what did we just do here well we just took the enemy variable from inside our enemy file as you can see in here we have the enemy object but we also have the enemy variable up here at the top and again this is the exact same thing we did with the player which is simply took the player variable and assigned it equals you to character the videos inside a file or inside the game here and we did the same thing for the enemy we have the enemy variable already created and now just simply assign it equal to one of the enemies to be chose up here so that's basic what we did here so now that we did the case 0 we can do case number 1 so if it ends up being one inside of here just choose one there we go you want to set enemy equal to enemy 1 which is the troll so we have the Goblin and the troll here so after we did this we'd need to change a couple of things because we also grab the header the actions and the enemies section now we need to take the information we have here and insert into the actual game inside our browser so after the switch I'm gonna jump down to the next line and then I'm gonna say 1 2 first of all change the header so just gonna say get header dot inner HTML it's at equal to some kind of HTML markup and again I'm just gonna sort of write this and explain it as I'm writing it because this is basic HTML the first part we need to do here is I want to change the header text so I'm going to say we have a paragraph could also just a copy from above if you wanted to make this faster and we're gonna say task is going to be choose your move so we can choose to attack and again I did originally originally plan to have a defend attack and dodge or something like that which is why I say choose your move well there's only one move we can choose from but this is how I decide to end up making the game because there's going to be a much too long episode to do the other thing afterwards here I'm going to say we want to get actions and then I want to say dot inner HTML and I do also think we can just copy from above here I'm just gonna go to the actions and I'm just gonna go and copy what we have there we go and paste it in here then inside of your only thing we're going to change it's going to be the text we have inside the anchor tag so I'm gonna say instead of search for enemy I'm gonna say attack it's amazing Mike and we're going to run a different object instead of game-manager this time because I do actually want to create a new object that we haven't created yet inside the player file that it's going to handle all the attacks and whatever the player might end up doing inside the game I think these are all related to the player which is why I decide to put them inside a inside the player file so we're going to say we have a optic called player moves so we're gonna say player moves dots and then a method called calc attack it's going to calculate the actual attack from the player here parentheses of course and then we need to change the get enemy section now again we will create the object and I think we'll do it in just a second we'll have to end up seeing how long this episode is going to be and we're also gonna go and create the method here so afterwards we're going to say we have a get enemy dot inner HTML there's going to be equal to some HTML markup and what this is going to be equal to is going to be equal to this sort of the same information we have with the play up here it's going to be an avatar it's going to be some stats it's going to be all the different things we also have for the player now I'm just going to copy it from my notes here and if you want to have the exact same thing just go ahead and pause the video and see what we have on the screen here if my FaceCam is in the way I will remove the FaceCam so you can see it just go and pause the video and write the exact same thing as I have here now I just need to point one thing out which is a right now you can see the text down here is actually white instead of red like it usually is with JavaScript code I did double check this many times there's nothing wrong here at least not from what I could tell if you find an error go ahead and fix it this code works the way it needs to work so I don't think there's anything wrong here I think it's my text editor that's messing up the text color here so if you can find an error that I missed then good for you change it but I can't see an arrow here and I don't know why it's tainting the color inside the text so what we're going to do now is afterwards actually done with their specific function or to specific method so what I'm going to do is I'm just going to test out what we have inside our game so I'm going to refresh the browser choose a character let's choose two mates this time actually let's choose the hunter and then you can see once I click search for an enemy we get a random enemy and we also have an attack button here and again this is all randomly generated if I were to go back do it again then you can see you get to troll this time so it's lucky and I got a one as the type of enemy that we wanted to get and the enemy changed so now what we want to do is we want to do something once I click attack because right now we don't actually have a method that we can run want to click attack okay so I just finished recording this game project episode and it's going to be a long episode if I have to include everything in one video at least in this part too so I'm going to make one more episode after this one that is going to be part three that is going to finish off the game project now I know it's not a lot of fun to have many episodes on one project on YouTube so to sort of make up for this I'm going to include the CSS file for this project in the description of this video for free not including patreon so it's going to be a direct link where you can download the file so you can style everything like I have in this episode or in this entire course here so I hope to see you guys in the next episode [Music] you [Music]

Channel: Dani Krossing

Views: 53,885

Keywords: how to create a simple game using javascript, create a game using javascript, game using javascript, javascript game, javascript game in browser, javascript game tutorial, javascript, javascript tutorial, js tutorial, js, javascript objects, javascript object constructors, learn javascript, mmtuts, javascript tutorial for beginners, javascript for beginners, javascript project, javascript exercise, javascript exercises for beginners, javascript projects for beginners, tutorial

Id: eYYYxrDkZbQ

Length: 45min 57sec (2757 seconds)

Published: Mon Jul 16 2018