HTML5 Canvas API Crash Course

[Music] this video is sponsored by Ella node anyone can build on the node whether you need a development portfolio to land your next job or you're ready to put your app into production lonoa can get you there for $20 and free hosting credit click the link below or sign up at lynda.com / traversée hey guys welcome to my canvas crash course so canvas is an html5 elements that has an API that we can use in our Java Script to basically draw things on the canvas we can create shapes and paths we can do animation a lot of the times the the 2d games you play in the browser use canvas you can even do 3d stuff with WebGL and some other libraries but this is basically an introduction to canvas and we're going to look at drawing shapes and paths as well as a little bit of animation and what gave me the idea for this is the the new udemy course I'm working on which is a 20 Vernell a JavaScript project course we build this little breakout game using canvas so you can see we can move the paddle and hit the ball and break the bricks and when it hits the bottom it resets so pretty simple but I realized when I was building this that I don't have any canvas videos on my channel so I wanted to do a crash course and then maybe later on down the line we can build some games alright so let's go ahead and jump into our vs code and I already have the HTML and CSS done because it's very very simple and I didn't want to waste time on it so we just have an h1 and then a canvas tag which is extremely important this is what allows us to use this API and I have an ID of canvas with a width and a height of 600 and then I'm just linking a stylesheet and a script j/s so the style sheet very very simple just a background color I'm using flexbox in the body to Center everything and I made the canvas a light grey color okay so that's it for the HTML CSS if you want to pause the video and copy that if you're following along you can go ahead and do so but we're going to jump into our JavaScript now so the first thing we need to do is bring in the canvas just like we would any other Dom element so I'm going to use dot get element by ID and it has an ID of canvas okay now we need to create what's called a context so I'm going to open up the docs real quick and so the mdn Doc's are really helpful and there's a lot in here and you can use this as kind of a supplement to this this crash course so right here the actual drawing is done using something called a canvas rendering context 2d interface okay so that's what we have to create we do this by calling this get context method and setting that to a variable and then we can call all these different methods and properties on that variable all right so let's close that up and let's create a variable called CT X that's kind of the convention and set it to canvas dot get context and then we pass in a string here of 2d okay so this is a 2d context and if you want to check for support you can say if and then just use canvas dot gets context so you can do that however all the modern browsers support it so I don't I don't do that anymore also if you want access to the width and the height of the entire canvas you have those properties and you can actually set those here as well so if I go ahead and set that canvas width wait why is this not did I not save this oh I have this going to j/s script there we go so you can see that I can set the width if I wanted to set it to the whole entire width of the window we could use the window object and we could call inner width like that okay so take the whole width you could do height as well so I just wanted to show you that that's possible all right now let's start to work with rectangles because we have a few methods that we can use to create rectangles the first is fill rect okay so we take our context and we can call dot fill rect and this takes in four arguments to pass in the first are going to be the x and y values where we want to place this and I just want to show you image real quick so when you work with canvas you can think of it as a grid and you have the x axis which is the horizontal axis and the y axis which is the vertical axis so the first two values here are going to be x and y where do we want to place the rectangle here so I'm going to set it to 20 on the X so from here we'll go 20 over and from 20 down on the Y so I want it to be like right around here so let's pass in here 20 for the X 20 for the Y the second two are going to be the width and the height of the rectangle so let's do 150 with 100 height and there we go so we draw a rectangle pretty simple if we want to change the fill we can set the fill style and we can set this to a named color like red you can also use hexadecimal or rgba or in something like that as well so now we just have a red rectangle we can create multiple rectangles so let's move this over let's say yeah we'll move this to 200 X which will you know start somewhere over here about 200 and we'll keep it at the same y-value and then keep the same dimensions so if I save that we have another red rectangle and if we want to change this fill style we can simply create another fill style property right above it and set that to something else and we can also place it on top of the other one if we want so if I set this to like 50 you can see that it'll go right over it all right so pretty simple next one next method we have is stroke rect so this will create like like an outline of a rectangle so if we take our context and we call stroke rect and it takes in the same same values we're gonna do let's say 100 on the x-axis 200 on the Y and then we'll do the same dimensions and you can see we get an outline of a rectangle and there's some methods for this as well such as stroke style we could set that to let's say green if we want to change the line width we can do that as well line width will set it to five okay and then the next one we have is clear rect and not react clear rect will actually clear out part of a rectangle and this is used often in animation because you need to clear the whole canvas basically on each paint and we'll get into that later so let's say we want to clear like the inner of this rectangle here so I'm gonna call my context clear rect well I keep writing react and let's place this at 25 on the X&Y so this rectangle is at 20 so this one will start like right here and then let's make it a little smaller than the other than the rectangle we're putting it over so we'll do 140 by 90 and if we save you can see that it's cleared out that entire part of that rectangle okay so those are the three main methods for rectangles and you can create rectangles with paths as well and I'll get to that in a little bit so let's look at text before we move to paths so there's a method called fill text so let's take our context and call fill text and let's put this we'll say 400 X and let's move down 50 from the y-axis and I'm sorry the first parameter is actually the text so let's say hello world save and now you can see we have some text here and in the breakout game that I did that I showed you earlier that's what we use for the score is fill text now it's blue because it's looking at the last fill style however we can put a new one in here if we want to change that and set that to let's say purple and if we want to change the font or the sides we can do CTX dot font and let's set that to 30 pixels Ariel and save there we go and there's also a stroke text although I don't use this that much but it is available so we'll say see TX dot stroke text and same thing that's going to take in the text and let's put this 400 let's move it down a little so 100 now the reason it looks like this is because it's looking at these two properties with heft which have to do with stroke so we can go ahead and change that here if we want orange save and there we go okay so this is like the the bare basics of canvas creating rectangles and texts so now what I want to do is start to look at paths so I'm gonna just comment all this stuff out all right and then let's look at paths now I'm gonna start off and we just save that I'm gonna start off with drawing a couple triangles will do an upside-down triangle and then we'll do a right-side up one next to it so with paths we need to call begin path okay so we're gonna begin a path and then I'm gonna move to a certain spot before I start drawing the triangle so we can take our context and there's a method called move too and this takes in your x and y value I'm gonna move to 50/50 which is going to be somewhere around here so 50 over on the X 50 down on the Y okay and then I want to draw a straight line so there's a method that we can use called line to and I'm gonna like I said make an upside-down triangle so I wanted to go from where we are now to about here so let's go over to 150 X so line to 150 X don't know why I just typed the X but we want to stay at 50 why because it's a straight line it's a straight horizontal line now it's not going to show anything yet because we have to actually call stroke like that and now you can see we have our line so we moved to fifty fifty and then we drew a line to one fifty fifty okay now the next thing I want to do is go from here down to about here okay to the middle so let's create another line from where we're at so we'll say line two now let's think about what should go in here and if you want to pause the video and try to figure that out yourself you can so we want to be in the middle okay we're gonna be down here which is in the middle of that line so that line is a hundred wide right it goes from 50 to 150 so what do you think the middle would be as far as the x-value goes the middle is gonna be a hundred right so let's say 100 for X as for the Y which is you know this way I want to go down to about here so let's do 200 on the y axis and if I save there we go now to get back to the beginning we want to go from here to here that's pretty simple we just want to use the beginning coordinates right so we'll do a CT X dot line two and I want to do whoops 5050 and that will complete it now there's there's a method we can use called closed path as well so if we do closed path that's going to draw a straight line to the beginning okay so either one of these these will both give the same effect in this situation now in addition to stroke we also have fill okay if we want to fill it so we can do CT X dot dot fill like that and it will fill the triangle okay but it has to be a complete path or a complete shape in order to fill it and we can also change the style we can use fill style just like we did with the rectangle methods and we'll set that to let's say coral okay so that's our first triangle let's draw another one next to it so for this I'm gonna CTX begin another path and let's move to so we'll do CT x dot move to and I'm gonna go like right here so we're gonna have at the point right here and then it'll go down and like that so let's move over to 200 X and we'll stay at 50 Y and then we want to draw a line so remember this is gonna be the point I want to draw a line down and over so we're gonna go down into the left okay so for the x value say line two for the x value it's gonna be let's see we're at 200 and it's gonna be a hundred wide so the x value should be 150 right we're gonna go from 200 over to 150 never mind going down yet but it's gonna be like over here on the X so let's say 150 and then as far as the Y value I want it to end where this one ends down here which is 200 right so let's do 200 here and save oops we have to do CTX stroke save and now we have a line so we started at 250 so 200 X 50 Y and we went down to 150 X 200 Y now I want to go over so remember it's a hundred width I wanted to be the same as this one so we're at 150 so if we want to go a hundred over on the x-axis what's that going to be it's gonna be 250 so CT X dot line two and we want to be 250 on the x-axis and we still want to be at 200 on the Y because we're not going up or down we're just making a straight line now to close it we could either do line 2 to the original original position or we can just do closed path like that okay so pretty simple we can also do rectangles using paths so let's go down here and let's do C T X dot begin path and then I'm gonna move to actually you know what we don't even have to do a move to because the rect method that we're using the first two parameters are where we want it to be so we can just place it let's say 300 X 50 Y and then the next two are just the width and the height so we'll do 150 wide a hundred high and then let's do a CT X dot fill okay and we can change the fill style if we want so CT X dot fill style and we'll set it to teal okay so that's how we can create a rectangle and I'm just going to put say triangle tango so now what I want to do is work with arcs are circles so for an arc let's see let's let's begin our path first and let's say CTX so let's actually comment out this stuff here all right so we'll do CTX arc now this is going to take in a few things in fact I'm going to show you the documentation on this so if we go over to drawing shapes okay so this shows you the grid the rectangle method this is all stuff I just showed you begin path closed path stroke fill so these are all important methods to know line to move to see where is arc right here so arc takes in an x and y value now the positioning for x and y is going to be the middle of the arc okay are the middle if we're making a full circle then it's it's the middle of the circle and then we have the radius which is the size then we have the start angle the end angle and if it's anti-clockwise or not this is a boolean if it's true then it's it's going to draw it anti-clockwise if it's false it'll draw it clockwise all right and you can see see right here where they drew these faces so the arc takes in the x and y values the radius in this case is 50 and then to make a perfect circle for the start angle you can pass in 0 and then math dot pi times 2 for the end angle and that'll give you a full circle if you want a half circle like the mouth you can do 0 for the start angle and math dot pi for the for the end angle so let's go ahead and draw here say we'll do we'll go fifty actually let's go in a little further so X 100 y 100 that's going to be the center of the circle will do a 40 radius zero start angle and then math dot pi times two for the end angle so I save that and we take a look we're not gonna see anything because we have to do CT X we can either do stroke or fill and there's our circle now what I'd like to do is the little smiley face thing that they have in the docs but I want to make it big I want it to take up the entire thing here all right so let's what's actually yeah so this arc right here I wanted to take the entire thing so instead of just putting in these these numbers hard-coding these numbers in for x and y let's put in the canvas dot width so this is for the X can vez width which is in this case 600 and then divide it by two which will give us 300 which will put it right in the middle horizontally so for the Y will say canvas dot height and we'll divide that by two and that will put us right in the middle vertically so if I save that put it puts it right in the middle now I'm gonna change the radius make it bigger let's make it 200 okay now that will let's just say draw the head okay now we're going to be using this quite at these two equations quite a bit just dividing it by two so I'm gonna go ahead and just create a couple variables here we'll say Center x equals that and for the heights let's say Center Y and then we can just plug those in here Center X Center Y and that'll give us the same thing all right now I want to draw the mouth so before we do that we need to actually move to a specific position to draw it so we're gonna say C T X dot move to actually let's let's put a comment here so move to mouth so we're gonna move to Center X Center Y now that will put us right in the middle however we want to start at the right side of the mouth which will be like right here and then we'll draw it like that so we want to go to the X but then we want to go plus 100 because we're gonna go from the middle plus 100 to move it over but stay in the same y-value all right and then let's go down here and let's say draw the mouth so to draw it we're gonna do CT X dot arc and we want to pass in here our Center X now the middle of the sort of the mouth of the arc is gonna be the middle of the circle or them I should say the middle of the canvas so it's just center X and center Y okay and then we want the radius which I'm going to put 100 which is half of the circle and then start at zero and then math dot pie okay naught times two because I want it to be a half a circle now this parameter this this anti-clockwise we want this to be false because we want it to be clockwise we want it to go from here draw it this way which is clockwise so let's save and there we go if we have this set to true it's going to be upside down because it's going to draw it anti-clockwise okay so you want to make sure that's false now let's do the eyes so we'll say move to left eye so CT X dot move to so we're gonna go let's start in the middle so Center X center Y all right so we're gonna start here but we want to end up here so what I'll do is from the for the X let's - 60 because we want to go back want to go from the middle back so I'm gonna minus 60 from the X and we want to go up to about here so let's do from the Y minus 80 so that should bring us two to the right spot now let's draw the left eye so see TX dot arc and remember the first two are the X&Y of the middle of the eye or the middle of this circle so we're gonna take Center X and let's minus eighty and then Center Y minus eighty because we're going up and over okay and then it's gonna be for the radius will say 20 and then a full circle so we can do zero math dot pi times two and there we go so we have our eye now if I don't have these move twos let me just comment these out it'll actually show you the paths that we took okay so I'm from here to here drew that went up here so we need these move twos in order to not show these lines okay now we want to move to the right eye so that's gonna be from the center right so let's do context move to say Center X Center Y so from the center X so on the exposition we actually want to go over right just like we did with the mouth so let's add on to that 100 and then we want to go we still want to go up just like we did over here so Center why we're gonna do negative okay because if you want to go up that's going to be negative if we were to add 80 to Y it would go down so from there let's make the radius which is 20 zero and I'm sorry this this is for the actual arc this is we're just moving to this spot so now to draw the right I say see TX dot arc in the middle of the I so Center X so let's add 80 now we didn't add a hundred because we're basically when we draw the eye or the circles we're starting here so we don't want to we don't want the middle to be where we're starting we want it to be over a little so we're moving to a hundred which is going to be to the side of the eye but the middle of the arc is going to be a little bit over so that's why this is 80 and that's a hundred okay and then we'll do Center Y and for this let's let's subtract 80 because we're just we're gonna go up to the same place and then 20 radius start angle end angle save and there we go okay so we have a nice little smiley face now there's other curves that you can do as well so an arc is like you know it's a circle or a half circle or just like you know it's all the same really there's also curves like Bezier curves which I'm not I don't I'm not too good at so I think we'll just kind of look at the documentation and I'll just kind of explain right here so we have busy a and quadratic quadratic curves which are like this okay so they're not like perfect round like a circle or like an arc so the difference between a quadratic curve and Bezier curve is quadratic curve only has one control point so this is a control point if you've ever used like Adobe Illustrator or something like that you've probably had you know created these curves or you you grab the control point you can move it and you can change the way the curve is so with a quadratic we only have one point so the first two arguments are going to be the x value and the y value of that point for a Bezier curve we have two different control points so it takes in the x and y for the first one the x and y for the next one alright and then you have the positions the x and y positions for both so I'm not going to actually attempt to do something custom here I'm just going to show you if we grab this which is a quadratic curve and let's just put that right here and the comments so that'll make this little speech bubble so again this is taking in the control point X control point Y which is at 25 so I don't know somewhere around here I guess and then we're at this the x and y values and then it's connecting them all so if I just do the first one for instance that's what it gives us okay if we do first two gives us that so I'm really bad at this I I don't think I could draw something using this just because it's I don't know it's confusing to me mostly what I do canvas I am usually working with images or I'm working with just you know straight shapes like like circles and squares this is a little confusing to me with all the coordinates but I did want to include it okay so now what we're gonna do is look at animation okay so the fun part so I'm going to comment all this stuff out okay so now we have a blank slate and we're gonna start off with just kind of creating a circle or a ball that bounces around just like you saw on the breakout game just no functionality of the bricks or anything so for this what I'm gonna do actually let's put a comment I'm gonna say annum animation one because we're going to do two different things we're gonna do the ball and then I'm also going to have the little character that we can move around so what I usually do here is create an object for each thing that we're gonna create and in this case we're just creating one single circle and then put its properties in here like where we want to put it on the X&Y axis so let's start this at 200 X 200 wah 200 Y and then the size which is going to be basically the radius of the circle and then we have a DX value which I'm going to set to five and dy which I'm going to set to four now this is basically the the increment that we want to make in terms of movement on the x-axis and then the increment in terms of movement on the y-axis because when we use animation with canvas basically we repaint the canvas over and over and we can change the position of things in in that repaint okay and this will make more sense when I get to it but now that we have these properties let's create a function to actually draw the circle all right and we don't have to break the stuff into functions but it's just it's cleaner to do it that way so let's take our context and begin path and then let's draw our circle so we need to do an arc and we want to take our circle prop circle object and take the x value for the X access position and then take the Y value you should probably spell this right that we want the radius which is the size then we want we want to draw a circle full circle so zero and then math dot pi times two okay and then let's give it a fill style so we'll set it to purple or whatever you want to set it to and then let's fill it okay so I can now go down here and I can call draw circle now we only have one one object on the canvas that we're working with if you had more like for instance with the breakout game we have draw bricks we have draw the paddle and draw the score and all that stuff but in this case we're dealing with one thing now I want to be able to animate this so the way that we do this with canvas is we have a function and I'm calling it update because that's what it's doing is it's updating the canvas you can call it paint or animate or something like that and we want to actually move the draw circle into there okay or any any object that we're drawing we want to put in here and then just call update so you can see that'll still show us the circle now the key to animation here is a function that's available to us called the requestanimationframe and this takes in a callback which is actually going to be the update function now I'm gonna just do a quick console.log here of 1 2 3 and save and nothing's moving yet but if I open up my console you can see it's logging 1 2 3 over and over ok so it's just it's basically repainting the canvas for me now I don't want to just log something so I'm going to get rid of that what I want to do is change the position of my circle so lets and you can see how see the border of this what's what's happening is it keeps drawing it over and over when I if I get rid of this and reload see how the the edges are nice and smooth but once we run that it's drawing it over and over in the same position and you can see the border is getting kind of sloppy now I don't want it to keep drawing in the same position I want to change the position so let's go ahead and say change position okay and I'm gonna take the circle dot X which is that the x position so the horizontal position and I want to append to it so plus equal will append something and I want to append whatever the DX value is ok so if I save that now it keeps drawing it and it's in a new position it's basically incrementing by five every paint now the reason it doesn't just move the ball and it kind of you know extends like that is because we're not clearing the canvas each time and we need to so up here is where we want to use that clear rect that I showed you a bow except we want to start at zero zero which is the very top corner and we want to clear the entire thing so the width is going to be the whole canvas width and the height whoops and the height is gonna be the whole canvas height so now if I save nothing's happening that's because I didn't use my context and there we go so now it's doing it but it's also clearing on every paint okay so it just moves over now I wanted to also move down I want it to go right and down so where we change our position let's now take the Y position and let's append on to that the circle dot d y-value which i think is yeah it's four so we save and now it goes over and down okay and the down speed the dy is slightly slower because if we don't do that I noticed it just bounces back and forth like this okay so I want it to bounce around the canvas now the reason it's not bouncing is because we haven't added any kind of collision detection so it just it just keeps going off the canvas so now to if we want to add some collision detection let's say detect side walls so I'm gonna go ahead and add an if statement here and the way that we do this is we just thought we just need to find the position of the circle and the position of the edges and when that if they touch then we need to do something about it we can neither bounce it off we can stop it whatever we want so let's say if the circle X okay so I'm gonna first work on this this right side wall which is at 600 pixels right or the width of the canvas so let's say if circle X plus the circle dot size because we need to take into account the size of it because it starts on the left side so we want to account for the whole circle if that is greater than the canvas dot width which in this case is 600 pixels then that means that it's going it hit the side so I'm just gonna right now do a console.log and just say hit okay so now if I go over here and I open my console and reload you'll see that right when it hits the side it starts to fire off this hit now I don't want a console log hit I want it to actually turn around so to do that we just need to send it back the other way by setting it to a negative number the negative version of this DX so we can do that by saying Circle dot DX and we can use this asterisk equals operator and set that to negative one so if you've never used that operator it's just a shorthand for doing loops for doing this circle dot DX and then we're setting it equal to circle dot DX multiplied by negative one which will give us in this case negative five okay whatever this is it'll give us the negative version which will then send it this way okay because positive goes this way negative goes that way on the x-axis so let's save and there we go it bounces right off so now we want to handle the other way because if I change the circle X right here if I set it to the negative that'll send it the other way and it goes right through so I'm gonna set this I'm just gonna put an or in here and say if the circle x position now we want to minus the circle size in this case because we're going to the left if that is less than zero which is the side remember this is zero and then this is the canvas dot width which in this case is 600 so if that's true we want to do the same thing so let's save and now it bounces off so now it bounces off each side I'm going to change this back to a positive okay now we want to handle the top and bottom walls so let's say detect top and bottom walls so we're basically gonna do the same thing just with the with the height and with the y-values so I could actually probably just copy this okay so we're gonna deal with the y-axis now so if circle dot y plus circle dot size because it it has the same height and width so sizes is we can use in both cases and then we want to see if that is greater than the canvas height in this case okay because we're dealing with the top and bottom so that'll handle the top I'm sorry that'll handle the bottom because canvas dot height which is 600 is down here this is zero okay zero 600 y 0 600 X now we want to handle the top by saying if circle dot y minus circle dot size is less than 0 same thing so now I'll save whoops that didn't work what did I do here circle all right here we're setting D X this should be dy and there we go so now it's gonna bounce off each edge okay and you would do the same thing like in the breakout game we use this we do the same thing to see if it hits the paddle or if it hits the bricks that's how you have detection or collision detection so that's kind of the first basic animation that I wanted to do now I want to do something where we can actually control so I'm gonna comment this out because I want to keep all this here where are we so let's comment that out so I save that's going to just clear up and let's say animation to say character alright so this is gonna be kind of the same type of deal we're gonna create up what's called a player or I'm calling it a player instead of a circle and it's going to be the little image of the wizard now this is going to have a couple extra properties it's going to have a width and a height because it's not the same instead of size like the circle will have width and height so I'll do 50 with height let's do 70 the x-value so we'll start it at 20 X and 200 Y which is gonna be like right here and then we're also gonna have a speed value and we'll say five and then DX and dy however DX and dy are going to be set set to zero to begin with because in this case the thing isn't going to move automatically it has to wait for our keyboard events unlike the ball which moves right away okay so these are going to be set to zero now to bring an image in we need to actually add it to the Dom so in the index.html I'm gonna add an image with an ID of source and the source is gonna be my little character so Sharpie Angie I think it's called and then if I save that you're gonna see them down here however in my CSS I'm just gonna set source to display:none okay so now he doesn't show anymore now we want to bring him into our JavaScript which I'll just do it down here so let's say Const image set it to document dot get element by ID and it has an ID of source now we want to go down here and let's create a function called draw image or Drock let's call it drop slayer and to do this we just call our context and it has a draw image method which is going to take in the image it's going to take in the where we want to place it so I'm going to use my player object X value that's the X and then the Y value player dot Y and then the width and the height which is also in the player object so player dots with and then player dot H okay and then we're gonna have an update just like we did with the the circle animation and then we're gonna call draw player here and then we'll call update here okay so if we save that we should see our little guy alright so as far as as far as the animation goes we're going to do the same thing we're going to call request animation frame so that will keep running if I save that you can see that it's getting darker around the edges because it keeps drawing the player now we want to change the players position well actually let's clear it first now in the last time the last time I just put clear rect right here but usually what I'll do is have a function oops to do that so we'll just create a separate function called clear and then we'll call clear rect we want to start 0 0 we want to go canvas dot with canvas height okay so let's see that clears it all right now we want to basically change the position oh I forgot my context again don't know why I keep doing that so now we want to change the position based on our keyboard events so let's create let's have a function in here right under draw player we'll call it new position and then we'll add this up here position and what this is going to do is set the players x-value will not set it but append so we want to do plus equals whatever it's DX value is and then let's set player dot y we want to append to that whatever it's dy value is okay now it's zero by default right in fact if I were to change this to four and save it'll just go and move for automatically but I don't want it to do that we want our keyboard events to move it so let's go down here we'll go so yeah we'll go under update and let's add in here document dot add eventlistener and we're gonna listen for a key down and when that happens we'll call a function called key down I'm going to do the same thing for key up okay and then let's go up here and let's create a function called keydown which takes in an event parameter and we'll also have key up now in key down I'm just going to do a console log of my event parameter dot key because that will actually show me which key I'm pushing because remember we we want the arrow keys to do this we don't want to hit the letter A and have the guy move so let's open up the console and if I hit the up arrow we get arrow up arrow down our left arrow right and then if I hit any other letters or any other Keys it also fires off alright so what I want to do here is check for the key that I'm clue that I'm hitting so let's do if and then check each key if that is equal to arrow right now sometimes I forget I think it's on other browsers or something it can also be right like this so we want to check for that as well so if that's true then we want to call a function called move right which we haven't created yet else if let's say else if e dot key whoops I forgot up here we need to do or a dot key okay so we'll say if a dot key is equal to arrow left or a dot key is equal to left then we want to move left alright and I'm just going to copy this elsif here and paste that in here and here and then let's change this to up both of those and then this will be move up and then let's change this just change all those two down all right so now we just need to create those functions so let's do move so these functions are going to be really easy actually we're just going to change the DX and dy so we're moving up so that's the Y access so dy and we want to set that now to go up on the y axis it has to be negative right and we're going to set it to whatever the player speed is in this case five so if I save that and I tap up it just it goes up okay and I'll get to being being able to make it stop in a second let's just finish the rest of these so I'm going to copy this and let's do down so move down we're still dealing on the y-axis except we're going to it's going to be a positive number for the speed okay so let's do move right right is positive on the x-axis so DX equals player speed and then left is going to be negative on the x-axis okay so now if I hit down if I hit right goes up fight tap up now I don't want it to keep going I want it to stop when Mikey goes up right so what we'll do is in key up I'm gonna paste this in just because it's it's really simple it's just a lot of typing because there's a lot of keys so we're just checking to see if any of the arrow keys are hit okay or if the key equals I should say any of the arrow keys then we're gonna set both the DX and dy back to zero which will stop it so if I now tap right and let go it stops right if I hold it down it'll go but if I let go it stops and now I can control my little character all over the screen okay now he still goes outside of the canvas so the last thing I want to do is some collision detection and just make it stop I don't want to bounce off I just wanted to stop so let's go up to let's go into new position because this is where it actually changes position and let's call detect walls okay we could put it right in here but I think it's cleaner to just put a function in okay so to detect walls let's first do the left wall so this is actually pretty easy so the left wall here is zero right it's X zero so we want to see if the player dot X is less than zero that means he hits the wall so what do we want to do we just want to keep them there so we'll set player X at zero so if I save that and now I go left and I hit the wall I can't go any further it just keeps me at zero so that's pretty simple let's do the right wall so this time we're gonna do if player dot X now we have to take into account the width okay because it's this side and this is the start of the player so we need to account for the width of the player as well and then we're gonna say if that is greater than the canvas dot width which is the it's the one in this case 600 pixels if that's true then we want to just keep him at the edge so we'll set his whole set player dot X to the canvas dot with but we need to also take into account the width of the player like that all right so now if I go and I go all the way over he stops okay so now we want to handle the top and bottom let's do the top first top is really simple basically the same thing we're doing here just on the y axis let's say so change this to Y and then set Y to 0 so now if I go up I can't go anymore and then for the bottom almost the same thing as this so let's say bottom wall except we're dealing with the y axis and we're dealing with the players height and we're dealing with the canvas height and height and set that to why okay so let's try the bottom and there we go so now we can move our player around and if we want to change the speed we can so if I change this to let's say 10 now he goes faster so it's not I mean it's not a game or anything but it gives you an idea of how to start creating games you know so you could create other objects and stuff like that but yeah so I think that's going to be it I know this was kind of a long video I will have this codes hosted somewhere or maybe a code pen or something I'll have that in the description but that's it thanks for watching guys I appreciate it and I'll see you next time

Channel: Traversy Media

Views: 114,049

Rating: 4.9736915 out of 5

Keywords: canvas, html5 canvas, canvas API, javascript canvas, html canvas, traversy media

Id: gm1QtePAYTM

Length: 53min 55sec (3235 seconds)

Published: Tue Jan 07 2020