Previously on Build a game using the DOM, in part 1 we made a block move around with the arrow keys, in part 2 we made our block shoot lasers and in part 3 we added enemies that we could shoot. We could stop here and call the game “Invincible laser shooting block” but I think that would get boring after a while. So, we’ll set it up so that if our block hits an enemy block, we reset the game back to the start positions. And then we’ll add a score and lives so the game isn’t infinite.

The first thing we’re going to do is add the ability for our game to check if our block is in contact with one of the enemies. We’ll do this by altering the moveEnemies function since we already have loop running that we can take advantage of.

I’ve marked the new content with the ultra descriptive new stuff comment. Inside the for loop, we add a bunch of new variables that we use to get the position of the current enemy in the loop and the position of the player. The variable ex = the enemy’s x position and ew = the x position and the width of the enemy. Doing this with the y position and height as well enables us to figure out if the player overlaps any part of the enemy. We don’t have to declare variables for these values, we could just plug in the longer code in the next part, but this really simplifies it and makes it easier to read.

Next we add some else if statements to our existing if statement. Here is where we check if our player has overlapped the enemy block and if it has, then we run a function called checkLives. Why are there for if statements to check this? The way I think about it is we need to check for each corner of the player’s block and to do this we need an if statement for each corner. If you look at the code, we’re really checking if, as in the first one, the player’s x position is greater than the enemy’s x position but less than the enemy’s x position plus it width and if it’s y position is great than the enemy’s y position but less than it’s y position and it’s height. If this is true, then we know that the top left corner of our player’s block is inside the enemy and it’s a hit. Now we need to write the checkLives function.

First we need to add something to our variables at the top, you can add this up the other createElement variables to keep things organized:

This is for the text we’ll display when the player runs out of lives, which we also need to create a variable for. And finally we need to make a variable to check if the game is over:

Add that at the end of the variables at the top of the code. Now, on to the checkLives function:

The purpose of the checkLives function is to see if the player has more than 0 lives. If they do, we run a function called resetGame, which we’ll write next, and subtract 1 life. If they don’t, then we remove everything from the play area, add the gameOverText which we set the innerHTML to equal ‘Game Over’ and set gameOver to true. Pretty simple.

Before we write the resetGame function, we need to add some variables and then we need to add a couple of lives of code where we set up the game. We have an object called shipPos that we use to position our player and it looks like this:

For the resetGame function to work, we need to get the starting position of the player and save it because at the beginning, we’re setting the start position dynamically based on the width and height of the play area. Update shipPos to this:

And then after where we set shipPos.x and shipPos.y, we need to add a couple of lines:

Now that we have those set, we can reset the player to their starting position when they lose a life.

With resetGame, we reposition the player back to the starting position and then we reposition all the enemies back to their starting positions. And lastly for the lives part of this tutorial, we have a change to make to our loop function:

Now we only run the functions that move our elements around if gameOver is false, so when the player runs out of lives, we don’t run those functions that wouldn’t do anything. You’ll notice one other difference from part 3, instead of setTimeout, I’ve using requestAnimFrame to run the loop. This is a function created by Paul Irish to use the requestAnimationFrame if the browser can or else use setTimeout. I’ve just created a seperate JS file so I can just link to it when I need it for a project. Just make sure you link to it before the game code.

Next up is keeping track of the score and it’s probably a pretty good idea if the player knows how many lives they have left, so we’ll add that too. First thing we’ll do is add some CSS, including some styling for our game over text, which you might have noticed we gave the class of game-over to.

This will position our score and lives divs in the upper left corner and it will center the game over text when that’s on screen. Now the JavaScipt:

Add these lines up with the other createElement variables and then add these at the end of the variables:

Next, after the section where we set up the game, add this block of code:

This code has the same stuff going on as when we’re creating the player and enemy blocks. We add the scoreDiv and the livesDiv to the body and give them the classes score-div and lives-div respectively. Then we add the labels which will hold our text inside the divs. Next, inside the checkHit function, inside the if statement where we remove the laser and enemy if it’s been hit, add this line:

Now, for every enemy that’s killed, the score will go up by 100 which is all well and good but we also need to update the score text so the player can see it.

Really simple function here, we just update the text inside the scoreLabal and the livesLabal p tags. Of course, if we still have to call the function and we’ll do that in the loop function. Updated it to look like this:

Now if you run the game, you’ll have score, lives and a game over screen. A fair amount of code, but none of it was too complicated, especially when compared to the previous steps. You can check out the demo here. I’ve marked all the new code in case you want to go through it.

Next time, we’ll finally add graphics, a start screen and a start over button on the game over screen.

In part 2, we made our ship shoot lasers and while I’m sure some people would love to play a game that consisted entirely of shooting at nothing, I think we can do a bit better. Let’s add something to shoot at because I’d rather die than live in a world where the green boxes control us blue boxes (we’ll change these to real graphics in part 4).

First thing we need to do is add the variables we need for the enemies, just add them to the other ones at the top:

It’s pretty much the same stuff as the variables we used for the lasers with one more, enemyPos is used to get the starting position of our ships. The y position is set to negative fifty so that they start off screen. Next we need to create our enemy ships and add them to the play area, so we’ll do that with a for loop:

Since enemyTotal is set to 4, the loop runs four times and gives us four enemies. First, the variable called enemy is equal to Enemy(). Then it’s added to the enemies array as well as enemyPos.y. Next, it’s added to playArea with appendChild and given the class of enemy. Finally, we assign the top and left positions and the last thing we do is increase enemyPos.x by 150 which spreads the enemies out across the screen. If you ran this code now, you’d get an error because we’re calling a function called Enemy but that function doesn’t exist yet. So let’s create it:

Exact same thing as our Laser function, so why don’t we use the same one? In a later part, we might need to use those functions for other things, and it keeps our code organised. Now that we have our enemies added, we need to make them move or this might be the easiest game ever made. Let’s make the moveEnemies function:

This is pretty much the same as our moveLaser function from part 2, just in the opposite direction. It move the enemies down the screen and if they pass beyond the bottom, then they are reset back to the top. Of course, this won’t work if we don’t call the function in our loop:

Now for this to be any fun, we need to be able to shoot the bad guys, so to do that we need to create a new function and alter another one. First, let’s alter moveLaser, after we finished part 2, it looked like this:

And we need to change it to this:

What’s changed? First off, instead of checking to see if the laser has passed the top boundary of the play area, we’re checking to see if the laser is still in the play area and if it is, then we move it up, otherwise we remove it. We’re also calling a function called checkHit which we’re using to see if the laser has hit one of the enemies. One thing to notice is that we’re passing the value of i to the checkHit function so that we know which laser we’re checking.

Wow, what’s going on here? First, we get the x and y position of our laser, then we run a loop where we check the laser’s position against the positions of all the enemies. And if the laser intersects one of the enemies, then we remove both the laser and the enemy from the play area and we remove them from the lasers and enemies arrays. Now, we need to make a change to the moveEnemies function or else this is going to be a pretty quick game. Right now, if you played the game, you’ll shoot the enemies, they’ll be removed from the game and then that’s it. Let’s add something to moveEnemies to add more enemies.

This new code checks if the enemies array’s length is less than enemyTotal and if it is, it adds a new one to the play area. It’s the same as the loop we used to create the first batch of enemies with one difference, we generate a random number to assign the new enemy’s x or left position.

And that’s it for part 3. We’ve now got the bare bones of a shooter game now, check out the demo. In the next couple of parts, we’ll add things like actual graphics, a score and a start screen.

In part two of building our game, we’re going to give our blue block or ship the ability to shoot lasers. But first we have to make a couple of changes in our code from part one in order to make the game easier to build and control the game’s elements. Right now, the play area and the ship are two separate elements in the body tag, but we’re going to change this so that the ship div is inside the playArea div. So, here’s our old block of code setting up the game:

Change it to this:

The main changes are, instead of document.body.appendChild(ship), we have playArea.appendChild(ship) which puts the ship div inside the playArea div. Next, we change how we set the boundaries of the play area because now that the ship div is inside, we don’t need to get the offsetLeft and offsetTop any more. But for this to work the way we want, we still need to update the CSS:

Setting the position to relative allows us to absolutely position elements inside the playArea div and setting overflow to hidden allows us to have elements move past the borders and not be seen anymore. Now, let’s add those lasers. First, we need some CSS:

Pretty much the same as our ship class, except laser shaped. Next we need to add some variables to our JavaScript, add these to the end of the list of variables at the top of the code:

First, we have an array to store our lasers in, so we can loop through it to update our lasers’ positions. Next, laserSpeed is self-explanatory, we set it up here so that it’s easier to change than if we had set it further down in the code. Also, this way we could alter it in game if we want to.

We set it so when the player presses the x key, the ship will fire a laser. Why x? Because the spacebar can be loud and annoying and x is always cool. Add this code to the bottom of the keyDown function:

So, if x, which has the keyCode of 88, is pressed and if the total amount of lasers in the lasers array is less than max_lasers, then we call a function called Laser, which we’ll write next. Then we push the variable laser into our lasers array along with the ship’s y position. Next, the laser is added to the playArea div using appendChild. Then we add the class of laser to that div and set it’s top and left position.

You might be wondering why it says lasers[lasers.length - 1]. Remember that a JavaScript array starts at zero, so the first element of an array is lasers[0]. So, if we want to get the newest element in the array, it will be the last one, but if our array has one element and we put lasers.length, that will equal one and give us lasers[1]. But that would give us the second element which doesn’t exist in this example, we want lasers[0], so lasers[lasers.length - 1] will always give us the one we want in this situation.

Now we need to write that Laser function:

Yes, it’s that simple and we could just put:

But let’s say later on we need something else to happen when a div is fired, this will be the place to do it. Also, it helps to keep the code organized. Now, if you run the game, the lasers will be added but they’ll just sit there and that doesn’t make a very good offensive weapon. Now we need a function to move the lasers:

This function just runs a for loop that cycles through all the elements in the lasers array and moves them up the playArea at whatever laserSpeed is set to. Of course, to make this work, we need to call it in the loop function:

This works but we have one problem, when a laser goes past the top of the playArea, it keeps going forever and once five lasers are fired, the player can’t fire any more. We need to add something to our moveLasers function to check if a laser has left the viewable area.

All we need is an if statement that checks if the laser has passed the top of the playArea and if it has, it removes it from both the DOM and from the lasers array which allows the player to shoot another laser.

That’s it. Now we have a ship that looks like a blue square, for now, that shoots lasers that look like red rectangles, for now. You can check out the demo here. In part 3, we’ll add some enemies to shoot at or else this will be one of the most boring games of all time.

When I first became interested in building games using the browser and not Flash, I saw the examples people had made using HTML5’s canvas element so I started learning to build things with that. But every once in a while I’d see someone saying, “Canvas is cool but I prefer using the DOM to build my game.” Use the DOM? The DOM is for displaying pictures and text, not for guys to jump on monsters or space ships to shoot lasers at giant octopus aliens. But then I noticed something, jQuery animations look pretty smooth, especially in Chrome and Firefox, so why couldn’t the browser render a ship flying around in space? So, let’s give it a shot. I’m going to use pretty much the same code as I used in my canvas game tutorial but adapt it for the DOM.

For the first part, we’re going to get a box that will eventually become a ship to move around a playing area. If you’re following this tutorial, I’m going to guess you’ve had a bit of experience with HTML and you’re thinking that we’ll be starting with some divs and go from there. We’re actually going to create everything using JavaScript and style it with CSS which I think will give us more control over what we’re displaying. First off, our CSS:

Nothing special here, this just creates am 800 by 600 playing area and our ship will be a 50 by 50 blue box, just like a real space ship. Don’t worry, we’ll change it in a later part, this is to just get things going and prove it can work. Enough with boring CSS, let’s see some JavaScript! Here’s our variables:

First off, all our JS is going to be inside an anonymous self calling function because that’s just a good practice. This way our variables won’t affect any other code that might be on the page. Our first variable is playArea which is a div that we’ve created using the createElement method. The same goes for ship. We’ve created these elements but we haven’t added them to the document yet, so if you run just this code, nothing will show up. Next is shipPos, which is an object that we’ll use to keep track of our ship’s x and y position. shipSpeed should be pretty obvious, it’s the speed our ship is set at. The key object is used to check which arrow key is being pressed so we can tell the code to move the ship around. Finally, shipWidth and shipHeight are there to help us keep the ship in the play area boundry and we’ll use it later to see if our ship has been hit by an enemy. offsetWidth and offsetHeight gives us the height of ship that was set in the CSS, so if we want to change it, we just change the CSS and it will update in the JS. Place this next block of code right after the variables:

What is going on here? The first line adds our playArea div to the document and the next line gives it the class of ‘playArea’. The next two lines do the same thing for ship. Then the ship’s position is figured out using the position and width of playArea. And the last four lines calculate the sides of playArea so we can check when our ship touches it.

The function keyUp checks to see if one of the arrow keys has been pressed and changes the corresponding key boolean to true. keyUp checks for when that key is released and sets the value back to false. Now we have to move our ship:

The first part of moveShip checks to see if one of the direction values is true and then moves the ship in that direction at whatever value we’ve set shipSpeed to. The next part of the function checks to see if the ship has reached one of the edges of the playArea div, if it does then the ship is kept inside the div. Finally, the actual updated position of the ship is set on the ship div.

Finally, we add a couple of event listeners so that our game will register when a key is pressed or released and the right function is called. Next we have a function called loop which calls our moveShip function and then has a setTimeout to call loop 60 times a second. And then to get it all started, we call loop for the first time.

You can check out the demo here.

One thing, this doesn’t work in any version of Internet Explorer because classList isn’t in IE yet. Maybe in a later part, we’ll add some compatibility but for now, I think it’s fine if this just works in the other major browsers.