Build A Speed Typing Game In JavaScript

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start a freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more so visit the link in the description below and use the code brad 25 to get 25% off hey what's going on guys in this project we're gonna build a speed typing application called word beater and we're gonna build it in pure JavaScript no libraries or frameworks or anything like that and it's pretty simple we just get a random word and you get a certain amount of seconds to type it in in this case we have it set to 5 okay but this is you can change this really easily and once you type it in if you if you make it in that amount of time you'll get a point add it to your score and you just keep going until you fumble up and you mess up and you don't do it in that amount of time and then the game's over and then if you want to play again you just simply type in the word that's shown so you can see I already played it got a score of 5 so if I go ahead and type in River the game will start again and now you can see the timer is counting down so basically it gives me five seconds for each word five seconds is pretty easy and some words will repeat because I only have about 30 in the array but let's say we mess up so we fumble up and we lose then it's going to be game over and you can see we have a score of 8 all right so pretty simple when you come to the page the game automatically starts you can see it starts the timer and it's auto focus so it puts you right in there and then of course if you want to play again you just put in the the word and it'll start again okay so pretty simple but I think it's a fun little project and what I'd like to do is kind of give a little homework assignment and I've done this in a couple videos but I haven't done it lately where you take this application and add on to it make it more interactive just try to make it better overall then what I'll do is I'll look at the URLs if you want to throw it up on like github pages or something and put the URL in the comments I'll go through them and in a couple weeks I'll announce a winner and I'll show your work on you know in a future video and I think it's a it's a good way to learn aside from just watching a tutorial and copying the code you can actually be creative and come up with your own stuff so some ideas would be maybe to have a high score and store it in local storage and have that show and change when you beat it maybe you could fetch random words from an API or use like a module or something like that because right now it's just static text or just a static array of like 30 words maybe you could make it so the user can select the difficulty so meaning the seconds because right now we have in the code an object of levels five is easy three seconds is medium and two is hard but maybe you could have the user have a select list to to change it themselves rather than hard coding it so those are just some ideas that I had but I'm sure that you guys can come up with some of your own but you know I know a lot of people don't have time but if you want if you want to submit a URL in the comments I will look at it it will come up as spam but I will accept it alright so let's go ahead and get started alright guys so I'm not going to type out the HTML I'm just gonna go over it real quick it's very simple very simple bootstrap layout and I have vyas code open we have an index.html with the mark-up and then a main.js file inside of a J's folder that's completely blank so this is where all of our code will go alright and I'm using a Visual Studio code extension called live server which you can get if you just click here and search for live server and install it and then you can simply just go open with live server and it'll open on your localhost and you have Auto refresh so as soon as you save your browser will refresh whether it's HTML or JavaScript so if I put an exclamation here after hello and save it'll just auto reload I don't have to hit the reload button okay so I would suggest but of course you don't need to you can just open it up on your file system all right so I'm going to close the sidebar up because we only have these two files and let's just go over this real quick so in the head I'm just including the bootstrap CDN I'm only using the CSS I'm not including the bootstrap javascript file or anything like that then we just have a body with BG dark class because I want the dark background we have a simple header with some background and padding we have a container everything is aligned to the center and then we have a row where we have a six column div basically everything is in the sixth column div and then we move it to the middle with MX auto ok so that adds margin Auto to the right and left which gives it a very narrow look so this paragraph here is this and notice that the number five is wrapped in a span that has an idea of seconds that's because we want to output whatever the the seconds are or whatever that the the time is in the Java Script so we're going to need to grab on to that in our Jas file then the h2 is the current word has the idea of current word we'll need to grab on to that obviously we need to we need to grab on to the input that has an ID of word input it also is auto focus which is really important so that it's the cursor goes right in there when you load the page we have an h4 with the idea of message that's right here that'll basically say either correct or game over if the game's over and then we just have two six column divs with the time and the score notice that the numbers here the zeroes have a span with the ID of time and this one has an ID of score because we're gonna need to manipulate those through JavaScript and then we just have some the instructions nothing dynamic down here it's just telling the user how to play the game and of course we're linking our JavaScript file so very very simple that's why I didn't want to type it all out you could copy it but I would suggest just going to the github page in the description and grabbing it there alright so let's jump over to our JavaScript and get started first thing I'm going to do is just create some global variables so we're gonna need a time variable so I'm gonna say let's time and I'm using let because this is going to actually change we're going to just set it to five for now and obviously it'll go you know five four three two one zero so we want to make sure we use let coz Const is for variables that you're not going to reassign so let's do that let's also create a score variable and score is obviously going to be set to zero at first then we also want a variable called is playing and I'm not going to set it to anything I'm just going to initialize it and basically this this just represents if the game is going on or not so once the game is over this should be false and as its as it's going on it should be true so I'm just gonna put a comment here let's just say Global's because these are global variables that we'll be using within within functions okay next thing I'm gonna do is put in our Dom element variables because we want to pluck stuff out from the Dom so I'm actually gonna paste that in because it's pretty much the same thing over and over just for different elements so we have the word input which is the text right here we have the current word which is the word that shows here the score display and the time display which are these two numbers message which is right here that'll show if it's correct or game over and then seconds is this right here this number because we want this to reflect whatever is gonna be here okay so we need to we need to grab on to those elements next thing I'm going to do is put the words array in okay we're just using a hard-coded array of words there's I don't know I think there's like 30 or something like that so it's just a variable called words and set to an array and you can change up the words if you want and next thing we want to do is have an init function so basically when the window loads I want an init function to fire off so I'm gonna go down here and let's say initialize game and will say function in it okay actually I don't I don't know why I put a space there I don't do that so let's just console dot log in it and I want this to fire off as I said when the window loads so I'm gonna go up to the top here you could do window load load I'm gonna do window dot add eventlistener and we're gonna listen for the load event and as soon as that happens we want to fire off in it okay so I'll save that let's open up our chrome tools and you can see that it's it's outputting an it okay which is good now there's a few things that's going to happen inside and knit the first thing that I want to put in here is I want to call a function to to load a word from the array basically a random word so let's put a comment here and let's say load word from array and we're gonna call that show word okay and then that's gonna take in the whole array of words so we need to create that function let's just say pick pick and show random word and we'll say function show word again it's going to take in words so which will be an array excuse me and the idea that we here is that we want to create a random index because we can access the words in the array by an index so 0 would be the first one that would be the second third and so on because arrays are zero-based so let's create a variable called R and index to create a random index and we're gonna use math dot floor to round down and then math math dot random to generate a random number and then we want to multiply this we want to multiply this by however many words there are in the array so we can take the words array and we can get the number of words with length okay so the length property will give us that so that'll give us basically a random number so we want to use that as an index and then we want to output the word here okay so actually let me put a put a comment here I'll say generate and array index I'm gonna have a lot of comments here just so people know exactly what's going on then here we want to output a random word so we can do that by taking the current word variable remember that was defined up here so it's defined to the ID of current word which is this h2 okay so we want to take that and then we want to do dot innerhtml because that will allow us to fill fill stuff into that element and we want to put in words which is the array and then a random index okay so it's R an index like that okay so let me save this and there we go we get a random word from the array and every time I reload we're gonna get a new word and they might repeat because it is just random and you could get the same one twice in a row but that's that's how it is and if you had more words whether it's here or whether you find some kind of API or something the more words the better okay so that's the show word that's the first thing I want to do in the anit let's see the next thing I want to do is the the countdown okay so we want this timer to count down from whatever we put here in this case five so let's see we're gonna say call countdown every second so to repeat something we can use a JavaScript function called set interval and we can pass in a function I'm going to pass in a function called countdown which we haven't created yet and I want to run every second so this is milliseconds so a thousand milliseconds is one second and then we're going to create that function I'll say countdown timer so function countdown okay now this again this will run every second so we want to first make sure that the time is not run out so let's say check or we'll say make sure time is not run out and we do that by and I'm I might remove these comments in the repository I'm not sure but I just want you guys to know exactly what's going on so let's say if time is greater than zero if time is greater than zero then we know the time hasn't run out what we want to do then is is decrement the time or decrease the time so how you say that decrement I know is increment but so to do that we do time just like with increment we can do plus plus we're gonna do - - which will just take one away from it okay then we just want to do an else if and we want to check to see if the time is equal to zero so we'll say time triple equals zero and if it is equal to zero then the game is over right so we want to set is playing to false because we're no longer playing okay and then the last thing we want to do in countdown is output the time okay each time this runs we want the time to output so in which you go four three two one and so on so under the if statement let's say show time and we'll say time display that's the the Dom object that we grabbed right here okay which is the number and then we're just going to say dot innerhtml and set it to whatever the time is okay now if I save this it should start to count down and there we go okay and it just ends at zero so the next thing we want to do is we want to do another function inside of an interval to check the status of the game so check game status basically see if it's still being played or if or if the game is over so I'm going to say set interval and this is going to be very often it's going to be every 50 milliseconds which is very very quick so let's say check status and let's set it to 50 and then we'll create that function down here so check game status oops okay now in here we just want to do one thing we want to do an if statement well we'll actually want to check for two things we want to check to see if not is playing if that's false and we want to check if time is equal to zero if that's true then that means obviously the game is over so we want to take the message and we want to output so innerhtml and we want to output the text game over like that so let's save that and as soon as this runs out we get game over all right so up to this point we have the functionality of this changing the timer counting down and then game over when it's over so let's see what do we want to do next let's start to work on when we actually type something in here so in the init I'm gonna go under show words are show word and let's say start matching on input on word input so every time we type whenever we type something in here we want to fire off an event which will fire off a function so let's take the word input and let's say add event listener we want to listen for any input and then when that happens we want to run a function and we'll call it start match okay so we'll go right under here start match so function start match now we're gonna have another function that is dedicated to matching this to whatever the user types in so I'm gonna call that will call that match words and that's going to either return true or false so right under this will save it's gonna match the current word to the word input all right so let's say function match words it's not gonna take in anything because we're getting this stuff from these Dom elements up here we have word input and current word so let's see all right so let's do and if and we want to match the word input now word input is a text a text area not a text area but a text input so just word input will give us the element itself we want what's typed in here we want this value so in order to get that we need to do dot value all right and we want to basically match that against the current word but the current word again is going to be the element which is an h2 with a class and all that we just want this the word inside so we want the innerhtml okay so we want to match those now if those match then let's take the message and let's do enter HTML equals and let's say correct okay because it's correct and then we also want to return true else then we'll say message dot innerhtml equals nothing and we'll say return false okay so save that and now let's go back oh I put this in the wrong area guys I'm sorry this this is the match words function so so we want to take this this if else that I just did and we want this in the match words okay and then this will give us either true or false based on if those match so let's just do a console dot log here and I'll say match so now what should happen is as soon as I as soon as I type in the word that matches we should see a console log okay so I'm going to just reload and say laughter and there goes match and we get correct here as well so I guess I didn't really have to do the console log but so what we want to happen now if this matches is we want to set the variable is playing to true it's the first thing we want to do we want to set the time and we're actually going to set the time to six because of the page load which takes a second so we want to set this we just want to set this to one above whatever the initial time is and later on we're going to change this up a little because we're gonna make the time a little more dynamic but for now we're just gonna set this to six okay and then we want to show a new word obviously to type so it's a show word and we'll pass in words and then we also want to clear the input because as you can see that the text is still in there so we want to take the word input and we want to say dot value and set it equal to nothing and the last thing we want to do is increment the score so we'll say score plus plus which will increment it by 1 now that's all well and good the score will be incremented but it's not going to reflect in the Dom we have to do that so let's go outside of this if and let's say score display which is what we set that Dom element to and then dot in our HTML and set it to whatever the score is all right so now if I save you can see now my score is going to improve with each one that I get correct okay there's three now I'm gonna let the time run out so that I lose game over and remember to start a new game all we do is type the word in now when I start to type the game doesn't start until the word is typed in okay so run away and as soon as I put that Y in the timer starts again right so statue oops statue again but notice my score never reset it's still at six or it's at six because I just added to it so we want to go down to check status and if the game is over we want to reset the score now you would think we'd set it to zero but if I do that let's first test it out make sure that so magic magic let's make sure that the score resets okay so if we lose as soon as I start to type the score should reset so I'll start to tight and there it goes down to zero now the issue with this is that you can take as long as you want to restart the game as long it doesn't start until you put the full word in right so let's say cocktail now once I put it in look at the score goes to one and I don't think that that's very fair because you have all the time in the world to type that first word in because that's what starts the restarts the game so we don't we shouldn't get a point for that so what I'm gonna do is I'm going to set this score to negative instead of zero that way the first one I put in because once I lose let me just let it run out once I lose I can take forever to type in siblings for the game to start and then that didn't come but also notice that when I start typing the score shows negative one and we don't want that so to fix that we're gonna go up to start match and in start match we're gonna go right here so we're just showing the score but we want to do an if statement saying if the score is negative one then display zero so that's pretty easy we're just gonna say let's put a comment here we'll say if score is negative negative one display zero okay this is gonna be an if-else and I'll just move this up here and let's say if the score is equal to negative one then let's actually copy this and just change this to zero that way it doesn't actually show negative one so let's just lose on purpose and then the first word we type shouldn't give us a point ok now I'll start to type score goes to zero and I can take forever to type an echo to start the game so when I type in echo the first time no score I don't get a point for that however the next one I do okay hopefully that makes sense there we go okay so that should be good I think that or just about there now this actually hold on a second all right so right now we just have the time set hard-coded to five what I'd like to do is have an object of different levels and then have the number of seconds pertain to those levels so let's go right here and let's say available levels we'll just create an object called levels set that to an object and we'll have easi which will be five we'll have medium which will be three and hard which will be two okay now we also want to have a variable for to change the level so we'll say to change level Const current level equals levels and it's an object so we'll say levels dot easy I'll set it to that which will be five okay and the time we don't want to hard code it to five because if we set this to like medium or hard we want it so we just want this to equal the current level like that all right and then down here when we do the reset where is it or you actually caught we hard-coded it to six right here it's not gonna make sense if we choose medium or hard because those are those aren't going to be five so this needs to be just one more than what the current level is so what we can do is just say current level plus one that should make it more dynamic and pretty sure that's it okay so what I'm gonna do now is change the level to medium and save we'll say hero and if you look at the time oops I lost alright so let's start over to start a new game will say cocktail and notice it's starting at three okay if we set it to hard if you look at the time left hard maybe we should actually set hard to one second yeah I should probably set hard to one but you get the point so that's pretty much it guys we have the game it's working oh one last thing this should reflect whatever level it's on whatever seconds right now it's on hard so this should actually be a 1 so that's pretty easy we'll just do this in the in it so let's go to we'll just do it right at the top here and we'll say show number of seconds or yes in UI so to do that we'll take the second variable and say innerhtml equals and we want to set it to the current level save and you can see type the given word within one second okay cool so I'm just going to set it back to easy but that's it now like I said there's a lot that you could do here and you might you might find a bug or two yeah this is something that I created very quickly it's a very simple game but yeah you could add to this I think one of the the best things you could do is have the user choose the level and you could put a select list add a an event listener to it and then have it change the level you could implement local storage so you could you could keep the high-score inside of a value you could do local storage dot set item high score and then set it and then local storage dot get item to get it and whenever a game is finished you could match the score to the local storage and if it's higher than replace it and of course you could do stuff with the words if you want to fetch them from an API or something like that you could and you could make the the UX better you could maybe make the game over red or make the the border around the input red when the game's over but you just have to make sure you reset it when the game starts again or it'll just stay red so things like that or if you wanted to recreate the the application and react or view or something like that you could do that as well and I'll take a look at that but that's going to be it guys hopefully you enjoyed this little project and I will see you next time hey guys one of the best if not the best resource I can refer you to for starting a freelance business is that study web development comm slash freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get one hundred and thirty page guide to freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 86,661

Keywords: javascript, javascript tutorial, javascript game, beginner javascript

Id: Yw-SYSG-028

Length: 32min 37sec (1957 seconds)

Published: Mon Aug 06 2018

Reddit Comments

[u/terabyter9000]

Looks really cool. I will be doing it as soon as I'm done with my freeCodeCamp JavaScript video.