The important CSS is this:

Crazy simple stuff here, normally the input with the class search has a width of 75 pixels but when the user clicks in it, the focus pseudo-class is activated, just like the :hover pseudo-class and then the width is set to 200 pixels. And with the transition set on the search class, the effect is animated. Plus, in my example, I’ve floated the input to the right, so it expands to the left, which would require some extra jQuery code to pull off.

One thing, this won’t animate in any version of IE (it’s coming in IE10) but the box will expand to the larger width when the input is clicked in.

The trick to how the effect works is that it’s powered by CSS but it uses JavaScript to trigger the effect. And the CSS it uses are translateX, transitions and animations. The animations are used to create a fade effect when the slider moves more than one “slide”. I’m not going to go step by step on how to build this, I’ll just go over the key parts and then if you really want to build your own version, you can go through the demo I’ve created. Here’s our basic HTML:

First off, anytime you use 3D with CSS, then you need to set the perspective:

A div with the class box-wrapper is the wrapper div for everything. The perspective property is set to 600 pixels, which essentially means the content is 600 pixels away on the z index. Next, the perspective-origin property is set to 2000px on the x axis and -200px on the y axis. This sets up the view that the user has. Next, we need to set up our transform-style:

Inside box-wrapper is a div with the id of box-container. I’ve set the transform-style to perserve-3d. There’s only two options, perserve-3d or flat, the first says everything should be positioned in 3D space, the other positions everything on the same plane as the container element.

Now it needs some JavaScript to set up the translateZ property of all the divs. The reason I decided to use to set all the z axis positioning on the divs is mainly because it allows you to add or remove divs without worrying about setting anything for them manually.

First thing this does is set the translateZ property of the box-container div to 0. Next, the boxes array contains all the divs with a class of box and in the loop they are all given a translateZ value that’s 400 less than the previous one.

The basics to how this works is this, there’s four divs, the first one is 0, the next -400, then -800 and finally -1200. To get the moving through 3D space effect, the box-container div’s translateX value is changed to be the same as the one we want to see, so if the 3rd one is selected, it will be set to -800 and that div is the one in the view port. To trigger this effect, the translateX of the box-container will be set depending on what link is clicked:

There’s one other effect that really helps flesh this out and that’s when the user clicks on a div that not the next div, say they click on div 3 when they’re currently on div 1, there’s a nice fading animation to make it look like the user is moving through the other divs. First the animation:

So this just fades the div in to 40% opacity and then back to zero to add to the transition effect. To add this effect, there’s a class called transition:

What happens is that if the user is going from say, div 1 to div 3, then div 2 would have the transition class added to it and you’d get that fade effect. But there’s one problem, once a CSS animation is fired, there’s no way to restart it. This was the part that caused me the most problems but a quick search lead me to CSS-Tricks, where of course Chris Coyier had the answer. The solution is that you have remove the element and then add a new version of it. Luckily, that only takes 5 lines of JS:

This code gets the element, clones the element and then replaces the element with the new element. This allows use to reset the animations.

Poke around the code in my demo. I didn’t use jQuery because A) Google didn’t on their site and B) because I want to make sure that I don’t rely on jQuery for everything. I made my demo to work in Firefox and also future proofed it to work in the other major browsers for the one day when they include 3D transforms.

One other thing, in at least my version of Chrome, the dev channel on Windows 7, you can’t click on either of the back two divs, in my version or on android.com. The same goes for Firefox. It does let you click on them in Safari, so I’m guessing this is a temporary bug but one that really make using this on real sites impossible, hopefully it gets fixed soon.

You’ve probably heard of the clearfix hack. Honestly, it took me a while before I started using it, mainly because for the longest time I followed the advice that you shouldn’t use hacks in your CSS. But eventually, I saw how many developers that I looked up to were using and I will admit, it made things a lot easier. At the same time though, it is still a hack and it’s the kind of thing that the flexible box model make unnecessary. At least in the browsers that implement it that is and predictably, Internet Explorer isn’t one that supports it, not even IE9.

So, wait. If not version of IE doesn’t support it and it’s the most widely used browser, then why would I use the flexible box model? There’s two reasons. The first being, I looked at my analytics and saw the IE users amounted to a very small about of the visitors to my blog, and since Firefox, Chrome and Safari all support it, then I shouldn’t have that much to worry about. But what kind of web developer would I be, if I didn’t make my blog display properly in most browsers. I needed a way to know if the browser supports the flexible box model or not.

That’s where Modernizr came in. Like the clearfix hack, for a while I was a bit wary of relying on a JavaScript file to make my site work. But, the more I looked into it and the more I built sites that used more and more JS, I realized the chance of it not loading is pretty low. What Modernizr does is add class names to the html tag of a web page. In my blog’s case, if the browser has implemented Flexbox, the it will Modernizr will add a class of flexbox and, in my CSS file, it will run this (shown without the vendor pre-fixes):

If it doesn’t support Flexbox, then Modernizr adds a class of no-flexbox and this CSS will be used:

I’ve become a big fan of Modernizr and I’m using it on more and more sites. If you’re planning on using it for just one or two CSS3 or HTML5 features, then you can now just download a custom build of Modernizr so it’s an even smaller file to load and run. Use Modernizr and you can start building websites using the modern features of HTML5 and CSS3 that you may have been putting off because you weren’t sure if it would work or not.

• 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:

• 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:

• 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’ve been following along, you’ll know that in the first two parts, we built a shooter game using HTML5 canvas that has a ship that we can control and shoot lasers from and enemies that move. Now we’re going to check to see if a laser hits an enemy and then remove that enemy from the game. If you’re coming from building games using Flash and ActionScript 3.0, the first thing you’re going to miss is hitTestObject. There’s nothing like this in JavaScript and the canvas API, so we’ll have to set up the hit test ourselves.

Adobe recognized that people were using Flash to build games and made things easier by introducing hitTestObject that allowed you to just write something like this:

That would check to see if the laser hit the enemy ship for you. Unfortunately, since the canvas API is still pretty new, we don’t have anything like that yet, so we’ll have to build our own hit test function. What we’ll need is to set up two loops, one for the lasers and one for the enemy ships. Then we check the position of each laser against each enemy ship and if a laser’s x position is greater than an enemy ship’s x position and the laser’s x position is less than the enemy’s x position plus it’s width, as well see if the laser’s y position is less than the enemy’s y position plus it’s height. If all of those are true then it means that the laser has hit the enemy ship.

Here’s that all translated into JavaScript:

We also need to call hitTest, so update the gameLoop function to this:

Right now, this function will check to see if the laser has hit the enemy ship but it won’t actually do anything when it does. Of course, we want to remove both the laser and the ship. You would think we could just do something like this:

This will remove both, but it will also give us an error. The problem is that for every time we run the loop for the lasers, we run the loop for the enemies for as many times as the length of the enemies array. So if our laser hits something before the enemies loop ends, it will still be checking to see if that laser has hit anything even though it’s already been removed. We can fix this by just using a boolean. If the laser hits, then remove the laser is true. And then we can move the lasers.splice outside of the enemies loop and we won’t get any errors.

We’ve just added a variable called remove, it’s declared in the function because we don’t need it anywhere else in the program. We set it to false and then when a laser hits an enemy ship, we change remove to true and then outside the enemy loop but inside the laser loop, we have an if statement checking if remove is true and if it is, we remove that laser and then set remove back to false.

Now both the laser and enemy ship will be removed. But since we only have five enemy ships, this will be a pretty quick game. So we’ll just add one line to our hitTest function and we can set up the game to have a continuous stream of enemies. Update the hitTest function to this:

You can check out the game so far here. Right now, our ship is invincible, so we’ll add another hit test to see if our ship has hit an enemy and we’ll also add scoring. Here’s the complete code:

• 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 built the basic structure of our game, but moving a block around while some others move down the screen doesn’t really make a great game. So let’s change the blocks to actual space ship graphics and give our ship the ability to shoot lasers.

Changing the blocks to ship graphics isn’t that hard. We just need to change the method we use to draw the ship and enemies from fillRect to drawImage. Here’s the two images I’m using:

Now we just need to make some adjustments to the JavaScript. The first thing we do is load the images, so add these two variables:

And then change the init function to this:

We’ve add four lines that first tell the variables ship and enemy that they’re images and then we set the source of each image. Now that we’ve loaded the images, we need to actually draw them on the canvas. In the drawShip function, we need to change this:

to this:

Now if you test the game, you’ll see the green block has been replaced with the ship graphic. Now on to the enemy ships. It’s the exact same thing, in the drawEnemies function, change this:

to this:

Now, the enemies will appear on the canvas as the enemy ship png I created. Now let’s make our ship shoot something. First we need to add a couple of variables:

We want to put a limit on the amount of lasers that a player can have on the screen at once, just to make things a bit more challenging, so laserTotal is set to 2, which actually means 3 lasers because arrays start at 0. Next, we need to add this line to the keyDown function:

This says, if the x key is pressed and then number of lasers in the laser array is less then totalLaser, then add a laser to our laser array. We’re positioning the laser to be at the front of the current position of our ship. The next step is to draw the laser on the stage. We need to create a function called drawLaser.

It’s pretty much the same thing as how drawEnemies function, except we’re checking to see if there are any lasers in the array first because if the player hasn’t shot one yet, we don’t want to draw any. The lasers aren’t going to do any good unless we make them move, so now we’ll add the moveLaser function:

With moveLaser, we’re running a loop and if the laser is visible in the canvas, we move it up 10 pixels, otherwise, if it’s passed beyond the top, we remove it from the array. The last thing we have to do is up date the gameLoop function:

And all these changes should get us this. Next time, we’ll have the lasers actually hit something! Here’s the complete code:

• 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

I’ve always found that, for me at least, one of the best ways to learn a new programming language is to make a game. It’s how I learned ActionScript 2 and then ActionScript 3 and it’s really helped me learn JavaScript. I’ve become a bit obsessed with the canvas tag over the last couple of weeks and I really wanted to see how easy or difficult to create a game with it compared to Flash. To see how difficult it is, we’ll build a vertical scrolling shooter game.

We’re going to start off by creating a ship that we can move around and then five enemy ships that move from the top to the bottom of the canvas. We won’t worry about game graphics in this part, we just want to get the functionality down and then build on that. I’m not going to worry about compatability with browsers like IE8, if the canvas doesn’t work in a browser, that’s it’s problem. This is just an exercise in learning how to make something that will work with a modern browser.

Let’s get started. We only need one line of HTML:

And a little bit of CSS so we can see what’s going on:

Now, let’s get onto the part that will make this game run, the JavaScript. First, we’ll get our ship working, so we need to set up some variables.

I’m not going to go over the basics of the canvas tag. If you don’t know how it works, you can learn more here. The canvas and ctx variables are for find in the canvas and then drawing on it, width and height are the canvas dimensions. The ship variables are for both the initial positioning and dimensions of the square that’s going to represent the ship for now. Next let’s write the code that will actually draw the ship block on the canvas.

So this code will get us this. A green block near the bottom of the canvas. Let’s go through the functions and see what’s happening here. The clearCanvas function is the something that we have to have in order for this to work. We have to redraw the canvas every time we we run the game loop and we need to clear everything on the canvas first or else we’ll get multiple copies of the ship on the canvas. So we clear it using the clearRect function and we set it to clear the entire canvas. Next we have the drawShip function where we set the fillStyle to green and then use fillRect to set the ship’s x and y positions and it’s width and height. The init function is what we use with the window.onload function at the bottom to get everything started. We get the canvas element, then get it’s context and finally, we use setInterval to call the gameLoop function every 25 milliseconds. With the gameLoop function we call clearCanvas and drawShip. This is the heart of our game, the init function sets everything up and then gameLoop makes it run.

Now, let’s make our ship move. Add these to the variables at the top:

Then change the init function to this:

We’ve added event listeners to listen for both keys being pressed down and keys being released. Now add these two functions: