The Easiest Javascript Game Ever

what's up guys next week is here coming at you again with another JavaScript video and this one I'm gonna be showing you how to create the most simple JavaScript game possible you know when you try to use a website for your internet it's not connected and you start playing that game with the dinosaur and the cactuses where you just jump over the cactuses I'm gonna be showing you how to create that game only using HTML divs it's very simple it uses like 10 lines of JavaScript so I think this is a good tutorial for people who are trying to get into JavaScript game development even if you've never really coded before you can follow along and create something pretty cool so I don't really have anything else to say other than leave a like on this video let's get into it alright so we just start with a blank text editor here I'm just gonna create our three files and so we go to our index file and we just create a basic HTML layout and then link our stylesheet and link our JavaScript file alright now that all three of our files are linked together we're ready to start so on our HTML page we're just going to start by creating three divs the first dibs just going to be our game so it's gonna be the whole entire game everything's gonna be inside of this div and then we need two divs our character and the block so we'll create our character and the block and that's it for the HTML really simple so now we go to our style file I'm just gonna start by creating some basic styling basically every single time I create a new CSS file I add these Styles just to get rid of the basic browser padding and margins it's a lot nicer just to start from zero so I'm gonna start with the game div and we're just gonna add some styles so that we can see it all right and now when I load up our file we can see our black box that we created now I'm going to create our character now our character is there but it's at the top we want it to be at the bottom of the box so we're going to give it a position:relative so we can move it and then give it a top 150 because the box is 200 pixels our character is 50 pixels so we need to put it down 150 so that it's at the very bottom all right now we can move on to our block and we're going to do the same thing just to push it down and go all the way to the right all right so now our blocks in the correct position our characters in the correct position and now we basically just want our block to slide towards our character so we need to create an animation and then add our animation to the block so now we have our animation but it's only running once so I'm just gonna add infinite to it and now it'll just keep running over and over and I'm gonna have been here just so it goes evenly and doesn't like zip across you know so now we have our block going across we also want to create an animation for our character to jump we're going to create another keyframes [Music] something like that we're at 50% it goes up to there and then goes back to where it was it basically just jumps from trial and error I know that this would look a lot better if I just do it with 30 and 70 so that it jumps up hovers a little bit and then goes down because if it just goes up and down it doesn't really work long enough for the game so you want it to jump stay for a little bit and then come down so now I'm going to add the animation to our character and so our character is now jumping actually gonna change that to 500 milliseconds and that looks pretty good and so now that our character is jumping we don't want it to just constantly be jumping we want it to jump when we call a javascript function so what I'm gonna do is create a new class called animate and all that class does is add the animation jump so I'm gonna run up JavaScript function that adds that class to the character so that it jumps and then it removes that class of it stops and so I don't want it to be infinite actually so now I can go to our JavaScript file and just create two variables so we can access our character and block now we're going to create our function jump so we'll just access our character grab its class list and add to it animate and so we want to run this function and it's actually not gonna run yet so we need to go back to our index just go up to the HTML and add an on-click we could also use an event listener I just prefer to use on clicks honestly it makes a lot of sense so now if we go to our game we should be able to click and our character jumps the problem is I clicked it added the animation the animation ran once I can't re add the same class twice so what I need to do is remove the class once we're done running the animation so here I'm going to set an interval and I'm going to run a function and I'm going to do it after five hundred milliseconds because that's how long the animation takes so after five hundred milliseconds the animation is done remove the animation class so we do that the exact same way as we add the class except for we just change add to remove all right so we grab the character and so now we can jump and jump again and jump again and jump again and jump and jump and jump the problem is if we spam it and jump jump jump jump jump jump jump it'll just keep adding the class over and over again so we only want to add the class animate if it hasn't already been added all right so now we have our character up and down all we have to do is add the hit detection to detect if they're on top of each other if they are then that means you lose right so we're going to create a function that runs every 10 milliseconds and it just checks whether or not you've lost or not all right so the first thing I want to do inside this function is get the top position of the character and the left position of the block so we get the top position of the character by doing this all right and so we're just gonna set that to the variable character top that's not right and we're actually gonna parse it as an int and that's because what was there before would return the top position with px at the end and we only want the number so we parse it to an int and so that's going to return the top position of the character if you don't totally understand what that's doing basically the top position of the character right now is at 150 and then when I click it it goes up to a hundred and then it goes back to 50 and so every single time it evaluates this function it the top position will be able behind and then go back and go up and then down so basically we're calculating the top position and then we're gonna calculate the left position of the block and then compare them against each other to see if they're inside of each other and that means they're hitting each other so just copy this a second time and change character top to block left and then change what we're getting the style of to the block and change the property that we're getting to left and so now we want to create an if statement something like this we go if block left if block left is less than 20 meaning it's on this side of the red and we do an and block left is greater than zero so it's in between 0 and 20 which the left position 0 and 20 would be directly under the red character so if those two conditions are met and the character top is greater than or equal to 130 meaning that they have jumped less than 20 pixels so they haven't jumped over the entire block so if all three of those conditions are met then that means that the two blocks are hitting each other and that means you lose so we'll just create a little alert that says you lose we also just want to remove the animation for the block or else it's just gonna it's gonna keep going across and that's not what we want so we're going to go block style animation equals none and we'll actually just go style display equal none and so you just don't see anymore that's how we can jump jump I'm not gonna jump we lose see there you go and then you just click OK and nothing really happens you have to reload and you go again that's pretty much it hopefully you guys learned something from this video if you gave it a try then leave your link below and I'll check it out I'd love to see it if you're interested in more videos like this then leave a comment down below and like this video thank you so much for watching and I'll see you guys in my next one bye

Channel: KnifeCircus

Views: 955,055

Keywords: Javascript, Game, javascript tutorial, javascript for beginners, javascript basics, javascript course, javascript programming, learn javascript, programming tutorial, javascript beginners, web development, front end, javascript game development, game development, game development tutorial, game dev, game development in javascript, javascript games, game development for beginners, html, chrome dino game, google dinosaur game, simple javascript, beginner javascript

Id: bG2BmmYr9NQ

Length: 8min 33sec (513 seconds)

Published: Sat May 16 2020