HTML5 Game from scratch step by step learning JavaScript | Laurence Svekis | Skillshare

HTML5 Game from scratch step by step learning JavaScript

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (2h 18m)
    • 1. Promo video

      1:13
    • 2. HTML5 Game Course Introduction

      3:39
    • 3. Setup HTML5 Game template

      3:01
    • 4. HTML5 Game connect canvas to Javascript

      5:10
    • 5. HTML5 Game Use JavaScript to create canvas

      3:26
    • 6. Setup GameBoard HTML5

      10:40
    • 7. HTML5 drawimage selecting image pieces

      9:44
    • 8. HTML5 Draw Text setup dynamic variables

      8:03
    • 9. HTML5 Game setting event listeners

      6:40
    • 10. HTML5 Game active keyboard

      5:50
    • 11. HTML5 Game movement

      5:48
    • 12. HTML5 Game create an enemy

      6:54
    • 13. HTML5 Game random enemy creation

      6:02
    • 14. HTML5 Game enemy moving

      9:24
    • 15. HTML5 Game calculation adjustments

      3:05
    • 16. HTML5 Game adding powerup pill

      9:01
    • 17. HTML5 Game collision detection

      10:00
    • 18. HTML5 Game powerup functions

      6:50
    • 19. HTML5 Game runaway ghost

      1:59
    • 20. HTML5 Game hit test ghost

      8:41
    • 21. HTML5 Game tweaking the game

      4:32
    • 22. HTML5 Game add a second enemy

      8:39

About This Class

Learn how to create HTML5 and JavaScript games from scratch Step by step tutorials with real HTML5 code examples

Crash course to learn how to create an HTML5 game from scratch for beginners.

Core HTML5 training using canvas and setting a gameboard. Adding text and dynamic variables. Using event listeners to determine keyboard actions and create movement. Create a random enemy and have it move around. Interacting with game items like a power up pill. Collision detection to determine multiple reactions to object interactions on the game board. Tweaking and fine tuning game interactions for better game play.

This course is designed for anyone who wants to better understand how to create their own HTML5, within this course we show you how to make a basic HTML5 game from scratch. You can reuse and practice with the sample code in the course.

We start with a blank document, add in html and then JavaScript to create the game.

The game we create in the course is a pacman type game with a pacman character that can be moved around the screen. There are also 2 ghosts which move towards the player or away if the pacman is powered up.

We walk you through step by step with detailed explanations of code and more.

  • quick lessons get right to the point
  • fully covered topics with real world examples
  • challenges and lessons and code samples
  • code snippets
  • Links to top resources to save time
  • new course material added regularly
  • trusted name in education since 2002
  • full HD easy to read source coding
  • quick response support to students
  • regular discussions

We teach you the latest techniques and tools to use in order to create html5 canvas animations and content. Everything you need to know is included in this course. Learn at your own pace, lifetime access to this course.

Transcripts

1. Promo video: within this course, we're gonna be showing you how to build an HTML five canvas based animated game from scratch. I've been a Web developer for over 14 years, and I'm gonna be sharing my knowledge with you, showing you step by step, how to create your own HTML five based. We're gonna be discussing the basics of how to set up html five and interact with canvas. We're gonna be talking about how to lower images onto the canvas. How do you use and interact with keyboard and event listeners? We're also gonna be showing you how to create automated opponents within the game, also adding in different game objects and then using collision detection in order to create interactivity between all the various objects. Within this, we're gonna be also covering tweaking fine tuning animation and a whole lot more when you're ready to begin creating your own HTML five games. Let's begin 2. HTML5 Game Course Introduction: within this course, I'm gonna be walking you through step by step, how to build owed a javascript based html five game from scratch. We're gonna be including all the different components, explaining them along the way and explaining how the different functionality works within canvas HTML five and JavaScript and how they all work together. My name is Lawrence, and I've been a web developer for over 14 years, and I'm gonna be sharing my knowledge with you. All of the source files. Are you also going to be included? The editor that I'm gonna be using is brackets. So this is a free downloadable editor from Adobe. I'm going to include a resource file where we're gonna have all of the resources used within this course links to all the difference resource and information files. There's some code pen files as well. So Code Pen is an online editor which you can use in order to practice JavaScript, html and CSS directly on line. All of the code is going to be written from a blank template, starting with the HTML bringing in the JavaScript source. And then we're gonna be predominately working with just the Js file. and this is gonna be able to accommodate the entire game build. So all of this is gonna be included. Step by step, how to build out the game from scratch, starting with the different variables to use. How to set up the canvas, how to bring in images. Loading images, adding in listeners, keyboard listeners listening for key down functions, Arrow keys checking to see which keys air actually pressed. I also preventing runoff of the various objects on the screen and then some additional functionality of those objects. Some useful functionality here and different ways to break apart and set up games. Looping of games and animation of games and then rendering out animations onto the canvas, doing collision detection, adding in different objects on the screen and then moving around those objects on the screen, also preventing them from running off the screen for movement. And then, of course, collision detection and then drawing out different objects such as dots so circular and rectangles as well. And then finally drawing out those images on the screen and writing text onto the canvas. To be able to complete a simple game like this simulation of Pac Man vs the two ghosts. It's encouraged that you do follow along and practice the code that we're discussing. I even create your own versions of the code using your own editor O are using an online editor soon. You ready? Let's begin creating our first HTML five game. 3. Setup HTML5 Game template: within this lesson, we're gonna be talking about how to set up our HTML five game. So the first thing that we want to do is declare the document tight and you do this by typing in dock and declaring at HTML eso this lets the browser know that this is an HTML five document, and then I'm gonna add in the opening and closing HTML tags, put some spacing in. Their next thing that I want to do is set up head. So this this is where all of our meta information gets set up on that I'm gonna add in a title as well. So I'm going to just call it game tutorial. And now we're ready to set up body. So opening and closing body tags. So I do have the autumn automatic closing tags set up. I'm using brackets, adobe brackets. This is free downloadable editor, which you could download yourself. Or you could use your favorite editor as well. So the other thing that we're going to be doing is we're going to be creating some styling , and I think for now I'm just gonna keep it on page styling, and then we're also gonna link out to JavaScript. So you create a brand new JavaScript file and link out to that as well. So I'm gonna do script and do a source for the script. Eso I'm gonna just call it Js dot Js And so this will pull pull in our JavaScript file, and then we'll do a split screen wearing and include the JavaScript because it's going to be the JavaScript that's gonna add that functionality Teoh your HTML five game. And lastly, I want to add in canvas. So this canvas tag is one of the most crucial important tags here for your HTML five game. I received that. Tidy it all up. You have to select all and then Aiken beautify it. This makes it more readable. And then here, within canvas, I'm gonna set a width 600 I also give it a height of about 400. So just do 400. And now when I go to the page so we no longer have a blank page, we've got all of that. Now all of this template set up and it's ready to go. Got to create the JavaScript Js file as well. And then we're gonna build out the game from from this point on 4. HTML5 Game connect canvas to Javascript: within this lesson, we're gonna talk about setting up and actually hooking into our canvas into our JavaScript . There's a number of different ways to do that. You can actually even create the canvas using JavaScript, which we're going to show you as well how to do that. But for this example, we've actually just created using html and now I'm going to sign it and I d So I'm gonna give it canvas. So I'm gonna give it an idea of canvas space and then now within my JavaScript. So I'm gonna connect to it using setting up canvas and canvas I'm gonna do document get So this is working within the dawn because now that I've given an I d, I can actually isolate and pick up this particular element in the HTML five, so get element by i d. So now I just have to indicate the i d of the element and then that's gonna tie the canvas to this particular object in the html eso Now we've got get element by i d. And now that we've identified it by the i d. Now we can actually set our interaction, which we're just gonna call C T X and this is gonna allow us to actually interact with the canvas in two dimensional. Allow us to draw an update, images and content within it. So pulling in this variable that we just set up so using canvas and then the method is get context and the context is gonna be too deep. Now that we've set up our JavaScript, there's one thing important thing to note here because we are using the dawn and with the dom, we got to make sure that the actual page has loaded in order to interact with the dawn. Eso That's why we're actually gonna take our JavaScript, and we're gonna move it below the dom objects because otherwise it's actually not gonna work if you're keeping it at the top there on the page. If we're connecting the JavaScript over here, we're not gonna be able to actually access our canvas. There s So this is one of the reasons why we're putting our JavaScript below so that all of this information gets loaded into the dom, and then we're ready to interact with that content. And now we're going to add in just a quick test, just to make sure that our HTML five is actually hooked up and working. So we're gonna type in some text into our canvas. So right now there's nothing in the canvas. We haven't loaded any information and I'm gonna type in some basic text and its is going to see Hello world. Close that off. And now, after position where the text is so over here within our hint here we noticed that the string text number X number. Why? So this is going to be on our X axis. So location on our X axis we can do something like 10 and are why access? Since we've got a height of 400 maybe we can do something like 1 50 And then we've also got a max with as well. So if we want to limit the width of the content area or the text area that we're adding into our canvas weaken do their do that within the next comma. But right now we're just gonna leave it a default because I don't want have to set anything there, go to our web page and refresh it. And we see that we do have that Hello world And this is on our on our canvas area. Eso one of the things to I'm gonna set up within the style just so that we can actually see where our canvases. So I'm gonna set up canvas, and so this is gonna apply to any canvases that I have on my page. So border solid one pick and I'm gonna give it a color of black. So save that Beautify that. Make it more readable. Go back out. Refresh it. So now that we've got a border so we can actually identify where our canvas is located. So it looks like we're ready to begin interacting with our canvas and continue to build out our game, which we're gonna be doing in upcoming lessons. 5. HTML5 Game Use JavaScript to create canvas: in this lesson. We're gonna jump back a little bit as promised, and we're gonna look at a way of creating the canvas without typing it in HTML with typing it within the HTML. I'm gonna comment out the canvas, go back out to our Web page. Refresh that, and we see that we don't actually have anything there when we go to the source that's commented out now and we're still linking out to our JavaScript eso within here. We're actually going to set up our Candace what, using JavaScript. And this saves us the trouble of setting that up here and then actually cooking it into the dom and hoping that so what we had noticed within the previous lesson is that when I placed my JavaScript above the actual HTML contents, we weren't able to connect into that particular canvas that I d. And doing it this way will actually ensure that everything is loaded and that you are able to connect to it. So the first thing that we're gonna do is do document and we're gonna create on element, and the element that we're creating is a canvas, and the next thing that we're doing is we're going to do C t x the same thing that we did before and we're just gonna actually copy the same because at this point, we're creating that within the dawn, and now we're hooking it on so that we can actually manipulate it with the CTX. And there's a few other things that we have to do. We actually have to give the canvas Ah, height as well as a with. So we're going to stick with what we had up there at the top, and I'm gonna give it ah, height of 400. And with of 600 that's 400 pixels by 600 or I should say 600 by 400 horizontally. And then now what we need to do is we need to actually a pen this to the body tags. So we're gonna attend, upend a child into their, and that's gonna be that canvas object that we've just created. And then also, if we wanted to weaken right up to it on hello world. So now when I go to the page, I refresh it. We actually get the same result that we did from the previous lesson. So This is the way to create it, using JavaScript when the page loads and it gives us essentially the same result that we're looking at in the previous lesson. So again, within the source code, we've commented that out and in the next lesson we're going to start getting into some or exciting stuff with HTML five canvas and actually start creating out some game elements. 6. Setup GameBoard HTML5: So now that we've gone over some of the basics of setting up canvas on your website, we can begin to start loading in some actual game components. And one of the first things that I want to load in is actually, I want a load in an image us. We're gonna be making a Pac Man a mini pacman type game where we're gonna have us, Pac Man, we're gonna have random ghost and going to create a dot And when the Pac man eats the dot, then he can eat the ghost. But if the goat gets the Pac Man without being blue or without being in the Mord when the dog has been eaten, then the Pac man's gonna lose. So just do a quick kind of scoring game like that and what I'm gonna views is I'm gonna use this PNG file. Eso This PNG file has a number of different different modes, different icons here. So we've got our ghosts on. We've got our Pac man with the open mouth, closed mouth and all the way down. So we're gonna be using all of these the blue ghosts as well eso Let's begin with bringing in that image into our canvas. Eso in the last lesson, we talked about how to set up our canvas and how to bring it in with JavaScript. So I'm gonna go ahead, and I'm just going to start removing out some of this here, and I'm gonna change ctx to context. And we're going to keep this. We're gonna be setting up that, uh, that size here of height of 400 with of 600. So this is a good beginning for what we're gonna have within the game. Eso What I want to do now is actually want a load in the image. So I want to set up a brand new image. So I'm gonna do main image, and I'm gonna equal it to new image. And then again, I'm gonna use that same object. So mean image is my object. Actually, this should be an equal sign, and I'm gonna do when main image is ready. So when it's loaded So by default, I wanna have a false here, and I'm gonna change it to true. Once it gets loaded and mean image ready, or we're going to call this on load. So when the image finishes loading. We're going to run. A particular function on this function is going to check to make sure that it's ready. And if it's ready, it's going to set the ready to true. And it's gonna launch the game rendering function so on Load check ready. So this is gonna be our function that's going to check to see if things were ready, and then over here is mean image. So this is gonna be the source of that image. So I'm going to use that same one that we're just looking at earlier. It's just called packed up PNG. So again, just to review what's happening here, eso I'm setting up a new image object. Uh, and I'm setting it. I'm giving it ready and check on changing to false by default. And when the image loads, it's going to run the function. Check ready, and it's going to use the source pack dot PNG as the source. So this means that I need to agree that function here called check ready Now we got past anything there in that function, and then I can just do this ready, and I can set that to troops and I'm gonna have another function within here. I'm gonna call that plea game. So once the images loaded, it's gonna end up running this function. That's just going to do play game. I could probably I simplify it as well, just maybe put play game here when it's ready and loaded. But just in case I want to do something else, I'm gonna actually keep that within this function s So this is kind of preparing it for expanding for later possible expansion that might be required within this game. And I was gonna beautify, that s So now we need to create one more function and it's gonna be the play game function . And what this one is going to do is this is gonna be the starting the game, launching the game, that type of function. So again, just function, play a game. So everything in here is once the game gets started, eso once our images air loaded, then we can do whatever else we need to do. And here we launched this function that's played game and this function is actually gonna launch one more function. It's gonna be called render, and we're also going to be including the loop in here as well within the play game method, and we're gonna be getting into that later on. So what the render is this is actually going to be where we're actually gonna output the content on our within our canvas. And this is just gonna be called function render. And so for now, what I want to do is I'm gonna do context, Phil style, and I'm gonna give it a color eso and I'm just going to give it a color of black eso just for now, we're going to start out with this black background color, and I'm gonna quickly go over what we've just talked about as well, so black. And now I have to do the actual fill of the rectangle so much like what we looked at before . So I'm going to start this off at 0.0 and I'm gonna bring it all the way up. So here we have our numbers. So when we do fill rectangle, we need tohave all four corner numbers. So we need to have the X the why the w in the h. So the X coordinate the y coordinate. This is gonna be the width and then the height and with width and height we can actually use this canvas with and canvas height so that because we do want to fill up the entire the entire canvas. And of course, if you didn't want to fill the entire canvas, you would adjust this accordingly. Now we're just gonna go back out to the page and there's not that much happening right now . We've got our black rectangle, it's filled black. So just to show you again so we could literally have whatever color we feel we want us, we can use Hexi decimal. We can use RGB as well on this will update the entire background and going back over what we've set up here s so to recap. So this is what we looked at in the previous lesson where we created the canvas context to d we appended it to the body tag within the HTML, we set canvas height of 400 with a 600. So probably just gonna swift swap these around because normally we do with and then we do height on, then here we're just doing an image load eso we're setting up main image giving at an object of image we're doing ready, which is gonna be false s. So this is something that we can or cannot use again, Depending on what we're doing later on and how we're scaling it, we might want to know that we do have a value here of main image ready that will tell us if this image is loaded. Eso If we're loading multiple images, then we do wanna have that ability in order to tell that this image is loaded and other images have loaded as well. So, again, this is for if we wanna build that out eso Over here, We're doing main image on load and what's happening here. Once the on load is complete, it's going to run this method called check ready, which is just over here. And this is here where we do the flipping, the switch of false to true. And then we run one more function within here, and this is the function. And again, this is going on for scaling and upgrading within the cord later on. So right now, it probably looks a little bit strange that we probably could have just done render when its on load. So we don't necessarily need those at this moment. But I've added them in because we are going to be using them and working with them as we progress through this course eso What's happening here is all we're doing is we're connecting back to that canvas that we built originally up here and where we've got a few built in functions here. Eso Phil style. So this is giving us the color that we're gonna fill it. And then here were doing ah, Phil rectangle and these air the dimensions of the rectangle that were filling up. So in the next lesson, we're going to get into some really exciting stuff. We're going to start bringing through that image, and then we're gonna be doing some really cool stuff, making the images move around. And so on s Oh, this is coming up in the upcoming lessons as well as we're gonna build in the actual game loop and perform some functionality there as well 7. HTML5 drawimage selecting image pieces: within this lesson, we're gonna talk more about the image and adding in the image within our canvas. So in the previous lesson we looked at and we've got this image where we've got all of our different icons that we're gonna be using within the game are contained within one image. Now, of course, you could have multiple images you could load them all in. But what I'm doing for the purposes of this course, is I'm going to just use this one image, and I'm gonna pick out certain pieces of the image that I wanna show on the canvas. So for the Pac man, I'm gonna show just the park man for a ghost. I'm gonna show a ghost, and it's actually going to make it a little bit easier for me when I'm actually doing some functionality within within this that are not going after loaded multiple images. I've got it all contained within that one image. And as we saw in the previous lesson, we load in that one image and we're ready to go and use it. So now, in order to actually add that image, it's gonna be really easy, because all we have to do is do the method draw image, and this is going to do the whole functionality of the image. We just need to answer a few vital pieces of information. And the 1st 1 is, When do you draw image? Where is it getting the image source from some over here, we've loaded it. We've loaded and into the object, my main image. So all I'm doing is just connecting me and image that we've loaded previously. And I'm drawing it out. And then here I have to specify where I want to draw it. So if I want to draw 00 so this would be right in the corner. So going back out to our examples or pulling not right up in the corner. If I wanted to move it over on the X coordinates, I could do that, and then the white coordinates. I could move that around as well, so there are a bunch of additional additional parameters that you can add in Esso. This is by default. This is the simplest that we can do. Eso We can also add in second set of parameters, and we can also add in additional parameters within another line where we can be picking out a certain piece of it s Oh, I've got an example here, within code pen I O s. Oh, this is a code pen. I oh, that's I can provide a link for this as well. Eso here we've got an example of we've got our draw image And so what we're doing right now at the moment is we're just drawing the image as it is. We're moving it over. So ours was, I think, 40 by zero. So we're putting it over here. Eso as you saw when we did load it. Actually, there was a whole bunch of additional parameters. Eso the next one is gonna be the the with on and the height of the image. So if I wanted toe have an image 20 by 20 and I'm taking that whole entire image, I'm making it 20 by 20. I can do it that way. Eso If I wanted a 1 20 by 1 20 I could do that if I wanted it even larger to 400 by 400 so on. So this determines the height off the the image that we're going to be using eso. The next set of parameters is actually gonna be It's going to actually change this around quite a bit. Eso What we want to be doing is we want to be able to pick out one of these ghosts here or actually the Pac Man and isolate that particular image and bring that into our canvas. Eso we need some mawr coordinates here that we need to add in. So the next set of coordinates that were adding in is gonna be the x and y coordinate of the top left corner of the sub rectangle of the source of the image. So if I wanted to pick out so we look at the source of the image. So this is this image over here, so maybe I can pull that onto a separate window here, and we can see that this is the source of the image. And maybe I want to just get the rhinoceroses face. So just roughly looking at this when I go into the source of the image, Aiken roughly pick out that this is probably about 60 pixels in This is probably about 150 down, so I'm going to just go with that and I'm gonna go 60 in do 150 down. And as we see, we don't really see anything happening up here because these have actually changed now. So we're no longer looking at these coordinates being the width and height off the actual destination canvas image. We're looking at the source image next the width and height of the source image. So I'm gonna pull in. And so now we see that if we take the coordinates 60 by 1 50 So that brings us actually just into rate about there. And we take 10 by 10 of that and we put it as fork. So maybe what? Just change this to 100 by 100. So we're actually out putting this 100 by 100 eso. It's actually bringing in the face a little bit more as well. So just to go over this again because this is actually going to be fairly complex. Eso if I want to pick out on. So the first thing the first parameter there is fairly straightforward. It's just gonna be the image, and the next four are gonna have to do with the source image. So the x and y of the source image and then the width and the height of the particular piece or chunk of information that we're getting. So even if I reduce this, we see that it actually stretches it out. Because now all I'm doing is I'm selecting out 20 a piece of 20 from there. But it's being an elongated to 100 when we go out to our destination. So if I was to bring this down to 20 than if these two match, then we're actually picking out a slice of that eso these This is 1 50 so it doesn't necessarily match with that eso again. This is on fairly complex, but visually, what we're going to do here is that we have to look at the source first, and then we have to pick out the destination from our own image. So going back to our source code and trying to pick out. So now that we've got the coordinates there, so now we have to actually update this, and we can set ah width and a height and pulling out all of that information here. So this is where the position on the image that we're trying to pick out. So this is 3 20 the point at 3 20 The next point is, why? So that zero. So that's right up here is where we're picking it out. We want to do 32 picks across 32 picks down to pick out that particular piece of the image . So that's where we get that 32 32 then the other four numbers are where we're locating. So 00 is where we're locating. So if I wanted to set it at 50 and 50 I could set that. And if I want to keep the Pac man the same size, I could do 32 32 that's going to shrink our Pac man down. Eso we can actually change this and make our destination Pac Man as Bigas we want. So it could make him really big if we want. And we can bring them all the way back down to his default signs. There s so I'm going to stick with the size of and a stick with a size of 32 and then in the next lesson, we're gonna be talking more about how to make this figure dynamic and in order to start moving them around the screen and start having some added functionality to our game. But this is how to pick out the image and so loading that pack dot PNG and then isolating that particular piece of the image and extracting it out onto the canvas. 8. HTML5 Draw Text setup dynamic variables: So now, within this game, what I want to do is I will actually want to make some of this stuff dynamic. And what we're gonna be doing in the later lessons is what we had mentioned earlier. We're gonna be looping through this rendering. And what's actually gonna be happening is that we're gonna be clearing out that canvas and redrawing everything over and over again, frame by frame. And that's how we're gonna have movement, interaction, calculations for the game and so on. So that's all gonna be done within this render function eso For now, What I want to do is I want to be able to isolate this this part of the image because as we look at, I've got this mouth opening and closing. I've got this up and down. So I want to actually set values for these because I want to have the ability to change them dynamically as events happened within the game. And as things change eso I do want to have that ability to have a dynamic interaction. So this is gonna be I'm gonna call it pack mouth and the reason I'm calling that is because our mouth is going to open and close s So this is what we're just gonna call it in order to identify it as being the mouth and then pack direction. And this is the actual direction that our character is going to be moving in and we can actually pull all of this stuff in within one within one object. So we knew we do need to create a player object, and this could hold a lot of variables and values. So that's what I'm gonna go ahead and I'm gonna create over here, and then I'm going to create it as player ex player. Why? And I'm gonna have this pack mouth and packed directory object. So over here, instead of being a fixed position. So I still have yet to create thes objects. So player acts player. Why? So it's gonna give me my coordinates of the player, and I'm just gonna turn these into objects as well. So these are gonna be four objects, and I'm just going to go up here, and I'm gonna preset preset the player object and the way that we set objects. So variable player equals, uh, curly brackets, so x so by default I'm going to give X starting position of 50. I'm going to give why a starting position of 100 and then we hade one that we called pack mouth. And I'm going to give that the value of 3 20 that was there by default. And then I had another one called pack direction, and that one was zero, because that's where it's actually going to change. When we changed changed directions, we're actually gonna be suing a different image as the direction changes eso for right now , this is probably all we need to select these values of 32 eso If we want to make them bigger and smaller, who want tohave that happening dynamically, we could add that in as well. So instead of being 32 we could change those dynamically. So if we want it to, I just got a call it peace size. And for now it's gonna be 32. That should be a comma. And then, of course, if we had different dimensions, So if we had a different, uh, horizontal size a different vertical size, we'd have to update that as well. So now, um, now we can begin to add in some dynamic functionality as well with into our a game. So for now, I'm actually gonna change this back to 32 so it fits on one line nicely because that was getting a little bit long. And then, of course, if if the need be, we can always change that back to the size there. So we're actually not going to use the science value. And within the next lesson, we're gonna talk more about how to getting t to set up your keyboard. Functionality s are gonna be getting into that s o for now for thin this lesson. We're just going to finish this off with setting up some scoring information because just like with any good game, you do need tohave scoring. So I'm gonna set a font. Now, you don't need to set a size. You can just use the default values of fonts. But for this tutorial, I'm just gonna set in a size here of 20 picks. Verdana font and I have to also do the fill style because we're using blue. If we change it to black our default text, it's not gonna be visible. So I'm actually gonna make the text white. And if you notice there's a pattern here on what we're doing, so the fill style is going to refer to the next actual action that's gonna fill. So if I didn't set a fill style, it would take it as blue. So I definitely want to make sure I set a brain. You feel style because I do want to have a different color for the text. And then over here is where I'm actually going to write in the text information. So I'm going to give the Pac Man and of course, we should set up a score. And here I'm just concoct in ating Ah, string here in javascript. So this should be fairly straightforward. And I'm gonna do a score for the ghost as well. And maybe I can set up ghost here. And then now I have to select where I want a position. It s O just like the image I can set up dot property that value there, the parameter there as what I want displayed. And then here's where I position so X first. And then why second? So I'm gonna put it at two and 18. Quickly go back out to our page. Refresh it. And I had to zip back here quickly because I do have to set up the score values because that's throwing an error. So I have to set up variable score and it's gonna equal it to zero invariable g score and equal that zero. So now when I go back out and refresh, it s oh, there we have our text on and are scoring and then what we're going to do as well. We're gonna have that score increasing as different actions and different things happen within the game. 9. HTML5 Game setting event listeners: So within this lesson, we're going to get into some really cool stuff where we're gonna actually be having some interaction happening. Keyboard clicks, they're going to get tracked, and then something is gonna happen once they get tracked. So first we need to set up an object. So it was going to call it Qi Click. And we're gonna have just a blank default object that we're gonna be using. And then here we're gonna set up some event listeners. So add event ID event listener, and we're going to listen for the event of key down. So this is pulling in the dorm and then adding, adding I different events. So we're gonna have a function event, and we do have to prod pass that parameter there. And we wanna have that false and then with in here eyes where we're gonna actually set up the event, so u s gonna call it Qi. Click. So this is that object that we just set up up here and then we're getting this event information and we're going to get the actual key code and this should be a period because we're getting the key code from from that event object, and we're gonna pass this over into another function. Eso for now. What I'm gonna do is console. Log that out. So launch, um, just back out to here, open up our console here, So I'm using, uh, amusing chrome. So there is a spelling error there somewhere. Go back. Oats. So now we see that when I touch on the keyboard were getting these objects that are sent in eso it's actually taking in and doing that event listening eso these air. Just when I touched the keyboard, I get these objects happening. Ah, and so where I got a pass over the key code and also within this key click objects. So we're actually not passing anything. So we're not putting anything. We have to actually set it as being true. Ah, And so now whenever we click a key, we're actually going to get a click. When we go key click. We're actually going to get the A s c character code for the key. That clicking. So this is down. This is left. This is up. This is right. So we see that it's actually building up. If I put in space, believe space was 32 each different key within the keyboard is going to return a second value within their eso This Actually, we probably have to start removing out objects cause we don't want to have all of these objects always all true. Ah, and we do want 1/2 removing those events. So we want to add in a second event, and this is gonna be key up. And this is going to avoid that first event and what it's gonna do, It's simply going to delete out that key click event so we should clear that out. So every time the key gets pressed in, we're gonna pick up that value, and every time it gets lifted up, we're gonna lose the rest of the values so it gets cleared out every time we raise the key . And this is gives us the ability to return back, that one value that we're looking for and then these air, the values that we're actually going to look for when we when we do our calculations. And we see here that sometimes if you do press a bunch of keys at once, it does pass through more than one value eso This is something We're gonna look for us well within the object. And that's what we're using an object Because we're getting, ah, a number of different values that could get passed through within here. Eso again Within the next lesson, we're going to get into some more interesting stuff. Eso for now, we're just gonna set up on additional function, and I was gonna call it move, and I'm gonna send that key click value within ah parameter there. And then I'm going to just set up brain you function. It's another one there, and I'm gonna call this one move so this will have everything to do with moving around the screen and we're going to check for particular values that were passing over. So we know that we're passing over those key click values. So we know that once we've passed the that over, then we have to do something dynamic with the calculation of where are players facing? And then again, render that out. So maybe what we can do for now is will render that out. And whenever a key gets clicked, I'll to Player X. And, of course, we're gonna change this. Uh, coming up in swell. So now when I go back out and refresh it so whatever key I'm pressing right now, we see that we do have are moving functionality, and in the next lesson is gonna be some or interesting stuff. We're actually gonna make the mouth open and close as we're moving around. And then we're also gonna add in the different directions, detect what key has actually been clicked and run that particular set, those particular values for the keys that get clicked. So it's coming up in the next lesson. 10. HTML5 Game active keyboard: within this lesson, we're gonna add some additional functionality that we've started out within the last lesson where we added the event listeners s. And then we set up a function where we're actually look listening for that move, picking up that key that was pressed. And then we're going to do some actions depending on what key was pressed. Eso There's a few more values here that I want to set up, so actually want to set up a speed value, and this is going to determine how fast the character is going to move across eso This is something again that we want to make dynamic and all of these variables, whenever you're setting variables, this gives you the ability to change them within the script. Ah, and then this is one of the reasons why we like to set so many different variables in the beginning of the game and set those up so that we can have the ability to change any one of these. So within this lesson, we're gonna be looking at changing the X, the why using the speed. And we're also gonna change this direction value because again going back to the image that we're using. So when the Pac man's going down, we actually want to change. Um, we want to change I which way he's facing. And this is one of the good reasons why using uh, image file like this is because I've got all of the required images right within this one PNG file. So getting back to the movement. So I'm gonna do a bunch of conditional statements, so I'm gonna do if start at 37 in key Click. So this is the, uh this value that we're passing through here within the function and we want something toe happen. Eso what we want to do if it's 37 is the left key. So we want to actually do Player X minus equal and and a player speed. So it's gonna give us that dynamic value, so that should be unequal. Site eso This is going to subtract the speed and then also I want to set the direction so clear a pack direction and eso the going back to our image. If I'm going by default going right, it's going to be zero thes air, all 32 by 32. So 32 is here. So this is going down is 32 so 64 is going left, so I set that pack direction equals 64 and then I'm going to do this for all other keys as well. So I've got a number of different keys, and the good thing about the arrow keys is they're all consecutive. So I've got 37 38 so 38 is actually gonna be going going up. So it's the up key s o within 38. We have to use the Why coordinate? We have to do speed. And our direction is going to be 96 I believe from the calculations. Next, we want to do 39. So 39 is gonna be X. So this is where we had our default initially. So we're just adding it. The player speed and our direction is going to go back to zero and then 40 finally is going to be incremental ng wai So going down. So we have to do why they're change this to a plus and our direction is gonna be the last one there that's available is 32 eso just a quick look at this and we should be good to render this out. Eso now going back out here, We'll see what happens when we touch the arrow keys and we see that we do have our movement in place. Eso quite a few things that are coming up in upcoming lessons. Eso I do want to have that mouth opening and closing eso That's going to be something that's going to be fairly easy to set. I also, um we're gonna also have Teoh make sure that we don't go past our limits here of the canvas . So canvas with and canvas height. And when we do pass the limit, I want to set it back to this site. So is coming out of here so much like when you're playing Pacman, you go off on to the right and you come in from the left, and I'm gonna do that as well for the up and down. So when you go down when you get off screen, you're gonna actually be up here and coming down, and then we're gonna add in that same functionality for the ghosts as well. Add in, ah, power up, power up pill or dot s so that we can eat that and chase after some ghosts. That's all coming up in the next lessons 11. HTML5 Game movement: So now I want to add in that mouth movement, and when the player passes the edge of the canvas, we want toe reset that player value so I can add all of that within here. So I'm gonna do quickly beautify that a little bit then here, I'm gonna do if Player X, it's greater than or equal to. And I got a canvas with and the canvas with minus 32 so that even though as soon as is pretty much touching the edge there, I can flip him back over into the zero position so I can set up player X and give him a value of zero. And sometimes with these values, you do have to play around a little bit with it s oh, this one So once. Why, If it goes canvas height minus 32 we're gonna set why at zero and then the next two. So I'm gonna check, actually, if Player X is now less than zero. So keep in mind that you want, um, you don't want to set it equal to zero because I'm setting player acts at zero over here, And if I'm looking for it to be less than or equal to zero than when it hits zero Over here , I'm going to get a conflict over here. So you gotto really make sure that, uh, you're not overlapping your values s That's why it's always good toe to make sure that you do check those over. So now you go set a value off player X, and I'm gonna give him value off canvas with minus 32 and same thing for why canvas height minus 32 and then lastly, what I want to do so we'll just show you how this works. And then we'll set the mouth, which is actually something that I wanted to do because that some you gotta add some nice functionality. But see that we we do have this working now and now to set up our opening and closing mouth . So I think that this is, uh, pretty neat part of it. And it's again. It's gonna be really easy to do because it's all contained within that one image, so don't actually have to be flipping images over. So if this value is 3 20 we're going to do something. And if it's not 3 20 then we're just gonna set it to 3 20 So if it's not 3 20 and set it to 3 52 and here, I'm just going to do it else. And here we're going to set up to 3 20 so that the next time around it does hit that value there, and it resets it over to 3 52 So now, just to kind of go over this how this is gonna work eso Every time the key gets pressed, every time the Pacman moves, it's gonna flip through the two options here for where the mouth is gonna be located. It's gonna move this image needle the selection area from 3 20.23 52 And this is where we've got the mouths that are open. And again, this is where it works. Really, Really well, with these types of PNG is where you just load the whole thing in, and then you can just move between the different spots using using javascript in order to select all those different spots. So now we gotta tested eight. Make sure that it's working and see there. We've got our mouth opening and closing up and down and everything seems to be looking the way that we needed toe work. And of course, you could always slow down that movement. If you had multiple positions of the mouth, you could slow that down, have different things happening and so on. If you've got a character that's walking, you can add in all the different points there in order to make the movement look natural. And that's one of the reasons why I really like Pacman, because it's a very straightforward. You don't have a lot of moving parts. You have an opening and closing mouth, which makes it really easy to render that eight. So the next lesson we're going to get into some additional stuff. We're where, uh, rendering out that we're actually doing some animation we're gonna add in the power dot on . Then we're going to start adding in some enemies to turn it into, um, or interesting game 12. HTML5 Game create an enemy: within this lesson, we're gonna look at request animation frame s. Oh, this is gonna be something that is relatively new. Eso not all of the older browsers are going to support. This s over here. They do have a browser compatibility chart here to let you know if browsers air compatible . So do you take a look at this? If you're working on older versions where if your game has to be compatible with Internet Explorer, there are ways to get this to become compatible. Eso here. You can actually set the different animation values here so that within this lesson, we're just gonna be working with the window request animation frame. You can also accomplish this by using intervals, but, uh, probably the best way the modern way to do this is to do this request animation frame. And what this does is this takes over that that looping of those intervals and all we have to do is go into our code here, look back on what we're doing here in plea game, and if I add this into request animation frame play game, it's going to continuously render this out. So just to show you what's happening here, and maybe I'll just set a quick value. Maybe we'll just increment the score. Their just for now. Just to show you what's happening here. And I got a list of the value of score. Go back out to our game, refresh it, and we see that this is roughly every second. It's looping through that particular function, and we see that it's actually updating the screen there. So this is a really good animation interval us. And this is, um, one of the things that's important when you're creating a game, eyes toe, have this ability toe loop through and continuously run through functions. So it's gonna be different than when you're designing a website or something like that, where you're looking for more of a linear process, you constantly want to be able to to refresh and re calculate what's happening within your game. And this is what that request animation frame allows you to do to run through that function over and over again. And if you have any calculations or if you need anything toe happen, then you could add that all in the frame. So all I'm doing for mine is that I'm rendering the suit and again, of course, I could just copy this out like you get rid of this render. And I could have all of it within the play game. Eso sometimes depending on what your game structure is, you can do it that way. But we do wanna have the ability. Thio added an additional functionality and grow out our game. And that's why we've got all of these different functions. And that's what we've got them grouped in this type of fashion so I can actually change this toe black, have a fill of black eso. Within this lesson, we're going to start getting into, uh, adding in the enemies on also making some functionality for the enemy. So one of the first things that I want to do is I want to actually draw my enemy. Um, and I'm gonna set up. So we set up this'll object here that controls the player information. So maybe we need to set up another object here that controls our enemy information s. So we're not gonna need any of this stuff, necessarily. Although, um, we might need we might need some values there, but for now, we're just going to keep them the same. I'm going to just change the X and the Y, so it's not immediately on top of the player and I'm gonna render out the enemy. So from here, while we need to do is we just need another draw image and actually going to do the enemy before the Pac Man. And this is another thing to keep in mind that when you're drawing out stuff on the canvas , this is going to be in order. And this is why we actually do the rectangle first in order to clear up our canvas that we're doing the black. We're doing the canvas size, and we're doing all of this stuff first because we want all of this toe actually be some of the first pieces that we see. And over here, if I want to put the score basically now the ghost and the Pac Man are gonna be ableto go on top of the score. So it's all layered in order of what's coming in. First there eso Now we need to draw out. So again we're gonna be using dot in Maine image, so that actually doesn't change after set of value for Here s so I'm gonna just set zero for now. Directions. There's no direction for the ghost. So 00 32. 32 is gonna pick up our first read ghost 0.32 by 32. And now we need to set in their coordinates where they're going to be located. And we're just gonna keep him. At 32 32 it's really easy to add in an enemy. And as we can see here, there's a ghost and in upcoming lessons were actually going to animate him. And again, this came to where the layering is. So now whenever our Pac man is traveling, he's on the top layer. And that's why he can go on top of the ghost there and again. Always keep in mind how your leering, how you're stacking, what's happening on the canvas, and that's dependent on the order that you're out putting the code. So the next lesson we're gonna maybe animate the ghost, and then we're gonna finish the game off by adding in a power dot, which is going to give us ability to eat the ghost. That's all coming up in the next lessons 13. HTML5 Game random enemy creation: So within games, often times you need toe have random things happen. Random values returned. So I always like to include a simple function where I can pass over a number and return about a random value back for that number. So I just simply do something like returned and then mouth floor to bring it back. Teoh actual value and then math Random. Because when we just do math random, we get that zero dot and a whole bunch of values there. So I want to multiply this by and which is the parameter that we passed there within this function that my number and then I like to do plus one s Oh, this should give me a random number from zero to this particular value or from one to whatever that value is. And, of course, you might have a different form. You let you that you want to work with, we wanna randomize it or change some of these values. But for the purposes of this lesson, I keeping it really simple where I'm just gonna be able to return that back. And the reason I do that is because actually want to set a random ghost so I don't wanna have just that one ghost lurking around. I want to be able to set our random one eso One of the things here is I think I got a set. I'm gonna set of value here. So I'm gonna break thes apart and just calm a separate thumb. Believe a little bit of space here, and I'm gonna set up my ghost as having a false value. And this is going to give me the ability to check to see if the ghost exists. If it doesn't exist when I'm rendering out the content, I'm actually going to render up my ghost information as well. And again, this is all dependent on how and where you want to use this. But most the time you can do most of your functionality here within that rendering. Ah, you could also set that up here within the play game. If you didn't detect a ghost, you could create one there at that point us Well, eso a number of different ways that you can enter that in Esso. If you want to keep this the rendering part really clean with just canvas information. This is a great place to do that as well. Ah, but for now, for what I'm gonna do is I'm actually gonna render out the the ghost within the render function. So I'm gonna check and see if ghost exists. And if it doesn't exist that I'm gonna create him or update his information here, eso if he doesn't exist, I know I need to set a number for him. So I'm gonna for what I'm doing here is I'm setting ah, number for him. And then this is where which image I'm actually going to draw out, so I won't be drawing out ghost number. So this is going to give me the ability to actually not just have the red ghost on that. Maybe have the orange one. The pink one. The teal won the purple one, so there's five different ones. So I'm gonna do my numb five and I had a multiply it by 64. And also I'm gonna give him a random X and y position, so I'm gonna give them Enemy X. And again, this mind, um, function there, and I'm going to just give him a random spot on the map there. And also I'm going to give him a random y position. So this guy give me a random ghost color, random location, and as we can see, it's continually doing that right now. So I actually think there's, ah, error there in the calculation. So what? I'm gonna remove that out because of not not actually calculating in zero value. So it's better. So I don't I don't actually see the Pac man there. I see all the different ghosts, which is exactly what I want. But I actually want to be able to set this at false. So I only create that one ghost that was this you there where I'm creating a bunch of them . But I did want to see to make sure that I'm creating the ghosts properly. Eso Now, when I do, ghost equals true. I should only have one ghost, and it's gonna be a lot easier to follow what's happening here as well. And another thing that I might want to add in as well is I don't want him to close to the top, so I'm gonna give him a plus 30 there, Teoh, give him a position, random position, but actually have them down below where the content is up there. So give them roughly more of a centered position. Eso not coming lessons. We're gonna talk about how we can actually move our ghost around eso It's coming up in the next lesson. 14. HTML5 Game enemy moving: now that we've created our enemy Now we need to have some movement for our enemy s 01 of the things I want to update here. When we created him, I want to check to make sure to see if he's moving. So maybe we could even do something where we've got eso. The moving actually is going to be a value of how many how many spaces or how many seconds he moves in the same direction. Eso I do want to give him the ability to move around in random directions, but I don't want him to be buzzing back and forth randomly up and down. I want him to make a decision on which direction he's going travel that direction for a little while. And then once that calculation is up, so it's gonna be a countdown on this moving it's gonna go down. Once it hits zero, it's going to reinitiate. It's going to reevaluate which direction he needs to go, and I'm gonna add all of this stuff into the rendering function. So here we set up our ghost and what I'm gonna do, I'm not gonna add in the moving calculation in here just because I wanted to reset every time when it hits zero. So it's always going to be the same thing. So what we have is enemy moving, and once it's less than zero, then what I want to do is I want something to happen. And here is where we pick out our enemy moving, and we're going to give it a random value. So you use that mind, um, again. And maybe we'll pick something like random 30. Multiply it by three. And again, you might have a different calculation that you want to use here. I'm gonna add in 10 because I don't want it to go underneath 10. And this should give us roughly, um, a random number for it to count down. Also, maybe you want to change the speed on him, not just checking it. So I did set a speed of five. So maybe I want him to have actually a random speed is not always going to be moving at the same speed s Every time he changes direction. There's gonna be a possibility that he might changes speed as well. Now also, the way that we're doing it here because I'm placing it within this rendering area, it's gonna really move him along quicker and again. It might have been better to create another function on and bring this out, but for now, I'm going to keep it within the render. But this is something to keep in mind that this is gonna be a quicker, quicker response because this is gonna be run every second, as opposed to the person and the key clicks and their movement. So I think a movement of rough number four or to five and then here is where we're actually going to set directions. So I was gonna set direction equals zero, and I'm going to do direction X and direction. Why? So I set them both zero. And the reason that I wanted to do that is because going on over here, I actually wanna pick out which direction he should be moving either up or down, left and right. And the way that I'm going to do that is I'm gonna do so I take this randomly generated number that I have over here and actually come to think of it, I need to probably add in, um, something to either make it odd or even eso I'm gonna make it odd or even with that, too there. So now we can do enemy moving. And if it's module is, if there's a remainder, then it will do one thing, and if there's no remainder, it'll go the other direction. So the first calculation. So if there's a remainder I know add in the else there as well eso what we want to do. We want to move it left and right if there is no remainder and if there is a remainder, we're gonna move it up and down 50 50 chance of the direction that he's going to be taking . And I also I want to actually take the consideration. When I do this calculation, I want to take a look and see where the players located. And if the player is actually less than my location that I'm gonna send them that way. And if the players gonna b'more, then I'm going to send him the other way. So I'm gonna do here. I'm gonna do enemy direction. X equals minus. So from here it's gonna actually be subtracting the speed and else another else statement there and the opposite is gonna be adding in the speed, so the direction is gonna be the speed value. And then, of course, this could change. And then here, alternatively, I'm gonna do the wise here. So I changed all of these toe. Why? So this should I give us direction to go in and then just before we draw out our enemy Now here we have to add in. If that increments so much like what we did here with the keys, the keyboard, where we added in player, we got to do the same for the enemy. So enemy X equals enemy X plus enemy direction X an enemy y equals enemy. Why, plus enemy direction? Why and one other thing. I want to actually decrease this moving value so that we can reset every once in a while. So roughly whatever this calculation turns out to be, this is and how many seconds they do a reset, and it's always going to be random. And the reason we make it random is so that no one can really determine, uh, what the pattern is going to be for the for the enemy. So I just realized that going back to enemy. I never did set this direction X and direction. Why? So I do have to add those in before work because otherwise it's just overriding this X and y. So it's not exactly working because I haven't set the object up properly. So going back out here, refreshing that we see that now it's working properly where we do have our ghost moving around randomly, and he's actually always moving towards the player. Us want to refresh it again, Different ghost and that movement. So if we don't want him actually ever standing still, I can change that random value instead of being five. Maybe I can change a plus one so that there will always be one value there that's being returned. And if you notice to now are ghosts are actually running off the screen. Eso we have to add in that same functionality that we had in our Pac Man when we go off of the screen that he shows up on the other side, so that's coming up in the next lesson. 15. HTML5 Game calculation adjustments: so much like what we had to do for our PAC man To prevent him from running off the stage, we have to actually do the same thing for the ghost eso I can simply pretty much copy out this and then just update the text here. So after we've done our calculation, I want to make sure that we don't run off the page. So 1st 1 we wanted change all of these players toe enemy because we've already done this. And a lot of times when you're using different engines that are available, they already have these types of things pre built. Or you could come up with your own library that does this type of thing where it automatically detects the height with, and these values could be automatically fed in eso. But for the purpose of this lesson, we're just gonna have it like this. So now going out and refreshing it. We shouldn't, uh, go should no longer run off the screen. And as you can see, hey does actually go through. So this is, uh, this looks really good, like, would probably have to slow him down a little bit because it's probably gonna be rather hard to catch and maybe even bring down some of these numbers to make him change direction quite a bit quicker. I could get rid of that and slow him down a little bit there. So just some minor adjustments and tweaking and you'll find you usually do have to do some adjustments tweaking to your calculations. But this does look like it's working a little bit better. It was a little bit more keeps finding out where I am and he is finding ways to get to me on this is exactly what we want within our game toe. Add in challenges into our game in the upcoming lessons were and talk about collision detection eso that we know that when actually the ghost has actually detected us collided with us. We're going to be adding in our power up dot so place that somewhere randomly on the screen objective of the game is to get the Pac Man to eat the dot and then eat the ghost to score and to make sure that the actually the ghost doesn't eat the Pac Man and that's gonna be the summary of our game. Eso for now. What we're gonna do is upcoming lessons. So it's just a minor tweak on that upcoming lesson. We're gonna talk about adding in that power dot and then also doing the collision detection in upcoming lessons. 16. HTML5 Game adding powerup pill: within this lesson, we're gonna talk about adding in our power up dot s Oh, this is gonna be another object that we're gonna be placing on our screen. And that means that we should go over here and reproduce one of these objects because we're gonna need quite a few of these again The same. So we're gonna need those X and y's, um, we don't need to place them somewhere randomly on the screen. We're gonna also need one, uh, power up, so just call it power up. And for now, we're gonna put that false. And so now we're going to do We should change this a swell our It's gonna call it power dot So we're gonna have an X and y coordinate for power dot and we're going to simply draw a dot if power up zero, we're gonna draw that dot We're gonna do the calculations for it. So if it's available, we're going to draw it. And if it's not available, then we're not going to draw it. And when it's not available, that means that the Pac man's eaten it and we're not gonna be showing it at the moment. So going down here much like we did with the ghost. When we render it out, I want to do a quick check to see if if it exists. So just like we did with the ghosts, I'm gonna shut clothes. The's ones down over here. Minimize thumb. It's not taken up as much space on the screen. And I'm gonna do a check to see if power dot is power up. Ah, so if in it and that's false, which it should be by default, I go up here, we see that we did set power up at false. So here we can get our random calculations us. We can set our power dot exe and power dot y position. And then here again, I'm gonna be using that My numb It's gonna be adding in 30 so I don't end up right at the top and the unity power dot Why? And of course, you could adjust Thies to be canvas dependent on the canvas. These values eso depending. If you change the size of your canvas, it can easily adjust as well. So sometimes that's a good idea to keep as much as you can dynamic um, in order for accommodating adjustments and salon eso Now, one other thing. We have to set this true so that we don't create a whole bunch of dots there. Eso Now we've done our calculation there for the power dot and so now we can go down and we're actually going to check to see if the power dot exists. And if it does so this all up here has to do with moving around the enemy. So over here, we're going to see if the power dot exists. Then we're gonna draw that out on the screen according to the position. So we're not necessarily having it the same way that were doing these images. Eso, Of course, if you did have an image of the dot, you could include that as well. But for the purposes of what we're doing with in this course, Juan demonstrate just different ways. How to draw on the canvas s. Another way to draw on the campus is again that Phil style, because we do want to set a particular color. So I want to be yellow to be consistent with Pac Man games. I believe that adults are probably ah, white or yellow in color, but for this lesson, we'll just keep it yellow. Um, And now what we need to do is we actually need to draw an arc. So we need to draw a circular, ah dot circular fashion eso. Typically, if you're to draw on the canvas, you draw a square or a rectangle on. And if we want to something other than that, then we have to plot out the paths and dry the paths of where we want the connections to be made. So rectangles by default just going to draw a quick rectangle just to illustrate how easy it really is to do a rectangle on and what we're doing again, similar to what we're doing before with the drawing of the image. So we're getting an X and A Y coordinate. So if I wanted this particular uh dot to show up certain X and Y coordinate, they could do X and y, and then this is the with. So the next coordinate is going to be the width. So if I wanted a dot, that was 20 or a rectangular in this case or if I wanted a square, I could do 20 by 20 refresh it and we get this random position of the square so not ideal for the game that we're doing cause I do wanna have that as a no arc instead of the rectangle is a few more steps that we need to do. In order to accomplish this, we can see there within the Manz ill a guide in order drawn arcs we do the X, why we do the radius, the start, angle and angle and whether it's anti clockwise. So we've got this type of value here. So 75 by 75. So this is where the positioning is eso it's 50 02 times pi and that gives us a circular object. And then all we'd have to do is fill that. And we're doing this thing called begin path because we're actually drawing on the canvas. So we need to include that as well. So it's context begin path, and this lets the canvas know that you're actually going to begin drawing a path, and I'm gonna update this. Include that math pi Times two. And when you are drawing out paths, you have to actually close the path after you, you've done drawing with it. And then after you close it, that's the point where you can actually fill it. So this should give us a circle going back to the guide here. There's start angle and angle and, um, the anti clockwise. So I want to actually, I need to set the start angle to zero, and I think that that should, uh, should fix that a little bit. Of course, the problem here, too, is that I've got filled rectangles. I've gotta change that into Arc eso my radius is gonna be 20 which is probably gonna be a little bit bigger than I need, but for now, that should be okay. S Oh, yeah, definitely bigger than what I want. And I probably do want to change this to be white. We'll make this a little bit smaller. Refresh. It s so this gives us our power up dot and in the next lessons, we're gonna be talking about how we can determine if the Pac man is eating the dot and then if the Pac man's eating the ghost So some really cool things coming up in the next lessons 17. HTML5 Game collision detection: So the first thing that I want to do is add in the collision detection with the power up dot on within our game. So that's one of the things that we want to add in When the Pac man goes over the dot he actually gets to eat the dot eso collision detection on the canvas. You have to do quite a bit of calculation and this again, this is going to be something that's gonna take quite a lot of conditional statements. Eso just looking at Probably where the best police toe add in this power up dot is maybe after we've even moved things around. Uh, when we moved our enemy around, we've got all of those calculations. So within here is we're gonna do collusion, and this is gonna be a fairly big if statement And then, of course, we're gonna have to do one for the ghost as well. So if you are using one of the JavaScript engines, usually they do have this type of stuff built in because there is a lot of repetitive parts of the code. And if you're doing any kind of shooting any kind of bullets or something like that eso that does really get complex because you're gonna have a whole bunch of collisions in order to detect. And the only way to detect collisions is too calculate where your players located. Uh, and in this case, where our power dot is located and of course, we have to do a minus 10 on it. Or maybe we could do a minus five because that's what our radius of the power dot is. So we have to subtract out half of the radius because this is a center point, so that X and Y within the ark are is a center point, and it goes out 10 from around it. So maybe that was correct that the radius was 10. So this is detecting to see if players coordinates are less than the power dots coordinates . And we also have to check to see if the power dot X is less than the Players X. And here we have to add in ah, 16 again to get that center point and do another check here to see if the players why coordinate is less than or equal to the power dot Why bayous, Ted and one more check to see power dot Why is less then, player? Why plus 16. And if this is true, then for now, we're just gonna console log out it eso Hopefully this calculation should create a square area that checks to see if the player and the power dot are within that same spacing and refresh that. And hopefully now when I go over it, we get a hit, which it doesn't appear to be doing us. Is some something wrong with the calculation? But we did get a hit there, So So it is slightly off. So we have to We have to make the actual, uh, the actual boundaries a little bit larger. So I'm gonna just bring this up, too 16 and again, there's always different adjustments that you need to do. So it looked like it was slightly off there. That's not probably the best position of the power dot that looked like it's ah, a little bit better there. There's always tweaking with the calculations, so it looks like it's ah, the boundaries are fairly good. We need to probably a just a little bit on this side of the dot. So what I can do to make it a little bit larger. Increase that boundary. So the issue was coming in from the left hand side and actually that. So I ended up updating the code. The calculation had to remove out that power dot minus 10 and then also for X and Y. And now it looks like the hit is more accurate. When I come near the dot, when I'm touching the DOT, it gives me a hit, and that's exactly what I want. Toe happen within my code. So whenever I'm touching it rate right away, I get the hit. And always there is that calculation and working with it on, that's where I usually use console log to help me out with the different calculations and determining when I'm seeing a hit. Eso. Now that I've got this hit working, I can continue to write out the code and I could make something happen once once the collision is detected and one of the things that I want toe happen is, I want the ghost color toe actually change, and again, this is a good reason why we used it all within one PNG file, where I can easily switch over to a different color and use that instead. So what I'm gonna do for this power up, I'm gonna set that 12 false because I don't want to show that anymore. Eso the power dot is now false. And I can add in a few more objects here within the power dot Eso we did have that false there. I want to have ah p countdown. And right now I am set that zero and another one I wanna have is I want to be able to store us a value for the old ghost number. Eso I added in these values and I'm gonna reuse thumb down over here. So again, um, I gonna set a countdown number using power dots and this one as well. So our countdown we're going to go to 500. I'm also going to take the ghost number, and I'm gonna take this old ghost number and store that in there. And the reason I'm doing this is because I'm actually going to change the color of it. And I need to know what the original color of the ghost was in order to switch it back after the countdown finishes. So This is the countdown while the ghost is gonna be edible by the Pac man And now I can set this ghost number and already know which number I need to send it out. I got to set up 3 84 in order to be the blue ghost and p dot x. So I'm gonna move these out of the way so that there's no collisions with it. And so now when I go back outs when I eat the dot the dot said disappear and the ghost to turn blue eso bunch of things we still need to add in I want that go stacks to be flashing I want that goes to run away from me instead of come towards me on And then also we have to add in the collision detection with the ghost So it's all coming up in the next lessons. And then, of course, we don't want this dot to appear while the countdown is still happening. Eso we want the dot to reappear after the countdown completes 18. HTML5 Game powerup functions: so within this lesson, we're gonna make the ghost flash back and forth. And the way that I'm going to do that is I'm gonna flip from this one to that one. And we're also going to be using the two different ghost variations. So have his eyes actually moving eso back and forth between those two swimming to set a brand new value here. And I'm just gonna call this flash are actually going to give it a value of zero and go down here. And when we're writing at Oates, um, I do flash in there, and this will make this one dynamic, and then we're just going to simply do kind of like what we did over here when we were changing the mouth opening and closing. And this is the one that I'm looking for over here s so we're gonna do a quick check to see if it's which role it's on, and then depending on the road that it's on, we're gonna actually adjust the image that's being displayed s we're going to do so If this one equals zero, then we're gonna set it to 32 and if otherwise, it's not equal to zero. We're gonna set it equal to zero. So this should give us that ability to have the ghost eyes moving when we go over. I mean, that's a little bit too much movement. But now we've got the ghost blinking, so we can either set it. Uh, we can set it to remove from those eyes moving if we want it do. That s oh, maybe that's a little bit too quick as well us. We might not want to do this necessarily. Eso The other option here is to see if if it's powered up and then depending on what the power up is, then we can change back and forth. So let's. Or we can add this in within our countdown. And, um because we do have a countdown there that we're gonna be counting down. So maybe we can add that in within the countdown. And once that countdown finishes, then we're not gonna be switching between the two anymore, so we'll just do it that way there. So I'm gonna add in this countdown a check of the count down there and see if it's greater than zero. And if it is, then we're going to continue with the countdown to get it to reach zero. And I'm gonna add in another value here in enemy and I'm just gonna call it ghost Eat. And I'm gonna set that too false and going over here whenever we've got our collision detection, I gonna set power dots. Ghost heat equals true. So while while the while it's powered up, we're gonna have it as true. And the reason that we can't really use the countdown is because we need to be able to decrease this. And we need to have something to happen once it reaches zero eso probably a few different ways to achieve this. But for now, what we're gonna do is we're gonna say if this one is true, then we're going to continue with our countdown until, uh, the countdown reaches less than zero. And once it hits less than zero, and then this is where we're going to reset everything. So we're gonna change this one to equal false. We're gonna change the ghost number back to that original one that we had set. So a ghost number. So this is going to change his color back and we need to add in one more thing here that we need to check if this exist and we have toe have so that we're not setting that dot You just put that less than or less than five. So now when I eat the dot, there should be a countdown and eventually he should switch back to his normal color. And then we get our daughter back. So now we've got our basic game functionality. We need to add in the collision detection with the ghost, and we also need to add in the ability for the ghost to run away from me once I've eaten the DOT. So that's Ah, that's coming up in the next lesson. 19. HTML5 Game runaway ghost: So what I want to set within this lesson is I want that ghost actually to change direction when were eaten the dot when the collision has been detected, we want the ghost to change direction, and this is gonna be relatively easy to do. Eso We're going to do that here where we're actually setting the values and we can do something simple right over here where we're gonna actually just multiply the enemy speed by negative one. If if this is true, So going back up here, we'll check if, ah, the power dot Ghost eat is true. And if it is true, then we're gonna take our speed. We're gonna equal it by the speed but multiplied by negative one, and that will give us the opposite value of what we had over here. So this gives us the opposite value of what was happening over here by default on. This is exactly what we want. So want him to go in the opposite direction. So once I eat this, he should start moving away from me, which is exactly what's happening. So that's exactly what we want because we want to be able to chase him and now we want to have a collision detection to check. If we're running into the ghost eso, it's coming up in the next lesson. 20. HTML5 Game hit test ghost: so much like we had our collision detection with the power dot We need to have a collision detection with the ghost as well. So that was the power up collision detection. And this is gonna be the ghost collision detection. And so we just have to make a few updates, and we're probably gonna have to do some re calculation as well. For this. That might not be exactly the same values. It was a hit over there. And maybe for right now we're actually not gonna move. Move the ghost around eso just on a comment to use haute to remove out his movement. Refresh it. And so now we should be able Teoh. And this is obviously a better way to detect the collisions just to make sure that everything is exactly where we need it to be. And it does look like it is It is gonna be off again. So we're hovering over here. We're seeing that we're not getting, Ah, the collisions that we need. The collisions are slightly off and up, so there are some minor adjustments. We have to make a collision move over slightly, and it's just it's just not a big enough space that we're taking up eso We have to make some adjustments to that. So I did make some adjustments to it and it does actually look like it's working much better, Some coming in from the left and the right and then from the bottom. I still need to make an adjustment on the bottom on then as well for the top. So that looks roughly correct. There s So I have to take this same adjustment that I made and adjust this one over here, have a larger values that we have a larger hit area. So I'm going to do the same value there of 26. Go back down. And now, when I come in from the bottom, I should hit the ghost as soon as I touch on him. So everything looks really good with the collision detection s now, it can build out some additional functionality as to what's gonna happen when we do detect the collision. Eso One of the things that we want to do is we want to check to see, um if it's if it's actually the player that's gonna win or if it's the ghost that's gonna win and the way that we're going to do that is if this is true, then we know the player scores and else Then we know that the enemy scores. And so we had those scores that we did set up in the beginning. The G score is for the ghost. The score is for the player, so going back to where I just added that. So I'm gonna increment g score. If it's the ghost and the score, if it's the player that should get the points. So now we should see something happen with the points. And then if I eat the dot and if I go on top of him, I should see an increase in my score. Eso This is working exactly the way that we need it to work. Uh, now going out to here before I get the ghost moving again. I do need to add in some more stuff here because, as we saw, it's not exactly ideal that the score continues to go up. We have to actually reset everything eso we can add in another brand new function that could do the resetting of of the values for the player and uh, and so on. Or we could just simply add them in here because we know that we've got collision detection happening eso Either way, what we want to do is we want to reset the locations, so I'm just gonna add that in here it the bottom. And again, this is depending on what? Your preferences. When that particular action happens, all I'm doing here is I'm increasing the score. Eso What I'm gonna do is I'm gonna simply, um, reset their positions. So going to reset him, Teoh the player to 10 and 100 and then I gotta reset. The enemy is X, so I'm gonna put him on the far sight to 300 and the enemy. Why? I'm gonna play some at 200 and then maybe I can even set this to false. And then I got to remember as well that I need to reset some of these values here. So maybe what I can do is I can set that zero leave that one and let this particular function handle that. So going back over, so that automatically resets us when the collision is detected. And of course, this will look a lot better once the ghost is moving around again. Gonna make a lot more sense. So it does look like everything is functioning as we need it to. And now we can remove out those restraints from the ghost and let him actually move around . So there's gonna be free to move around. Eso we're running away from him so the ghost scores. And then, of course, once I eat the dot, then he's going to run away from me, try to get away and so there's a few other things eso Maybe I can adjust my speed where I can speed speed up my guy once I eat the power up dot So we're just gonna make some minor tweaks and adjustments in the coming lessons as well, to make the game a little bit more easier to play. 21. HTML5 Game tweaking the game: so a few minor tweaks that we still need to take care of within the game. And one of them is this eye blinking. So we want to remove some of this blinking of the eyes and we want to keep in the flashing of white and blue when we're actually pursuing eso. There's a few different ways to do this. We can make it flash and we can make the eyes move slower if we wanted to. So we could put in some type of countdown here. Ah, And whenever it counts to zero, we can set that. So I'm going to simply add in another value here. I call it count blink and I'm going to give it a value of 10 and then move out down to here . And if count blink is greater than zero. And now I'm just gonna increment that or decrease that. And then here I can put in else. And also I can reset this over to be 10 again or whatever value we want to set it out. This is making their eyes move slower. And then, of course, the blinking is slower as well. So even said it may be to 20. So this is has a slower movement of the eyes. And also, when we get to our power of button, it's gonna be slower as well. So looks a lot more natural that we slowed down the speed. And another thing that just to tweak that I want to increase the speed of. I want to clear increase the player speed once there's been a power up. So going all the way over to here. Some have got a collision detection we're doing player speed equals 10 and then here we're going to bring it back down to five. Of course, there's this different ways to tweak this. So now when we eat this, remove a lot faster and gives us the possibility to catch the ghost a lot easier and again , a lot of these tweaks its ah, for gameplay capability. So in every created game, you should test it out to make sure that it is functioning the way you need it to function . So again, these thes power dots they seem to be appearing a little bit too high. So I got to go over to the spot where create them check of its on screen, and this was the issue there that I needed to add in that plus 30. So now they should appear below that space that should no longer appear above anymore. And even to update the game, you not in multiple ghosts on, they could operate independently of each other on. Then again, once they get the power button, then you could pursue any one of those. 22. HTML5 Game add a second enemy: So now within the game, we're gonna actually add in a second ghost. So we're just gonna call, um, enemy, too, to make it really simple. And we can use most of same values there. And now whenever we're referring to it. So here we're checking to see if it exists. So I need to go back up here and do something like this. So everything that we've done needs to be reproduced for the second enemy. And you can even create loops and a raise if you wanted to, in order to really to build out multiple enemies. But for the purposes lesson was trying to keep it simple, and we'll see if this one exists. And then, of course, we have toe duplicate out all of that and also duplicate out the image. And some of this we don't need to duplicate. We can just do. And we don't need to duplicate out this check because this this is gonna be universal for both of them. And of course, Ah, over here as well. So wherever we're mentioning that, we just need to duplicate that out. And this one, we we probably have to add in a second value there. So a squirrel back up there before forgets and add in and see what's Ah, This looks like so far. So there's our second enemy eso He's not moving around yet. But when we eat the dots of something went wrong there as well. So just going back out there, So refresh that. And hopefully this time both of them should shift off. So both home turned blue, so we don't have the collision detection yet available. So we do need to get him moving around. So again, it's ah blotter duplicating here. And of course, there are other ways to do that s o over here. So actually, this one we don't necessarily need to duplicate because we need Teoh duplicate the whole collision detection. So it's not necessarily going to apply to both of them. That was an instance where we differentiate between the two, but over here, it's going to be the same thing here that's gonna be happening. Ah, And now to add in that movement, it's a movement again. There's quite a bit to the movement. There s O probably maybe a better way. If we were creating multiple enemies, create some kind of function around their but for again, for now, we're just going to simply just duplicate that out. So just trying to add in the second enemy rather quickly, eso is going to make sure that he doesn't run off the canvas. This is gonna keep him moving around the moving again. That was S O. This is the direction that they're going to be going and the enemy moving is going to be the countdown. And then soon as all of the same properties as that previous one where we've got the direction we've got speed so that they can have different speeds and operate independently of each other. I might have missed some stuff, so I'm gonna quickly go through here and then do a check just to make sure that it's working. Not sure, exactly. Sure how I'm gonna know which one is which. So I think what what I need to do. I have to slow down their movement because they are rather fast, and it is pretty hard to actually catch them. So that's something else that I should tweak with it. And, of course, when you're making the game, you don't want to make it too easy, but you don't want to make it too hard either. So going out there, I'm gonna slow them down. Just a touch. And also, you could do something where it's leveling up. So depending on, uh, how maney, how many what the score is, it could change. And that kind of thing could be dynamic. A swell number of ghosts could be dynamic as well. Eso you could really build out quite a lot of functionality here. Another thing that I could do is, uh, whenever it whenever we power up that maybe I could get them to even slow down a little bit so they might be easier to catch. So within the next lecture, I'm going to include all of the source code for this. It's all javascript based. All of the court is javascript. Eso you could bring that JavaScript code in and and even create your own image with a breakdown of different enemies and then Pacman eso the ones that we're using right now are the first to for the ghosts and then all of the Pac Man movements and all of just the the to the blue and the white for the ghosts here when it's powered up. So again there's a bunch of different options here that are available to us, and you are welcome to build out the code as you need to and create your own version of the same game, using this as a za base to build your own version of this game.