Code Mario in JavaScript with Kaboom.js!

hey everyone and welcome to this tutorial in which i'm going to show you how to build mario using javascript but more specifically a javascript library designed especially to make javascript game development a whole lot easier i'm talking about kabum js now if you watch free code camp you would have seen i've actually made a course a kaboom js in it i also make a game of mario however it is made in the replit environment um if you haven't seen the replica environment it is a replica it is an environment uh that actually has been pre-configured for kaboom and it has some really cool features like you can make the sprites directly in the ide so you can literally draw them uh and some other cool stuff too however for this tutorial i'm going to be showing you how to use kaboom j as completely from scratch in your code editor of choice so for this video i'm going to be using uh vs code uh even though that might be changing soon uh so yeah let's do it i hope you're ready by the end of the tutorial you will have a game that looks like this we are only gonna be building two levels uh because i do think that once you have two you really do have the knowledge to go on and go forth and make as many as you wish so what are we waiting for as always please do give me that like and that sub as this really is the way that i can carry on to create more content for everyone here so let's do it okay now it's time to build some mario once again in this game we're going to have two levels so let's get to it once you have the knowledge to build these two levels you are more than free to carry on and keep creating more and more levels for your mario game or any game that you wish so let's get started i have started by just making an index.html and game.js file so the index.html file just has some standard boilerplate please feel free to take this we have the title and that's really uh going to show up in the tab of our browser um we are going to head over to kaboom and just grab this script right here so this one like so and just paste it at the bottom of our file we next need to link the javascript file so the games.js file now we could in theory so similarly to here just have two script tags so one script tag like so and then put all of our kaboom js code in here or we could just link directly to the game.js file to keep our javascript separate so it's up to you i'm gonna choose to keep it separate so i'm just going to link it by getting the file name like so as it's in the root of my project i just have to grab the file name great let's carry on before we move on i can actually apply some styling in here so this is the equivalent for those of you who know about css this is the equivalent of me just doing a style in here and i just want the body itself to have a margin of zero to get rid of the white border and i'm also going to prevent it from scrolling by putting overflow hidden okay so there we go that's just a tiny bit of styling i'm not gonna start my own style sheet for it because it is just that but of course if you'd rather do that that is totally up to you oops we need to put that in the header so good thing that i noticed that let's put that in the header okay i'm just gonna format this a little bit nicer before we move on cool so now let's head over to our game.js file and this is where the magic is going to happen okay we're going to initialize kaboom just like so we're going to get our curly braces i'm going to put global as true and then i'm going to put full screen as true as well like so and give it a scale of one and put debug as true so we can see when something goes wrong and try and debug it great the next thing we want to do is add our game scenes so i'm going to use scene like so let's call it game and i'm going to pass it through a level and a score but for now i'm not going to i'm just going to leave it like that and then let's start okay so let's go control copy path and just post it in our browser just like so now let's just make the background black so this will give me blue actually so if i refresh this that will be blue and if i want it to be black that will give me a black background like so okay so now let's carry on the next thing i want to do is uh start off with some layers and these layers so let's get on an array i'm gonna have a background let's also have the object layer as a default and then the ui layer and because it's a default i just need to put object here like so now let's get to drawing out our maps so for that we're gonna have to you guessed it load in some sprites so just up here is where i'm gonna be doing that load sprite and let's get to it so let's move over to our imager page this is where i'm going to store all my images you are more than welcome to take them of course if you want to please feel free to also make your own that is half the fun so let's go ahead and find a coin so here are my mario brothers brothers ones that is the coin i made these ones a bit smaller just because the game is a bit bigger so these are going to be 20 by 20 pixels each but i'm going to show you how you can scale it up if you wish so let's do load sprite uh let's do coin and let's just get i'm going to make this the route so delete that and just use this like so and we can load the route so essentially that is the whole path i'm loading the root and then we have this little uh extra bit to get to our coin so we've got a coin what else do we need um well we need an evil shroom for sure so let's get an evil shroom there we go let's get shareable link let's copy that and i'm just going to paste it here like so there we go we've got our evil shroom let's load sprite uh this time let's get a brick let's find a brick so here we go get shareable links i'm going to copy that i'm just simply going to paste it like so we've got our brick now let's get a block so once again let's find our blocks this is a block a shareable link copy that and just paste it in here let's get mario so once again let's find our little mario get shareable link copy just paste it in here there we go we've got a mario now let's get a mushroom copy the link paste in the link for a mushroom now let's get a surprise block surprise let's also have an unboxed so i'm just gonna do a few of these now like an unboxed block and then i'm just gonna have pipe top left pipe top right pipe bottom left and pipe bottom right okay great so let's go and get this now we need the surprise it's this one get a shareable link copy just paste that in here now let's get the unboxed so once again i'm gonna get shareable link copy paste that in here let's get the pipe top left get shareable link copy paste that here let's get the pipe top right so that is this one get shareable link copy let's get the pipe bottom left which is this one get shareable link copy oops do that again copy paste and get the pipe bottom right control link and fantastic we are now ready to start making our board so i'm just gonna make this smaller as we don't really need it for now okay so now let's actually create our game board i'm going to call it a map like so and i am just simply going to create a map so let's make it one let's make a few of these and then let's maybe start with the bottom one first so i'm just going to go like this and then let's have the floor a few of these and then let's have like a way that you can fall down and i'm just going to space these out so essentially these equal signs are going to equal the bottom of my um game and these are going to be the constraints of my game and then let's just put some commas here this will all make sense in a bit of course if you've watched the zelda tutorial then you already know what is happening here now i need to actually assign this equal sign a sprite so let's do that here once again just like we did in zelda i'm going to say level config and let's open up some curly braces like so and then let's say that every sprite on my board is going to have a width of 20 pixels and a height of 20 pixels now let's define each object as a list of components so we already know we've got an equal sign on there and i want my equal sign to essentially be the sprite of block so you'll recognize the block from above here we go the block that we imported for us to use in our javascript file and then let's make it solid so we need to write solid like so and let's add it to the game level so const game level equals ad level that is a kaboom method and then let's just pass through the uh first level so let's pass through the map and then the level config great so now if we go back here and refresh there we go there is our mario game started even though this isn't the one i wanted let's change block to this one right here so get shareable link copy that and i'm just going to remove block and change it because that is the unboxed one that i got wrong um i want this to be a block that looks like this instead please so now let's go back to here and there we go that is looking great we can of course zoom in if we think this is too small or i can use scale to in order to make everything bigger okay so it's totally up to you how you would like to do that i'll keep it like this for now but i might make it a little bit smaller as we carry on coding so we've got the bottom blocks what else do we want to add well let's make the uh dollar sign let's make this a coin i think that should be fun so let's make the coin two three around here we'll put a little coin here and then let's perhaps also have some more blocks up here so i want to block up here and then i also want a mushroom here so i think that's what i wanted a mushroom and then another block and then let's make another coin here and then another block and then i'm also gonna have some evil shrooms so on the bottom level i'm going to have a shroom here and a little shroom just right here great now while i'm at it i'm also going to have my uh pipe here so that is going to be the bottom of the pipe and i'm also going to have the top of the pipe like so okay so now let's actually tie this up so it looks more like a grid and now let's start assigning values to all of these so sprite we said this one we want this to be a coin um so that looks good i don't want to make the coin solid let's also we wanted this to be a surprise block so sprite surprise and this surprise is gonna have a coin so let's make this solid like so and then let's call this coin so price cool so we've got a coin surprise let's have another surprise and this time this is going to be a mushroom surprise so like so and then just call this give the tag of mush room surprise okay next let's have an unboxed so i'm just going to add the unboxed for now even though we won't use it yet um so sprite unboxed like so and then also let's make it solid what else do we need is the pipes so [Music] let's make this pipe left make it solid and then pipe right solid again and then let's have pipe top left because that's what i've called it pipe top left and then bottom left pipe bottom right and then we also need pipe top right so let's do that here pipe top right and let's see how that looks so now refresh and there we go now these are looking a bit big so i can also scale that in here i could use scale 0.5 to make sure that they are the same size as everything else in our game so that is just another trick if something is too big for your game okay you can do any scaling of images right in here so there we go cool i think the last thing we need to do is add some evil mushrooms before we start adding pacman um so let's go ahead and do that the evil mushrooms well i said they were this on our game board this little hat so let's put evil what do we call lit evil shroom let's make it solid and we don't want to scale it as we are happy with it as it is and then i'm actually also going to add a mushroom for now even though you won't see it on here let's make the mushroom for the future a hash tag like so and just say mush okay cute okay so i think the next thing for us to do now is to go about adding mario so const player and i'm going to use the kaboom method of add i'm going to open up our array i'm going to use sprite to add mario to um our game board so i've assigned this all to the const player so we can use it in our javascript later on so there we go and now i want to actually give it a position on our board so at like a starting position so i'm just going to do pause and then pass through 30 and 0 like so now i actually could make mario for gravity just by passing through body like this okay and i'm gonna do origin bot as well just to get rid of any funny things when we use body so just make sure to do that so there he goes he is falling onto the blocks because the blocks are solid so stopped so whoo there we go now let's actually make our pac-man move by attaching him to keyboard events so i'm going to go back here and actually perhaps let's add these score first so let's do that so i am going to add the score like this i am simply going to use add to add some text so let's um just use whatever the score is as the text and then let's position it on our grid so i'm going to position it in the left hand corner and then i'm going to add it to the ui layer okay because we have stuff this is the everything at the moment is on the object layer as the default this is the first time i'm actually using the layers and i want to add this to the ui layer okay so it's not going to interfere with anything that's happening in our game essentially and the next thing i want to do is just add a value of score cool i'm actually going to save this as something so let's save this as a score label so we can pass it on to the uh next levels as well like so cool and i'm also going to add some text uh so let's do add add text just so we can see what level we are actually on it doesn't really matter for now because we don't have any levels we just have the one so i'm just going to put tests like so and give it a position of again just put it close to the score is not defined oops i knew that so um for now i'm just going to put test again test okay so there we go that's all i have done for now great now the next thing i said i want to do is actually attach event listeners to our player so let's do it okay so for this i'm going to use key down so that is a kaboom method key down and then if i press the left so the keyboard with the left arrow on my keyboard well i want this to happen so let's write a function so we pass through the first parameter is left for the left arrow on our keyboard and the second parameter is a function and that is what we want to happen essentially if we press left i'm going to grab the player i'm going to use move to move our player at a speed so let's just space we want the speed to be 120 that is the x-axis as the y-axis i can even say this as const move speed just to make our lives easier so i'm going to put move speed and of course because we're going left i'm going to put a minus so if i do the same for key down right and get rid of the minus we should be able to move right and left and while we're here i'm just going to do jumping as well so let's do key press this time and then space so whenever i press the space bar and what do i want to happen well let's write a function so if this time because we do use the body component i can use if player is grounded like so and only if the player is grounded well then we can make the player jump and let's have a jump force so const jump force um i'm just going to make this 10 for now and i'm actually going to move this up to the top of our file because it makes sense too so i'm going to put it up here and click save now let's see so i can go left i can go right and if i press space bar oh well nothing happens i actually think our junk force is too small so let's just do 360. there we go so just enough to jump but not enough to jump onto the next one without getting big let's solve how to do that next okay so i'm actually just gonna do it up here write a function big there's a timer here as well um and currently let is big it's gonna be false i'm going to return updates if is big well i want timer and this is delta time this is a kaboom method once again if i show you what that is it is the delta time since the last frame and if timer is smaller than or equal to zero so if our times run out we wanna make mario small again so if we had a pass through this as a component onto mario this should apply all of this to mario or in fact any um sprite that we wish so [Music] it's big return it's big and then small lithify this scale equals vac one timer equals zero and then put is big back to false okay so we've got smaller phi now we need bigger five big five and well you guessed it it's basically all of this but we need to make him bigger um so let's make it by two timer equals new time and as big is true and whatever we pass through into big phi is going to be the time okay so now that i have that i'm just gonna like i said put the component on mario like so so i'm literally just grabbing what we wrote and putting it on mario okay cool now what do we want next i think let's actually get some mushrooms sprouting so let's go ahead and do that now so right under here um i want to grow a mushroom so we're going to grab the player and if the player head bumps um i'm gonna pass through an object if the object that he head bumps so if object is coin sir prize so anything with the tag of coin surprise well then i'm gonna grab the game level and i'm going to spawn i want to spawn a coin because it's a coin surprise he's bumping something with a surprise but it's got the tag coin surprise so we want a coin to show up so let's spawn a corn coin spawn a coin um and then let's put the coin next so we're gonna grab the object that we just bumped heads with and then we're gonna put the coin above it so this is how you would do that and then i'm gonna destroy the actual object that we head bumped with like so okay so that is it let's try that so this is this has got the tag coin surprise i think so anyway oh there we go that one did cool so great the we destroyed the object and we've got a coin spawning now i actually want to add the unboxed uh sprite so once again i'm going to grab the game level and use spawn but this time to spawn something else i want to spawn the unboxed and make it a grid position just zero so uh i guess to replace the block that we got rid of so it's cool right okay and then we also need one for the mushroom so i'm just gonna copy this if object is mushroom surprise well you've guessed it let's spawn a mushroom so spawn a mushroom destroy the objects and also change it to unboxed so now [Music] cool now let's make the mushroom move so let's do that now i am going to use action for this so i'm going to grab anything with a tag of mushroom um just make sure that it has a tag of mushroom first and i'm also going to give it actually let's do that later i'll show you why so i'm going to grab anything with the tag of mushroom and the pastry m for mushroom and i want to grab the mushroom and remove that mushroom and i'm going to move that mushroom uh around the y-axis 10. okay so it's going to go to the right 10. so now there we go so it's moving our mushroom is moving it's moving and you'd expect it to drop but it just carries on going because we need to add gravity so i can do that by just adding body here okay so i've added the body component so now boom it's moving it's moving it's moving it's moving and cool so now i want um mario to grow if he eats the mushroom so i'm just gonna do that below here i reckon uh let's grab the player and if the player collides i'm gonna use the could be a method of collides with a mushroom let's pass m for mushroom again i'm gonna destroy the mushroom so destroy m for mushroom and i need to biggify the place i'm gonna grab player and then we wrote bigger fire member and we also passed away times whatever i passed through into here that's how long it's gonna be big four so let's say six seconds okay so let's do that i also when i'm here i'm just going to grab the player and play a collides with a coin so anything with the tag of coin just make sure yeah let's give this a coin tag and play a college with a coin so let's pass through c for coin well i want to destroy the coin yeah that's right destroy the coin um but then we also want to grab the score score label score liable um and just increase the value by once use the increment operator and then also display it for us right so score label text equals score label value okay let's check it out [Music] so there we go oh yes not a number fine that's because um we need to fix what we wrote before and let's just check that he gets bigger oh okay so mario does get bigger i also want him to jump higher if he gets bigger so we can get on the next level so let's do that okay so we've got a jump force i also want a something that is this needs to be a let as we're going to change it a current jump force and for now that is just going to be the jump force okay but we're going to change that and i want a big jump force a constant big jump force and let's make the big jump force 550. i'm just gonna move that just it's meter great um and do let no this is fine for now okay so when he gets bigger let's get the current jump force is big if is big then i want the current jump force to be big jump force actually we should do this here so if smallify and then it's a smaller five we just want the jump force the bigger five we want the big jump force so let's try that again let's make the mushroom move faster because i think it's moving a bit slowly for me for my liking for now especially when we're building the game we can just move it back to whatever we want later okay so now okay no no he's not very jumping okay so that's not right what did i do here let's have a look at this again okay i am actually gonna move this back up here see if that works so once again just get the mushroom hmm why is it not changing ah that's because we need it to jump at the current jump force okay because we're changing the current jump force that is our changing variable um we just had this standard junk force before so let's see it now okay and that is much better and there we go great let's carry on okay let's make our little guys move so here if a player collides with anything with the tag dangerous well whatever is dangerous let's pass that into our function um and let's do we'll go to a loose scene shall we so go to a loose scene and let's just pass through these score so we can see what the final score is like so so now we need to actually write a loose scene so let's make it outside of this scene scene lose and i'm going to pass through the destruction score like so add text sorry add text so we open up the array we add the text score then we get origin we can make it center center so i'm just going to use center and then i'm going to put position um get the width divide by 2 and then also the height so height and divide by two okay so if we collide with one of them we lose let's actually make them move as well so we need to actually assign a dangerous tag to the evil mushroom so let's do that now so if we collide with them we go to the lose scene great let's actually make them move however so action and i grab anything with the din duress tag and i'm just going to move it so d move and we do we have an enemy speed let's just move them 20. um we want to go left there so minus 20 let's put const enemy speed 20 minus 20. okay cool so now if we collide there we go you go to the losing scene it's saying tests because we need to change this to be the score this is going to be the score and let's just leave the level for now because our score is not defined because we did not pass it through into the game score zero we're going to start off with the score of being zero and then we also need to pass it into the game itself so score there we go so now let's get one point and then let's show that one point where we die brilliant we are doing well um we also want to kill them if we jump on them so let's do that now i'm gonna put const is jumping is true now if player is grounded then we want is jumping to be true as we apply the jump and then let's also [Music] do it here get the player um and then i'm just going to check that if the player so if player is grounded again at any time if the player is grounded then we want is jumping to be false okay now let's go to dealing with the collisions so if it collides but actually if the player is jumping then we destroy the dangerous thing but if it's not jumping then we lose so that makes sense else there we go cool and i think another thing we can do let's have full death because obviously if he falls down in here then simon's a constant variable ah that shouldn't be const my fault this is violet okay so now let's actually tackle the death um death form so let's just put something uh let's call it fall death actually we'll call it whatever we want and the full depth is going to be 400. okay great now if the player falls down in here we want it to be a game over so i'm just gonna do that where should we do it let's do it here we can do it wherever we want i'm gonna choose to put it here so action runs every frame second by the way so that is why it's a handy one to use we're essentially checking something every frame second um inside the camera position to be the player position at all times so that is something cool we can do now if player position y is greater than or equal to full death well then we go to the loose scene so go to the lose scene and then take the score with you score label value so let's try it out shall we refresh so now you can see the camera's actually following the user which is quite cool as well and edge okay so we did the camera movement thanks to camera position player position just so you know i think that is quite cool now the next thing you want to do is go to the next level so let's do that so right in here i'm going to do if the player collides with anything with the pipe tag well then what do i want to happen let's write our function and find out um if it collides with that and the key press and i press key press down so you can do key down you can do key press that part is totally up to you whichever one you prefer the key down is literally pressing down and a key presses just a key press on your key board so if i key press down well then i want to go to the next level go game um and then i need to pass through the score with me so i'm simply going to do like a label like that value of course and i also want to pass through the next level so um let's put level and i'm just going to get whatever the level is plus one okay so that is how i would do that so that means again that i need to start off with the level of the game being zero and then i need to pass that through into the current game so i'm gonna go level and score so now we have passed through zero to the first level of the game our first level is zero so now if i want to show that here well i could just put level but then it'll say level zero and that doesn't make sense i'd rather it's a level one just for the viewer and i'm just going to put this in a pass in to make sure that it's in number two so let's try that let's refresh oh why is it not showing add text level oops there we go okay so there we go level one it's sort of overlapping so maybe let's do some moving around um let's see if that's better okay so we've got zero points and we're level one we're actually level zero because we password one to the viewer it says level one um and then if we go to the next level well obviously there is no next level at the moment uh destroy is not defined i've obviously misspelled destroy somewhere okay so now let's go destroy destroy if i go here and i press down well there's currently no level to go to but we also need to put tags on the pipe top left so i'm going to put the pipe tag i'm also going to pipe tag on here so it only affects the top two pipes and let's try it again go down and at the moment it's just taking me to the same level but that is because we need to write a new level so let's do that now okay so and then when we have one map let's have maps and make this an array of maps so we're going to have two levels for now please of course feel free to add all your own levels um add as many as you wish for now we're just gonna have the two so there's our first map which means when i'm adding levels i'm gonna get the maps array and then pass through whatever level it is so as we know the first level is zero which means i'm going to go into the array and get the first item from my array because we've passed through a zero into array that's what happens okay so that's a bit of array work for you from javascript so here is my first map let's create our second so at the moment they look the same but i'm just gonna load in some more sprites so just like we did here i'm gonna load in some blue sprites this time to make the next level so i'm gonna call this blue block i'm gonna have blue brick i'm gonna have blue steel and i'm gonna have blue evil shroom and i'm also gonna have a blue sir price and once again i'm gonna go to my imager and find them so here is my blue block this is gonna be interesting because they are different sizes so i'm going to show you how to do that that is my blue block delete that was that my blue brick um maybe that's a brick this looks like a blue steel from funeral zoolander um it's not the same blue steel sadly so that is my blue steel here is my blue evil shroom this must be which one would this be hmm blue brick yeah that makes sense that's my blue brick and then we just need the blue surprise so i'm going to get sharp or link copy that and then just paste it here and we are lucky because most of the logic has already been done for us so that is really handy um so let's just go ahead and add all those in here too so i'm gonna copy that and now we have the blue block let's make this an exclamation we don't need a tag or mushroom so we're just gonna have the blue block like so i'm gonna scale it so it's the same size as the others so i'm just gonna put a scale 0.5 so that is our blue block we also have a blue brick um and let's make that a pound sign we also have an evil shroom let's make that a z blue evil shroom um and again let's give it the tag of dangerous so that's the cool part about these tags we are reusing a lot of the logic we have already uh written so that is good and then let's also make a blue surprise or price uh and this is gonna be a coin surprise quite a surprise and then of course we have blue steel um that is not dangerous so we don't need that and then let's give it an x so now let's use all of this to style our game so this time i'm just going to put bricks on the side of the walls so just like so and on the other side too and then this is all gonna be exclamations it's all the way to the end this time and this time i'm just gonna have two three four five six let's have some evil mushrooms let's put z and z and then let's also have a pipe but let's put it at the end here like so and then let's have some steel climbing things like so one two three four one two three four and then just one two so it's just hours of fun making these um little games uh you can make the grids as big or as tall as small as you what so there we go now let's check it out so we're passing the levels okay so [Music] let's go down and there we go we are now on level two with zero coins so that has worked now let's try kill these poor oh we got killed so everything's working fine once again let's go to the next level true and here we are so this is all looking great i mean i'm really proud um awesome and of course we don't have another level once again just like we do the zelda icon loop so where are the levels right here so that the level if i do modulus maps length it will keep looping over and over and over again so there we have it um of course there is so much more you can do with this game i've just provided you with the basics so you can get going and create more and more mario games just like you did with link you can change the sprite of mario so perhaps if he's jumping you can have him going like that um if you want to learn how to do that please look at the zelda game all you have to do is change the sprite also you can have him when he's moving changing a sprite and so on and so on so there really is a lot to do in this awesome game okay well i hope i provided you with the knowledge to go forth and create your own not only uh mario and zelda and space invaders but so so many others and please please do share them with us i for one would absolutely love to see your finished games how you have styled them how you've made them your own so yeah i'd really appreciate that

Channel: Code with Ania Kubów

Views: 495,902

Rating: 4.9273086 out of 5

Keywords: game development, web development, javascript tutorial, how to make super mario in javascript, how to code mario in javascript, how to make a mario game in javascript, gamedev, javascript game tutorial, javascript game engine, javascript game development, software development, software engineering, kaboom.js, kaboomJS, game development for beginners, game development tutorial, learn javascript for beginners, javascript game, super mario, game dev, modern javascript

Id: 2nucjefSr6I

Length: 60min 22sec (3622 seconds)

Published: Sun Jun 13 2021