First off, the basic explanation of addEventListener is pretty simple. Let’s take this line of code as an example:

This line does this, add an event listener to the window object, the event to listen for is the keydown event. When that event happens, run a function called keyDown. Finally, there’s a Boolean for if you want to useCapture or not. If useCapture is set to true, then the window object in our example would get notified of the event before the keyDown function would. In the context of a game, I think you’ll have this set to false nearly every, if not all the time.

Another question I’ve been asked has been about what is set to, in our example, the keyDown function. Take a look at this code:

So when the key is pressed and the keyDown function is called, it’s passed the parameter e. What is this e? In this case, e is short for event. Some people use event, other evt, but I like e because it’s nice and short and you still know what it means. In the case of a game and in the above code example, we check to see if the key being pressed is the right arrow key, which has the keyCode number of 39. How do we know this? Well, if you were to console.log out e, this is what you would get:

You’ll see in the picture all the things that the browser gives us access to. In the case of a game, we’re interested in the keyCode which you’ll find about halfway down. To access that, we just write e.keyCode and we’ll get the number of whatever key is pressed. Then we can check and see with arrow key has been pressed and then, say, move a character in the right direction.

For the most part, the three event types that you’ll be listening for when making games are keydown, keyup, mousemove, mouseover and click. Keydown and keyup will usually be used together, for example, you’re moving a ship around in a shooter game, keydown will move the ship when the key is pressed and keyup will stop it when the player stops pressing the key. The other three, of course, are used with the mouse and are pretty self explanatory.

Remember, console.log is your best friend when it comes to learning JavaScript. If you don’t understand something, like say, a parameter that’s being passed to a function, just log it out. Most of the time it will show you exactly what you were wanting to know.

Over the last few weeks, I’ve been really optimizing the vertical space shooter game that I built for the tutorial I did. One thing I realized as I was working on it, was that I should be using only as many loops as I need to run the code. Right around the time I was figuring this out, I watch a video of a presentation done by Mozilla Evangelist Rob Hawkes where he said the exact same thing, that you need to be careful about how many loops you have running in your game.

Whats the big deal about having too many loops? Well, think about it this way. If you have five loops in your game and you’re running it at something like 30 frames a second, you need to run all five loops thirty times each second. Think about a situation where you have a for loop inside another for loop. This is a pretty common situation and, let’s say the outer loop runs six times and the inner loop runs 9 times, now you’re going to run that interior for loop 1620 times a second. If it’s doing any kind of hard work, that’s going to slow things down.

One of the things we as developers need to remember is that, if you’re like me, you’ve got a quad core processor and you’re probably using a browser like Mozilla’s Aurora or Google Dev version, so you’re code is going to be a lot faster. I bet most of the people out there aren’t going to be running a crazy fast browser on a crazy fast machine. So, and I’m sure you’ve heard this before, but optimizing your code is always a good idea, which is surprising how many developers out there don’t do it.

The moral of the story is this: use as few loops are you need so your code runs faster. I’m sure for experienced programmers this seems like common sense, but I think it’s a good thing to bring up for beginners.

To do this, you just need to add a few move parameters to the basic drawImage function. Let’s use the ship from my canvas shooter game as an example.

If we want to drive the ship on the canvas, then we would use this code:

If you don’t understand this code, it’s probably best to learn more about it before you get into sprite sheets.

To use drawImage to display our sprite sheet, we’re going to need add six more parameters. And they’re divided into two main groups, the source info and the destination info:

The first one is obviously our sprite image. The next four are the position and width of our source image. Then last for are the position and width of the final image when it’s drawn on the canvas. Usually, the height and widths with be the same value because if srcW is bigger than destW, the image of our ship will get smushed over to the side and will be able to see the next image on the sprite sheet. If destW is the larger number, than our image ship will be stretch across the wider width.

In this example, when the user pushes either the left or right arrows keys, we’ll reposition the sprite sheet to show the ship turning in that direction. I’m not going to go line by line through the entire code, just the parts that you need to know to understand what’s going on. For our purposes, making the ship look like it’s turning, we can use the same basic set up as when you want the ship to move left and right:

The first part of the code is pretty simple and anyone with any experience building games will know what’s going on there, if the right arrow key is pressed do this or if the left arrow key is pressed do this. But when the right arrow key is pressed, we aren’t just moving the ship right by increasing ship_x by five, we’re also changing what part of the sprite sheet we see by changing the value of srcX. In this case, it’s to 83 pixels, which displays the second image on the sprite ship, which shows the ship turning right. The same happens when the left arrow key is pressed. But there’s still one more thing to remember, the sprite sheet has the be reset, as it will have to be in most cases. A simple if statement, that checks if neither of the left or right arrow keys are being pressed, then reset srcX back to 10.

You can check out a demo here.

It’s actually a lot more simple than you would think it would be. Using a technique like this can really add to your game. Another thing to remember is that you could put every single graphic you need for your game on one sprite sheet so that you only need to load the one element and that could improve loading times for your game.

The key to making this work is understanding that what powers the game is the setInterval line of code:

Basically, what’s going on here is that we’re running the gameLoop at about thirty frames per second, which is about standard for video games. You can learn more about setTimeout at the amazing Mozilla Developer Center. In order to pause the game, we need to stop the loop and we can do this using the clearTimeout function. It does exactly what it says, it clears the timeout that’s running. We just need to tell the browser to listen for something like a key being pressed, I used the p key, and then run clearTimeout. First, you need a function like this:

You can just add the if statement to the keyDown function in the shooter game if you’re just modifying that. This is a pretty simple line of code, if the p key is pressed, then run the pauseGame function. Now we need a pauseGame function:

And that will pause the game. But, of course, we’ll have a problem if we leave it like this, there’s no way to start the game up again. All we need to do then, is set the timeout again. We still have another problem, how will the game know if it’s pause or not? We just need to add a Boolean variable, I called mine gamePaused and set it to false at the top of the code. Then I changed the pauseGame function to this:

Now when the p key is pressed, the pauseGame function will check to see if gamePaused is true or not, if it’s false, it pauses the game. If it’s true, then it starts the game up, using the same code that’s in the gameLoop function. This is why we have the variable game equal to the setTimeout function, it allows us to reference it elsewhere in the code.

That’s it. Now you can pause any game you make when you use setTimeout to power the game loop. If you’re using setInterval, then you can use clearInterval for the same effect.

When I first started working with the canvas element, I would always just use clearRect to clear the entire canvas. That may be necessary in some circumstances, it’s a waste of resources if only a few things are moving around a 500×500 canvas and we’re clearing 250,000 pixels. But if we’re moving 3 blocks around, we don’t want to clear all that and we also don’t want to have to set up individual clearRect functions for each block. The easiest way to do this is to create a function that we can just run for each block.

We would need to pass the function 4 things, the x and y co-ordinates and the width and height of the block we want to clear. So the function would look like this:

To run the function we would write some code like this:

If you’ve worked with canvas before then there’s nothing there that you haven’t seen before, but because we’ve created a function to clear the canvas, we can add another block and just pass it’s info to the clearCanvas function:

The browser only has to worry about clearing those two areas which will allow it to focus more resources on the other code you’re running. This will work with any moving object, whether it’s moving on it’s own or the user is controlling it. I’ve created an example on JS Bin.

• Part 1 – Game Basics
• Part 2 – Graphics and Lasers
• Part 3 – Laser Hit Test
• Part 4 – Ship Hit Test and Score
• Part 5 – Player Lives and Continue Button
• Part 6 – Font fixes and Start screen

If you have been following this series of tutorials, you‘ll know that we’re almost down building the basics of a game using the HTML5 canvas element and Javascript. We only have a few things to do. The black background is pretty boring, so we’ll add a star field. Arial doesn’t really work with our 8-bit feel, so we’ll use Google web fonts to find something that’s more appropriate. And it’s not really practical for the game to just start when the page is loaded, so we’ll add a start screen with some game play instructions.

First, we’ll add the star field background. To do this we’re going to use the exact same technique that we use for the enemy ships, it’ll just be slower and we don’t have to worry about anything affecting it. For the star field we’ll use an image and it will just scroll downwards continuously in the background. So, add this this to the variables at the top:

The starfield variable will hold our image and starX is our x position. And the reason we have starY and starY2 is because we’re going to make two instances of the star field and have it repeat over and over. We could dynamically generate all the stars in the background, but that would require a fair amount of processing power and I don’t think it’s worth it. We load the star field image the same way as the other two images, so add this to the init function:

Next we need a function that will actually create the movement of the stars:

Pretty simple here, we’re drawing two instances of the star field, one is positioned on the y axis at 0 and the other one is positioned at -600. We then move both images downward and once the bottom image clears the bottom of the canvas, we then reposition it at the top of the canvas and it moves down again. With this cycling, it looks like the ship is slowly moving forward all the time. We need to just call the drawStarfield function, so add it to our gameLoop function but outside of the if statement so that the star field is moving even if they haven’t started to play yet, after we’ve added the start screen. It should look like this now:

Now, let’s give the game a more appropriate font. Lucky for us, Google’s web fonts has exactly what we’re looking for, a font called VT323. If you’ve never used a Google web font before, it’s really easy, even if you want to use it with the canvas element. The very first thing we need to do is at this at the top of the web page, right after the title tag:

Now we have access the VT323 font, as long as we have Internet access. And, in the scoreTotal function, we change this:

to this:

If you test the web page now, the font will look more 8-bit and fit a lot better with the game’s graphics style. We’re going to change one other thing, the position of our score text, because, unlike with Flash, we can’t just set it to right align so that it will move when the school gets too large for it’s space. So change this:

to this:

This will position the score right below the text and then we don’t have to worry about space, no matter how high the score gets.

Our final step will be set up a start screen so that our game doesn’t just automatically play when the page is loaded. The first thing we need is a new variable, so add this at the top with the other variables:

Our game hasn’t started yet so, of course, it’s going to be false. Next we need to set up the way for the player to start the game, so we’re going to add an event listener so that if they click anywhere on the canvas, the game will start. Add this to the init function with the other two event listeners:

When the player clicks the canvas, a function called gameStart will run, so let’s create that:

Wow, not much going on there, we’re just changing the gameStarted variable to true and removing the event listener. If you run the game now, you’ll see that absolutely nothing has changed. We need to make a few more changes before this will actually do anything. Our first change is to change this line in the gameLoop function:

to this:

So now alive and gameStarted need to be true and lives needs to be greater than zero for the game to run. Now the rest of our changes are going to be in the scoreTotal function because it’s easier if we keep all the text in the same place in case changes need to be made. Now, add this to it:

With this if statement, we are checking to see if the game has started yet, and if it hasn’t then display this text, which includes instructions on how to play. When you click on the canvas, the game starts and all this text goes away. Because we changed the font, it’s moved the positioning of our continue text a bit, so update it to this:

Alright, now if you test the game, there will be a start screen and you need to click on the canvas to start the game. You can check out the demo here.

And that’s it. We’ve created a basic shooter game using the canvas element and it really wasn’t the difficult. The canvas API is still pretty young, but I’m sure as it matures and as more and more libraries and frameworks are created, building things with canvas will be easier and easier. I’m done with this as an actual series of tutorials now, but I think I might come back to it once and a while to use as an example for other features that we might want to add to games.

Here’s the complete code:

When I first got into web development, I became a big fan of Flash. I spent a lot of time learning ActionScript. I would check out every Flash site on thefwa.com looking for inspiration about what I should learn next. But, as I learned more and more about Flash development, I realized that most of these Flash sites and applications were built by teams. I had missed the days of the solo Flash developer making kickass stuff. Flash has moved on into more complicated territory and if I wanted to do any cutting edge Flash work, I would have to join a big company.

With the canvas element, and I’ve seen some Flash developers say this mockingly, but it’s true, it’s just like the early days of Flash. We don’t really know fully what we can do with canvas yet. Every week I see developers pushing what canvas can do and it’s usually just a developer messing around on their own time. This is something that’s attracted me to working with canvas, unlike with Flash, I can’t just Google how to do something, I have to figure it out on my own and I like that.

Flash has been evolving into something far beyond what I think the original programmers could have imagined. We’re at the point now where Flash is going to be used to make Playstation 2 quality games. Now, that’s actually pretty amazing, being able to play a game like that in the browsers, even if you need a plug-in. But if I want to build video games that complex, then I would probably have got into actually building video games. But if you still want to build simple video games that still might impress someone, canvas is probably the way to go.

It’s going to be a while before canvas is widespread. The reason? IE 9 doesn’t work on Windows XP and the truth is, most people that use it aren’t going to be switching from IE 8 to Firefox or Chrome. And IE 9 isn’t going to really take off until XP dies out and Windows 7 takes over. And, realistically, Windows 7 isn’t going to really take off until corporations start installing it on their computers.

So, if we have to wait for IE 9 to replace all the other versions, then what’s the point of working with canvas now? Well, eventually, that is going to happen and when it does, I think it would be better to be able to say to clients, “Yes, I can build that for you” as opposed to “I’ll have to learn how to do it.” I think if you want to work with canvas in the future, it’s smart to start working with it now because I’m pretty sure that the canvas API is going to evolve and be more mature. I would rather start learning the basics now so that when more features are added, I’ll be able to just add it to what I already know instead having to start at the beginning when canvas becomes more widespread.

Right now, I think when clients say that they want something built in canvas, I think they really mean they want it to work on the iPad. So even now there will be opportunity to do client work with canvas, but I think that might be few and far between. I’m sure there will be more opportunities in the future and some of us just might luck out and get a cutting edge client that doesn’t mind if what they want doesn’t work in some browsers.

Really though, I think I’ve found working with the canvas tag to be a great way to learn JavaScript. And if you have any experience with Flash and ActionScript, building similar things with canvas isn’t as different as you’d think. And you can say you’re all about HTML5 now and that will get you some instant cred with the cool kids.

But the thing I didn’t realize at first, and I’m sure many other newbies at working with canvas don’t realize either, but you don’t have to clear the entire canvas, you can just simulate what Flash does and just redraw the area that’s changed. Why would you want to do this? Well, think about a graphically heavy game but there’s only one or two objects moving around, you could cut down on CPU use if you just redraw the areas affected by the moving objects.

This is actually a lot simpler than you would think. Instead of something like this:

we can do something like this:

In the first example, we’re clearing the entire canvas, in the second, we’re just clearing the area of a square. So now we’re just redrawing a 20 by 20 pixel area instead of say, a 500 by 500 pixel area, a lot less work for our broswer and CPU!

Plus, we can call clearRect more than once. So, here’s the code for an example that has two moving squares, one we can control with the arrow keys and one that moves down on it’s own. And instead of clearing the entire canvas, we just clear two square sized areas.

I’ve just started experimenting with this technique, but I can really see it’s potential. There will still be plenty of times when it’s better to use clearRect to clear the entire canvas, but having this in your arsenal will help you become a better JavaScript developer.

• Part 1 – Game Basics
• Part 2 – Graphics and Lasers
• Part 3 – Laser Hit Test
• Part 4 – Ship Hit Test and Score
• Part 5 – Player Lives and Continue Button
• Part 6 – Font fixes and Start screen

Last time we added collision detection for our ship and a score to our game. But only having one life isn’t all that fun and the player has to refresh the browser to play again. So in this part, we’re going to give our player multiple lives and we’ll add a continue button to the game over screen so that it’s easier for the player to play another round.

First, we’ll add the lives to our game. Add this to the list of variables at the top, because, of course, we need to keep track of how many lives our player has:

Next, we need to add some text to the canvas so our player can see how many lives they have left, so add this to the scoreTotal function:

Since we’re already drawing text on the canvas with this function, we might as well add the lives to it and keep all over our text in one function. This way, if there’s a problem, it’s easier to find it and it’s also easier to change or update because we know exactly where to look. Next, we actually have to tie the lives into the game and set it up so that when the ship is hit, the player loses a life and if the player runs out of lives, the game ends. Currently, if the ship hits an enemy, the alive variable is just changed from true to false and the game ends. We can’t just replace that with lives -= 1 because all that will do is continuously subtract one from the score. What we need to do is create a new function called checkLives, which will see if the player has move than one life and if not end the game, otherwise, the game will just reset to the start position and the player will lose one life. Here’s the code for checkLives:

With this function, we subtract one live from the lives total right off the bat and then we check to see if the total of lives is greater than 0 and if it is, then we call the reset function which we’ll write next. If live is equal to zero, then we change alive to false, as we’ve been doing and it ends the game. Now in the shipCollision function we need to change the line:

to:

Now, whenever the player’s ship hits an enemy, the checkLives function will be called. But what about the reset function? It’s just setting the player’s ship and the enemy ships back to the same position they have when the game starts because it would be unfair to just throw the player back into the middle of the game. Here’s the reset function:

Everything is the same as when we start the game, including using a loop to position the enemies. The only difference this time is that we need to introduce a variable called enemy_reset_x in order to evenly space the enemies across the x axis. This function will also be used when we set up the continue button, we’ll simply call it when the button is clicked and all the work to reset the game is done.

The continue button is going to be a little more complex to set up. In Flash, something like this would be very easy to set up. All we’d need to do is create a button or movieclip on the stage, give it an instance name like continue_btn and write some ActionScript saying when continue_btn is clicked, then call the reset function. The canvas API hasn’t evolved this far yet, unfortunately, so to get the same functionality takes a bit more code. A lot of thanks goes out to Mark Pilgrim’s Dive into HTML5 for this, because as far as I can find, his is the only example of how to set up click events for the canvas.

To make this work, we need to do a few things, first draw the button on the canvas, next when the mouse is clicked within the canvas find the co-ordinates of the mouse’s position, then check those co-ordinates to see if they fall within our button’s boundaries. A bit more complicated than Flash, but I’m sure that it will either be simplified in then actually API or someone will write a plug-in that enables it for us to do quickly and easily.

Back to the code. First things first, we need to actually draw the button on the canvas, so we have something to click. Update the scoreTotal function to this:

Now, when the player runs our of lives, a white box with black text on top saying continue is added. As well as a new event listener. The event listener is added to the canvas element, not the document, like our keypress listeners. This is because we only care if the player clicks on the canvas, not if they click elsewhere on the page. So now when the player clicks on the canvas, a function called continueButton is called, so we’ll write that now:

A bunch of things are going on with this function, the first is variable called cursorPos equaling to something called getCursorPos. This is the function we’ll use to find the cursor’s position when the mouse is clicked and then return the values in cursorPos so we can check them against our button. If the mouse’s x and y position falls within our continue button, then we set alive back to true, the lives back to 3, we call the reset function and, importantly, we remove the event listener so that the player can’t accidentally click on the canvas and reset the game. So what’s going on with getCursorPos?

This is a code that was written by Mark Pilgrim for his Halma game example, I’ve just modified the last two lines to fit better with our game. It’s using either the web standards way, pageX and pageY or the Microsoft way, with clientX and clientY. And then it subtracts the top and left offsets of the canvas, ie. subtracting the distance of the canvas’ left side with the left side of the browser and the same with the top. Then we create a local variable called cursorPos, which isn’t the same as the cursorPos in the continueButton function but it’s what we’ll return, so that cursorPos will equal this cursorPos, so it’s simpler to just name them the same. cursorPos is going to equal a new cursorPosition:

We’ll use cursorPosition to store our position info. So when we return cursorPos, in the continueButton function, we can check cursorPos.x and cursorPos.y instead of creating two variables for each one. Now, if the mouse cursor is within the continue button when the mouse is clicked, we can reset the game! You can check out the game so far here.

That’s a lot of work for a continue button, it was more work then setting up most of the games main functions, but, right now, that’s how we have to do things with the canvas tag. I think it’s worth it though, because who wants to reset a game by refreshing the browser?

Our game is getting there, but it still needs a couple of things before we can say we have a basic game built. Next time, we’ll add a moving background, change the text to something works better with our 8-bit feel and finally, we’ll add a start screen so that the game just doesn’t start when the page is loaded.

Complete code so far:

• Part 1 – Game Basics
• Part 2 – Graphics and Lasers
• Part 3 – Laser Hit Test
• Part 4 – Ship Hit Test and Score
• Part 5 – Player Lives and Continue Button
• Part 6 – Font fixes and Start screen

Last time we made it so that our laser would hit an enemy ship and they would be removed and a new enemy would be added to the game. This time we’re going to add a score and set up hit detection on the player’s ship because it would be a pretty boring game if the player can’t die.

The first thing we need to add is a new variable. Add this to the end of the list of variables at the top:

Now we need to create a function that will display the score on the canvas. Creating and displaying text on the canvas is pretty simple, in fact it’s a lot like drawing a shape. We need to set three things, the font, the style and the content and position. Let’s build the function that will display our score:

With ctx.font, we are setting the weight, size and font of our text. Then with ctx.fillStyle, we set the color to white. Next, we use fillText to actually draw the text on the canvas. For fillText, we need to set three parameters, ctx.fillText(content, x position, y position). In the first instance of fillText, we pass the content as ‘Score’ and the x position to 490px and the y position to 30px. For the second instance, we use the variable score to set the content and the score will update on the canvas for us. And, of course, none of this will work until we actually call the function. So add this to the gameLoop function:

If you test it now, there should be ‘Score: 0’ in the top right corner. Except when an enemy is shot, the score doesn’t increase yet. We just need to add one line to the hitTest function. After the line enemies.splice(j, 1), add this:

Now, every time that an enemy is destroyed and removed, the score will be increased by 10. Since we have the score working and it wasn’t that hard to set up, we’ll create the hit detection for the player’s ship. We’ll start with this:

The first thing we do is create a couple of variables called ship_xw and ship_yh. These two variables find us the top right and bottom right corners of the ship by adding the x position to the width of the ship and the y position to the height. This function is pretty much the same as hit detection for the laser, we’re just checking more, because the ship has four side and the enemies have four sides and any one of them could touch, so we need to check for each. The for loop checks our ship against every enemy in the enemies array. Now the code that checks to see if the ship is touching any of the enemies:

Each of these four if statements checks to see if any part of the ship is within one of the enemies. I’m not going to go through each one, they essentially say, if the ship’s x position is greater than the enemy’s x position but less than it’s x position plus it’s width and it’s y position is greater than the enemy’s y position but less than the enemy’s y position plus it’s height, then it’s a hit. And this is repeated for the other three sides of the ship.

This is all great and everything, but it won’t amount to much unless we actually have something happen when there’s a collision between the ship and an enemy. So we need to create a new variable that we’ll add to the list at the top:

Pretty self explanatory, if alive equals true, then our ship is alive, now back in the shipCollision function, we just need to update it to this:

Now, whenever the ship hits an enemy, alive will be set to false. Of course, this needs to be added to the gameLoop so that the function actually runs:

We still have to change one thing, right now, if alive is changed to false, it doesn’t matter because it’s not actually affecting anything. To make shipCollision actually do something, the gameLoop function needs to be updated to this:

Now the game will only run if alive is true and if it’s false, we get a black screen with just the score showing. That’s kind of boring, so for now we can at least tell the player the game is over by adding this to the scoreTotal function:

When alive is false, the words game over will appear at the center of the canvas. And with that, we continue to add functionality to our game. Next time, we’ll add lives and give the player the option to play again after they’ve lost all their lives. One more thing, as I learn more about building games using JavaScript and the canvas tag, I’ve discovered one other change we should make to the game. Up until now, we’ve been using setInterval to fire off our code, but I’ve learned that it’s not always the best option, mainly because, as in our case, we’ve set the game to fire every 25 milliseconds. This can lead to a problem if the browser can’t run all the code in those 25 milliseconds. It seems the smart way to go, is to use setTimeout, which fires won’t fire until all the code has run. Instead of having:

inside the init function, we’ll add this to the gameLoop function:

Setting it to 1000/30 amounts to running the game at thirty frames a second, which is what I’ve always set for my Flash games. You can check out the game so far right here.

Here’s the entire code: