Doodle Jump in JavaScript

 
0:00

hello and welcome to this week's lesson in which we're going to learn how to build doodle jump in pure javascript
0:06

html and css no canvas because i don't want to this is going to be a really good one as we really do practice
0:13

a lot of javascript methods i'm going to list a few here so you can see exactly how many i mean
0:18

there's a lot so by the end of this you really will practice your muscle memory with these if you're just starting out in
0:24

javascript this is the perfect place for you we're going to be using classes constructors for each pop
0:29

and shift everything as always i'm not going to be focusing too much on the styling
0:35

that part is going to be up to you i am doing this because this is a javascript tutorial we will be
0:41

wherever we want to focus on the logic of the game and not worry too much about the styling
0:46

i want you to take the game make it your own and of course share it with me on twitter i'd love to
0:52

see what you have made now doodle jump might seem like quite an easy game to make but trust me there's a
0:57

lot of stuff going on okay so let's break it down okay so first let's talk logic let's actually figure
1:04

out what we need to do to make this game first so if we look at the game itself you will see that we need to start off
1:11

with five randomly placed platforms so we're going to need to make that we also know that all equally spaced
1:17

apart so that's something that we're going to have to think about equally spaced apart vertically that is we also have the
1:25

doodler himself who automatically lands wherever the first platform is okay so we're gonna have to remember
1:31

that as well he can't just be landing wherever when we start the game otherwise he'll just fall to the bottom and die we then
1:37

also have the platforms moving once the doodler is at a certain height okay so
1:44

they're not always moving it's only if he moves past a certain height that's something else that we're going to have to remember now
1:51

you can also see they are disappearing if they pass the floor and then we add a new one to the top
1:57

once that happens so i already know this is going to be array work we're probably going to be using pop or unshift in some way or another
2:04

with this array and of course we have the doula movements themselves so that's gonna be a lot of jumping and
2:10

eventlessness so yeah you can see he jumps up and down if he is on any platform at any height he also
2:18

moves left and right but stops if he hits the left or right hand edge and the game is over if he hits the
2:25

floor we then also need to see the final score which is actually the amount of
2:30

platforms we have jumped over so we're gonna have to account for that we're gonna have to store this score somewhere
2:36

okay great now that we have the basic logic down let's go ahead and start our game okay
2:42

so to start off here is our project i've already gone ahead and made some html boilerplate where i
2:50

have linked our app.js file for our javascript with a script tag and our style sheet with a link tag
2:56

right here i've also gone ahead and put in a div and given it
3:01

the class of grid this is where all the magic is going to happen this is where our grid
3:07

our doodle jump grid is essentially going to be okay so let's actually start off perhaps
3:12

by styling this grid up so let's open up our style sheet
3:17

and use dot grid because this is how we get classes with a dot we're grabbing the
3:24

div with a class name of grid giving it a width of 400 pixels a height of 600 pixels
3:32

a background color of let's say yellow for now
3:41

a position of relative okay so i'm going to explain this a
3:47

little bit later but we need to give it a position of relative if we're going to be dealing with positions of things
3:52

in our browser okay so the next thing we're going to do is actually grab our doodler so we
3:58

haven't made them yet but i'm going to go ahead and style him up as if we did so once again i'm going to give it a
4:04

class of doula so dot doodle and then he's going to be 60 pixels wide so width 60 pixels
4:12

a height of 85 pixels a background color of let's say red and this time position absolute
4:21

ah we need to actually spell doodle correctly
4:26

okay so this is looking good let's go ahead and make our platforms too so each platform is going to have a
4:33

class of platform and i'm going to give it a width of 85 pixels
4:38

a height of i don't know 15 pixels and then a background color of
4:46

green i think green will be good i mean this is just temporary for now
4:52

i'm also going to give it a position of absolute i am using position absolute for the doula on the platform
4:58

to make sure that their position is absolute inside our grid whereas the grid itself is going to be
5:04

relative to our browser okay so that's the sort of meaning behind that
5:10

now let's flip over to our app.js file now the first thing to do because i did put my javascript tag
5:18

in the header is actually use a document event listener and pass through dom content loaded okay
5:24

so that's the event essentially what this is saying is that i only want the contents of this file to
5:29

load only once all the html has been written let's just get rid of that for now we
5:35

don't need it an alternative to this would be putting your script tag at the bottom of your html file
5:41

both ways are correct this one's just that little bit more foolproof
5:46

okay so first things first let's actually grab our grid so we can work with it in this file
5:52

i'm going to do so by the getting the const grid and using document query selector so query
5:59

selector is actually a javascript method that allows to pick out elements from my
6:04

html so in this case i am picking out the class again dot of grid so i'm picking out
6:12

this element right here next let's grab our doodler so we don't
6:17

actually have this in our html file yet so let's go ahead and create him so
6:22

cons doozler i'm going to use document create element to create a div
6:30

so i'm creating a div at the moment and i'm calling it doodler we haven't
6:35

actually placed our doula in anywhere yet so if you go to your browser you won't see him
6:40

we have just created a div okay now next let's actually write a function to create the doodler itself okay
6:47

so i'm going to write function create doodler and inside of this i'm actually going to
6:53

grab our grid which is already made and use a javascript method called
6:59

append child okay so i'm going to put in something into our grid that's what child
7:04

append child the grid is the parent i'm putting in a child into it so i'm going to put the doula
7:10

the div we just created called doodler i'm bringing that into our grudge okay
7:16

let's go ahead and invoke this to see what happens and if it has worked so let's go ahead and do that now uh we
7:23

actually need to add some styling to this otherwise of course we won't be able to see it so let's grab that doula the and use
7:30

classless add to add the doodler class so this class right here
7:35

to it okay now let's click refresh and there he is there's our doodler
7:40

fantastic that has worked okay now let's actually get to moving our dealer around
7:46

so i can actually move elements using my javascript which is pretty cool i can actually use
7:52

javascript to essentially give css attributes to elements i'm going to do this by writing doula
7:59

style and left okay so if i go ahead and just write the string
8:06

50 pixels and save this file you will see that i have actually
8:12

made my element move 50 pixels or appear to move 50 pixels because essentially all i'm doing is giving it a left
8:17

spacing of 50 pixels great now i'm actually going to store i don't
8:23

want 50 i want to store this 50 as a variable so that i can manipulate it later and we
8:28

can change it around so i'm going to do that now i want to say i don't know doodler left space
8:34

sure let's do that do the left space so i'm replacing the 50 plus x and now all i really need to do
8:42

is let doula left space equal 50. so this is essentially the
8:48

same thing as we wrote before it's exactly the same thing cool now let's go ahead
8:56

and give it some bottom spacing as well we do that in the exact same way so get
9:02

the doodler use style and bottom and then do the bottom space plus pixels
9:08

and once again at the top let's define what this is so let do the bottom space i don't know
9:15

150 pixels see what that looks like and fantastic so you now see 50
9:22

and 150 and it's going from this point right here okay this corner that is essentially what we mean
9:30

okay great so we've created our doula this is all looking good now uh when do i want to create the
9:37

doula well i'm going to actually write another function i'm going to call it function start and
9:43

i want our doula to appear if this function is invoked okay so let's get rid of this here
9:50

because i don't want it creating in the file now i'm going to use an if statement and
9:56

if is game over which we haven't defined yet equals false then
10:03

i want to create the doula i'm actually going to go ahead and do let this game over falsies to start with because
10:09

obviously when we start the game the game is going this game over is false now another neater way of actually
10:15

writing is game over false is actually to get rid of this and just put a bang at the beginning
10:22

okay so if the game is not over then we create doodler
10:27

great let's invoke this again so this is going to be our start
10:33

function it would be cool in the future to attach a button to this to make our game start so it doesn't just start you know when
10:39

we load the browser so i'm going to make a note of this here attach to a button so we attach this function
10:44

to a button but that's something you can do if you wish now the next thing i want to happen when
10:50

my game starts or whenever we press the button is i want to create platforms i'm going
10:55

to write function create platforms and let's go ahead and write this function so
11:02

function create platforms
11:08

now essentially in here we're going to be using a lot of the same logic we did to create the doula
11:14

apart from five times so hopefully you're gonna be a little bit more familiar with this
11:19

so let's go ahead and do it so for this i'm actually gonna use a for loop as we need to do this five times as i
11:25

said so for let i equals zero and as long as i is smaller than
11:31

five we increment i by one okay so this is the syntax for a for loop now
11:37

i could make this a little bit neater instead of using the five and actually replace this with a variable so let's
11:43

just do that platform count i guess that sounds right i'm gonna use platform count for
11:50

this so let's scroll to the top and once again let platform counts
11:56

and i'm going to store the value 5. this is so we can change it later on as well
12:02

okay so now let's get to writing some logic for this i'm actually going to set a
12:07

platform gap to start off with okay because we need to decide exactly how much space
12:13

each platform is going to have in between each other so let's call this
12:19

platform space now to decide this i'm actually going to
12:24

have to look at the height of our grid so 600 pixels take that 600 and divide it
12:32

by the platform count okay so that as we know is five so the
12:37

platform space actually let's call it platform gap that probably makes a lot more space the platform gap
12:43

is now gonna be 600 divided by five so that's going to be the space if we choose to add more platforms
12:48

this will of course change as well okay now let's go ahead and start adding some
12:54

spacing to all our platforms so to do this i'm going to make a new variable called let platform bottom
13:00

let new platform bottom and once again i'm gonna actually give
13:07

this new platform bottom a value of 100 plus i
13:12

multiplied by the platform gap okay so what i'm doing here is using my for loop
13:18

in order to increment the gap space so 100 obviously when i is zero times platform gap would be zero
13:25

one times the platform gap is going to be 120 two times the platform gap is going to be 240
13:31

and so on okay so that's how that's going to work so let's go on and do it so i
13:39

times plat gap okay cool okay great now that we have
13:47

that down let's go ahead and actually start making our new platform so let new platform and i'm actually
13:52

going to create a class for this called new platform okay and it's going to use
13:58

things like the new platform bottom in our for loop so i'm going to show you how to do this
14:03

class platform and then i'm going to need a constructor
14:09

so constructor to construct our class that's what a constructor essentially is now in it as i said i'm gonna pass
14:16

through the new platform okay so let's pass it through here as well and i'm gonna use this
14:22

to create our new platform so each new value that i get is gonna be passed
14:27

through into this class five times so in each platform well what makes up a
14:34

platform let's have a think about it each one of them is going to have its own bottom
14:40

so bottom spacing between the five is all going to be different and we're gonna use new plat bottom for this we then also
14:47

need uh left spacing because each platform has its own left spacing okay now we know the grid
14:54

width is 400 and the platform width is 85 so we actually go ahead
15:00

and make sure that the left spacing is anything from 315 pixels
15:07

okay because 400 minus 85 is 315 and the left spacing as we know is from the left
15:12

side of the platform so as long as we get a number from 0 to 315 it will appear in our grid okay so this
15:19

left equals math random this is another javascript method if i use math random and multiply by any
15:27

number it will return a random number from 0 to 315. this is going to be our left spacing for
15:33

a platform now i'm going to do something called this visual and again use document
15:39

create element just like we did with our doodler to create a div for each platform
15:47

okay so that's looking good now we just need to add some styling to it so we're going to
15:53

actually store the visual as the const visual okay this is just we can use it
15:58

so now visual class list ad and the style of platform i'm doing this
16:04

because this visual.classes ad wouldn't work we need to store it as a variable first
16:10

now once again let's give it some left spacing so this style left will be this left plus
16:18

the string pixels and visual cell bottom is of course going to be this bottom plus pixels this is looking
16:25

good i'm really pleased with this so far
16:31

okay so the last thing to do as you might remember from our doula is actually put this into our grid once again using append child the
16:39

javascript method of pen trial and passing through our newly created visual
16:44

okay let's see if this has worked moment of truth
16:51

and great you can see all five platforms randomly spaced out from the left and evenly
16:57

spaced out from vertical great let's refresh a few times just to make sure this is working
17:03

and fantastic this is looking really good i'm really pleased okay so we've created the five uh
17:10

platforms but we actually now want to put them in an array so that we can work with them in our project to do this
17:16

i'm to use an array called platforms so let's actually move to the top and make this an empty array now i'm
17:24

going to use a javascript method called push now each time this loops i'm actually
17:30

pushing the newly created platform we've made into this array okay so i'm literally
17:35

going to push it into the platforms array okay this is how we do it and this
17:40

is how push works so platforms push new platform i'm going to console.log this just you can see
17:46

exactly what's happening and how we're looping over and how each time we loop over it gets added so ah oops you've obviously misspelled
17:54

something here ah that's right platforms cool thank you so much console log
18:02

for helping us figure that out let's refresh and great you will see here that the for
18:08

loop is working each time we loop we're adding our newly created platform into it and if we look
18:13

into these into our array you will see exactly that you'll see our platform with the bottom with a left
18:19

so essentially everything that's in our constructor this is pretty neat and we can now visually see all this
18:25

information in our console as well awesome okay now that is done
18:31

and we can see all our data and we know everything's working correctly let's carry on so we've already got the
18:38

doula we've created our platforms i think the next thing we need to do is why do we focus on
18:45

moving the platforms so let's go ahead and do that
18:51

move platforms once again we actually need to write this function so let's do that now i'm going to do it
18:57

here so function move
19:02

platforms okay okay now as we discuss we only want to
19:09

move the platforms if the doula is in a certain position so what this means is let's actually take
19:16

the dual bottom space because that's how far the doodler is from the top from the bottom sorry of
19:21

our grid now if the doula is anywhere above 200 the doodle at bottom space is above 200
19:29

then and only then we want our platforms to move so in the grid you will see here if i do this anywhere in this space up
19:36

here okay then we want our platforms to move okay so now we actually grab the
19:43

platform so our array of platforms and then for each platform inside this
19:50

array so this is how we use the for each javascript method we go into the platforms array
19:55

we then do for each platform inside of that array we can essentially call it whatever we want but i'm going to call
20:02

it platform just for the sake of readability and for each platform in that array i want to get the
20:09

platform and to its bottom minus four okay so by writing minus equals four i'm
20:17

essentially writing platform bottom equals platform bottom minus four so this is just a nicer way of writing that
20:23

it's a lot it's a lot simpler now once again we need to get the platform visual
20:28

so let visual equal platform visual and then visual style bottom equals
20:35

platform bottom plus pixels okay so essentially what we are doing is making sure that each of the
20:41

platforms moves by four each time okay let's check it out that has worked
20:47

and great that has essentially worked but because the change is so small i mean four pixels you probably can't
20:53

really see it now that we're moving each of the platforms down by four each time we actually need
21:00

to put this move platforms on a set interval okay so i'm going to put on a set interval so
21:06

this is another javascript method that will allow us to invoke the move platforms function
21:12

so we pass through a function and then the time that we want to keep invoking this function at okay so now
21:19

let's go ahead and refresh that uh that should be moving every 30 seconds 30 milliseconds sorry
21:26

what is not happening here so we're getting our visual from each of the platforms
21:32

we're then getting the style bottom and applying the new platform bottom to it
21:40

ah okay yes it's because we are not above 200 pixels so if i move up here 250
21:48

tada all our platforms are falling down because they're on a set interval moving by four pixels every 30
21:55

milliseconds okay if i move this back to 150 pixels we are alert below the 200 mark so nothing's
22:02

gonna happen amazing this is working okay now that we have the platforms
22:09

moving we of course need to make them disappear once they hit the bottom and so on but let's leave that for now let's actually
22:15

focus on getting our little doula to move so i'm going to write a function called function jump
22:21

jump let's spell that correctly function jump okay so our jump function is actually
22:26

gonna have a lot of set intervals in here just like we have the moving platforms we're gonna need it
22:32

to make our doula appear like it's jumping now one thing that we didn't use for the other set interval
22:38

is a uh timer id so a timer id is essentially how we can stop this clear interval okay
22:45

so once we don't want it to keep moving we can actually clear it with this id so i'm going to call it uptime ids you
22:52

can already see i've done and i'm actually going to define it outside of this function
22:58

so i'm going to move it up here and make it global so that we can cancel it outside of the
23:04

junk function too okay so this is how you do that you just make a global okay so uptime id equals set interval
23:11

and then we pass through a function but we don't have a function to pass through so we're going to write a function instead
23:17

so function and we're going to invoke it every 30 milliseconds it's the same format just written a bit differently
23:23

this move platforms function is essentially this function here okay so same thing just
23:30

different format okay so what do we want to do every 30 milliseconds in our
23:36

jump function well i'm going to get my doodler bottom space okay and i'm going to plus equals 20 to
23:43

it so once again this is essentially just adding 20 to my doula bottom space each time i'm also going to style it so
23:51

doodle style bottom i'm going to apply this bottom space to it using a string as well of pixels
23:57

so this is we can see it as well so we're not only moving our doula bottom space we also want to apply it to our element
24:04

let's check it out and whoa there he goes amazing so he's going up we now have to
24:12

probably make him go down right so let's go ahead and do that
24:21

in here if doula bottom space is smaller than
24:28

let's say 350 for now we want to invoke a function to fall okay so now let's get to
24:35

writing that for function let's do it here
24:43

function full
24:49

okay so once we are falling we actually want to clear the interval that we discussed we want to get rid of the uptime id
24:56

because we don't want them going up anymore so another javascript method called clear interval will do that and we just
25:02

pass through the up timer id we then want to start another set interval so this is going to be just the
25:09

same as a jump i'm going to use dime down down timer id and once again set interval and pass through a function
25:17

and in that function i want the doula bottom space to this time go down by five okay and let's go ahead and apply it by
25:24

the styling so do the start bottom do the space plus picks doula bottom
25:30

space sorry plus picks okay so what else do we do i mean it's going to be exactly the same right so
25:36

what we're doing in here we've got that great so i'm actually going to make sure
25:42

to clear the down timer id when we jump so each time we go to jump we want to clear the down timer id
25:49

okay and then when we go to four we want to clear the up time radius so each of them cancel each other out
25:55

let's make sure to invert the full function every 30 milliseconds and let's test it out and whoa
26:02

yeah we can see the little element is jumping and going down once he hits that 350 pixel mark
26:10

okay so this is looking good now let's go to stopping him so if doula bottom space is smaller than
26:18

or equal to zero well we know that's a game over so let's actually just go ahead and do it
26:26

now so game over function which we haven't written yet because of course we're going to write it now
26:31

so function game over now if you think about it in the game over we essentially just want to know it's a
26:38

game over right so let's console our game over so we know that it's a game over so cool that should be enough to do that
26:47

this is obviously just for us developers this isn't going to show up anywhere it's just a console log now we also want
26:53

to set the is game over to true because you know the game is the game is over
26:59

um so that is looking good and we also want to clear the interval of the uptown
27:04

up timer id and the downtime already even though the technically the up timer id should be cleared already because
27:11

we're going down i'm just going to do it here you know as a default just as a safe sort of practice
27:18

okay cool and there he goes and our console logs printing game over
27:24

and we're no longer moving down because the down timer id is cleared fantastic
27:31

let's just try again this is looking great but as you can see we need to do a lot
27:37

more right we're not even done we don't want our doodle jumper to just be
27:47

okay so this is all looking great i'm really pleased with how this is all looking we've got our game over we've
27:52

got our platforms moving one thing we did mention is that we actually need our doula to start off
27:58

on our platform right so we don't want them just appearing anywhere but not just any platform our first platform so we
28:05

can easily do that let's move over to our create doodler function
28:13

now in here doula style left now we don't actually want him
28:19

just going anywhere so i'm gonna get the doodle less space and assign it our first platform so
28:26

we're going into our platforms array we're getting the first item so we do this by passing through a zero
28:33

into our array and we're getting the left of that platform so let's have a
28:38

look at it here so if you look here i'm going into our platforms
28:44

and then going into the first platform and then grabbing the left so now
28:51

it's going to be the same let's check it out so let's go ahead and see what this
28:57

looks like oh and an error message why is there an error message all we're doing is going into the
29:04

platforms aha it's because we actually make the platform
29:11

after we try to get the platform so we can easily solve that let's just solve uh this by moving these two functions
29:17

around so we're going to create the platforms first and then create our doodle jumper okay because we want to create the four
29:23

or five platforms first so we can then take the first platform once again thank you aerolog okay now
29:31

let's carry on okay so now
29:36

what else do we need to tackle well i think we need to actually get our dual jumper moving when we
29:43

control our keyboard so i'm going to do this with a function called control in this control function i'm actually
29:48

going to essentially link up the keys on our keyboard in order to use them and whenever we press the keys
29:54

that we want a function will get invoked so i do this like this if e for event
30:01

key equals arrow left as a string so ease for event we actually need to
30:06

pass this into our function if the key that we press is the arrow
30:12

left on our keyboard then we want to move left right so we don't have a move left
30:17

function yet so i'm just going to put some pseudo code in here else if e key equals arrow right so the
30:25

string arrow right this time then well you guessed it i want to move right so once again i'm just going to
30:31

put a placeholder hole that placeholder here else if e key equals arrow
30:39

up well i essentially just want to straighten out because i don't want to move left or
30:45

right anymore so i'm going to just put move straight sure
30:50

move straight function do we want to write this here no let's let's comment it out for now and put it
30:57

as a placeholder okay this is looking good um
31:02

what should we tackle first so again we want to be able to move
31:09

our doodle jumper before we do anything let's actually set
31:15

ourselves some variables so i'm going to put let is jumping equals true because if we if you remember
31:23

we only want to be able to jump again if is jumping is false okay because we
31:30

don't want him to be like mid-jumping we don't want to jump and jump again if he's already mid-jump and then
31:36

in the jump once we are jumping we want his jumping to be true
31:42

okay that makes sense right when we're jumping is jumping is true and when we're falling well you guessed
31:48

it as jumping is false so now we have this being stored so we
31:53

always know if he is jumping or he's not jumping and we can use this in our project great okay i think we should probably
32:01

tackle i think let's tackle if the doodle jumper is actually on a platform so we're essentially checking up for
32:07

collision so we're gonna do this in the fall because we don't care if he's jumping if he's jumping he'd go through the
32:12

platforms we only care if he's falling and if he falls onto a platform we want him to
32:18

essentially jump again so let's do this by grabbing our platforms array
32:23

and for each platform so for each item in our platforms array if the doula bottom space
32:30

so from the bottom is bigger than or equal to the platform bottom
32:35

and the doula bottom space is smaller than or equal to the platform bottom so essentially we're going we're making
32:42

we're checking if the dual bottom space is in between that 15 pixels in between so we're checking if it's in
32:50

the platform right so you can see here height 15 and that's why we are adding that 15
32:56

because we are checking if he's at the bottom of the platform but plus 15. now we also need to check for if the
33:03

doula left space so we need the first statement to be true and the second second statement to be true and now this
33:10

statement to be true so do the less base plus 60 so we're going from the left and plus 60
33:17

because that's the width of our doula and then we are checking if that is smaller than or equal to platform left
33:24

okay so once again we are getting the do the less space
33:29

we're adding the width of the doula to it and whatever that number is is smaller than the platform left
33:35

means he's not on the platform okay he's to the left of the platform somewhere so we need that to be true and we also
33:42

need to get the do the left space now this time we actually need to check that this is smaller than or equal to
33:47

the platform left space but this time plus the platform's width okay so we're essentially making sure
33:54

that the delay is not anywhere on the right side of the of the platform so all of these four things need to be
34:00

true in order for a collision to happen so we need to make sure that the doula is not in here
34:06

or not in there and he's also in that little platform space cool
34:15

now we just need to check for one final thing and that is that he is not jumping okay
34:22

so just this is sort of like i guess safety blanket because we are falling so he should technically not be jumping but
34:28

you know just to like fool proof this whole thing great let's actually also get a console.log going just to check
34:34

that we have met all of those criteria and we should get a console saying landed and then once he has
34:41

landed we want him to jump again so let's put that function here and invoke it
34:47

so if all those things are true and that is statement we want to print landed and jump again so
34:53

bang there we go landed bang and we are jumping awesome okay this is looking good there
34:59

is a floor however i don't know if you can see it but our jump only goes to a certain height
35:05

this is because we hard coded the max height that we can jump to okay so at any point we'll never ever
35:11

jump higher than this okay not even c not even if we get like a platform that's close to that it just won't happen
35:17

this is because we need to reset our starting point of where we are jumping because at the moment we're simply
35:23

jumping a certain amount so let's do it now
35:28

so do the bottom space is 150 i'm actually going to make another variable called let's start point equal
35:35

and to start off with it's actually going to be 150. so i can actually get the do the bottom
35:40

space and assign at the start point for when we start jumping so that's what we're writing here
35:47

essentially okay so now let's use this to reset essentially
35:52

our jumping point each time so once again i'm going to do this here so
35:58

i'm going to get the start point and whatever the doula bottom space is at this time
36:04

i'm going to make it the start point okay so i'm overwriting 150. so if we're on a platform then we
36:10

can overwrite the start point and store it as start point so we can use it globally so our start point is
36:16

only now changing okay so this is going to be our new start point for jumping
36:21

our do the bottom space is always going to be moving continuously moving because we're going to track wherever the jeweler is
36:26

but our start point is going to change okay so now if doula bottom space
36:33

is smaller than and we need to change this 350 we're going to get our start point so
36:39

remember at the start it's 150 plus 200 so essentially we're not changing anything too much here
36:45

but as soon as we land on a platform that number is going to change so let's see if that has worked
36:54

okay and there we go we have now fixed our problem
36:59

okay only a few more things to do and that is actually write our move left function move right
37:05

function and move straight function let's start off with our move left function so
37:10

here we go function move left now what happens when we move left well
37:16

essentially it's very similar to the jumping but we're going to be changing the
37:22

doula space left instead so i'm actually going to write a new variable
37:27

let is going left let's actually also set this at the bottom so is going left is false because that's
37:34

what we are starting with i'm actually going to go ahead and write let is going right fast as well because
37:40

i know i'm going to use that later on so it's going left when we are moving
37:45

left i want to change this to true okay i'm we're going to store that globally
37:51

now i'm also going to start a left timer id so once again it's a set interval left timer id equals set interval and
37:59

pass through a function
38:06

once again i'm going to store this left timer id globally and this right time id globally so we
38:12

can access it and other functions so that is now done cool now what do we
38:18

want to happen let's move on equals what do we want to happen in here well a few things
38:25

we need to get the doodler to move so let's go i'll do the left space and this time minus five from it
38:33

or yeah minus five from it and then we need to actually show this in our browser so i'm gonna
38:38

use doula style left and then do the left space one of the new dead doula spaces plus pixels
38:47

okay and then i i want to invoke this uh set interval every 30 milliseconds
38:53

so that is looking good now okay now we just need to hook up our
38:59

control function so the move left is in the control function i'm going to do this in the start
39:06

function and use document and add event listener and pass through control but also the
39:12

event of key up so now each time we essentially press our key we can invoke
39:20

this control function which will invoke our move left function and if we move our or
39:25

click sorry our arrow left button our keyboard will move left and great this is working perfectly
39:34

now one thing that isn't going well is that our doula is actually going off the left off our grid we need to
39:39

stop this so if do the left space is bigger than or equal to zero and only if this is
39:47

true then we can make our doula move otherwise we move right
39:52

let's get to writing our function for move right again it's going to be very similar to move left is going right
39:59

equals true okay now let write timer id
40:06

equal set interval and then a function which makes sure that if the doula left
40:12

space this time is smaller than or equal to the width of the grid so smaller than
40:18

or equal to what is it again 400 okay
40:24

and then we need to actually minus the doula width so 400 minus the doula width so 340
40:30

okay so if that statement is true and only if that statement is true we get the doula left space and this
40:37

time let's add five to it and once again let's apply this to the styling so
40:43

doodler left sorry doula style left and the do the left space
40:48

cool don't forget to add the string of pixels so now we just need to make sure
40:55

to account for if it is so if it is then we move left and let's invoke this every 30
41:01

milliseconds great this is looking good
41:07

okay shall we test it out let's actually put this back here so
41:13

move right and invert the function okay so now if you press a right arrow so let's go ahead and do that whoa
41:20

what the hell is happening why is it going so fast okay what have we done
41:27

that's strange it's also sort of like flinching because it can't decide whether to go left or right that's
41:33

because we haven't cleared the interval so let's do that first function move left if
41:38

is going right we clear the interval right timer id and we set is going right to false okay
41:44

so when we're moving left we need to clear the right time id and make sure that we are not going right anymore let's do the same
41:50

for move left so if is going left well we need to clear interval
41:58

left timer id and make sure that is going left is false
42:03

okay great that should definitely stop the twitching
42:12

let's refresh that boom i mean it's still going really fast i don't know why that is but at least it's
42:18

not twitching anymore boom why is that doing that
42:26

ah it's because we're putting 50 we need five great typo okay and that's much better
42:33

cool we now have a little doula whacking off each side we now need to actually
42:39

allow it to straighten up if we want to write so we don't always want it to going from left to right from left to right we
42:44

need like an out so for this let's focus on the move straight
42:49

so function moves straight and i'm simply just going to clear everything so i'm going to put is going
42:55

right it's false it's going left is false what else we need to do clear the id so
43:02

clear interval
43:07

right timer id and clear interval left timer id okay
43:15

it's looking good
43:26

let's test this out again and we've done it this is looking better and better each
43:32

time whoo it's still glitching when we get a game over i mean we just need to do some more
43:38

interval clearing but this is looking good okay now i think let's focus on
43:46

actually removing the platforms and adding new ones so that's gonna be fun that's gonna be some fun array work
43:52

let's do this in the function move platform if the platform bottom this time is
43:57

smaller than let's say 10 so you're really at the bottom of the grid not exactly the bottom but you're in the last like
44:03

slice that 10 pixel slice if the platform if any of the platforms and
44:09

facts are there we need to get rid of the first platform in the array okay so let first platform let's define
44:16

it let's grab our platforms array go into it so we're going into our opening
44:22

of our array we're in first item and we're getting its visual okay so now
44:28

let first platform is defined classlist i'm going to remove the class of platform from it so i'm
44:35

removing the cluster platform on the first item this is so we can visually not see anymore
44:41

okay now we actually need to also remove the array i'm going to do this by grabbing the
44:46

platforms array and using shift so shift will do that it will get rid of the first
44:52

item it's another javascript method that will get rid of the first item of an array so now if we console our platforms let's
45:00

see if that has worked and great you will see here that the platform array is getting shorter and
45:05

shorter each time let's just test out again i'm just really happy with how this is looking and obviously it's quite cool to see our
45:13

array going down by one each time okay so we're getting rid of the first one let's go ahead and actually
45:19

add a new platform as well so i'm gonna use let
45:26

new platform and what we need to do is actually use the class again so let new
45:32

platform new platform but the class of new platform this time
45:37

so this is the class of new platform now we need to pass something through into our cluster platform member
45:43

and that's a bottom space well because we know that our grid is 600 pixels high let's pass through just a hard-coded 600
45:51

so that will mean that our new platform will appear at the top of our grid okay this is looking good and now we
45:58

actually need to add that to the end of our array so i'm going to do that again with another javascript method
46:03

i'm going to grab our platforms array use push and then pass through this new platform
46:10

okay let's test it out and great this is looking good you will
46:16

see our new platforms being created each time a platform disappears i mean
46:21

i'm really proud of this i think this is fantastic um let's carry on okay so the one thing
46:28

i did want to do is get rid of that glitchiness right so if this this is definitely to do with the intervals
46:34

let's head over to our game over function and clear the intervals of left time right d and right time id to stop that glitching
46:41

so clear interval yeah pass that through and clear
46:47

interval again that will 100 100 stop any glitching happening
46:55

okay so let's test that out
47:00

i mean it's just so fun to play um but yeah come on let's let's actually do some testing it's actually quite hard to get at the bottom
47:07

maybe i should increase the hardness settings of this okay let's do it now okay put that to a
47:14

20 and put that to a 20. i think that should make it harder
47:20

okay i think it just makes just means everything's gonna move faster right so ah it's still glitching why is this
47:27

happening
47:36

hmm okay this is really weird but you know what let's just get rid of it right
47:42

because it's game over we don't want it there anyway so i'm going to show you something cool and a cool way to get rid of all the
47:47

children of a parent so i'm essentially going to get rid of anything in the grid i'm going to use while to do this so
47:53

while grid first child this essentially means if this is true
47:59

so if a group if the first child of the grid exists then we continue to remove the
48:07

grid's first child okay so this is essentially a loop while this is true remove the first
48:13

child if there's another first child remove the first child until we have zero children in there okay so that's cool
48:20

i'm also gonna actually display the score here so i'm gonna use grid and then in html and then
48:26

score so let's actually set that globally to let score equal zero now
48:33

all we need to do is define where we actually add a score well i think it would probably make sense to add a score
48:38

you know like as soon as you get rid of a platform so score plus plus and there we go
48:45

now that means that we are storing a score so once we actually let's die and let's
48:51

see what happens you should see all the elements disappear and then yep and great you will now see it that has
48:58

worked it's tiny but it has worked that's just styling so cool let's go ahead and i'm going to
49:05

do it now with you quickly so inside our grid i'm actually going to add
49:11

font size and let's make it huge right let's make it like 200 pixels
49:17

cool text align as well to make it in the center and center okay
49:25

so now when we die let's make our little guy die
49:33

of course like this is still really basic i really do want you to like go wild with the styling i'm going to
49:38

style it myself and put on my github so feel free to take it if you want but obviously it's like it's much better to
49:46

do it yourself and really give it that ah and there we go 22 amazing my score was 22
49:54

i passed 22 platforms and we can now see on our bridge one huh okay that's it thank you so much
50:02

for watching i hope this was really useful i really enjoyed making this with you and as i said please do share your
50:07

finished games with me i'd love to see how you styled it this is something i made earlier this is
50:12

something i made you're more than welcome to it but again please do try it try make your own
50:18

thanks so much again for watching if you enjoyed this video please do like and subscribe to my channel
50:24

i'd love to have you there and please do comment on any other sort of projects you'd like me to make or you'd like to
50:31

see from me or if there's some like concepts that you don't understand i'm more than happy to explain them to you thanks so much
50:39

again and i'll see you soon