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
No comments:
Post a Comment