Now some code:

I’ve based this off an example by John Resig, but he used ninjas instead of pizza. We have a function called Pizza. Inside PIzza, we declare a variable called slices and set it to zero. Next, we create a method and assign it to this.cutSlices which is like saying Pizza.slices. cutSlices allows us to increase slices by one. And then we create method called getSlices that returns slices. Why do we need that? Well, if you take a look at the next four lines of code, you’ll be able to see what’s happening here. We create a variable called pizza and use it to create a new instance of Pizza. Next we called pizza.cutSlice which increase slices by one. When we console.log pizza.getSlices(), we get one. But if we log pizza.slices, we get undefined. Why? Because we declared slices as a variable, we don’t have access to it unless we create methods like getSlices using the this keyword to give us access to it.

Ok, that’s kinda cool but what’s the point of it? Well, let’s look at another example that I think will help make it clearer.

Now we have a function called Pie, which is pretty much the same thing as our Pizza function, except for one difference, instead of var pieces = 0, we have this.pieces = 0. If you look at the lines of code that come after our function, you’ll see the real difference. When we logged pizza.slices, we got undefined, but if we log pie.slices, we get 1 because we have access to that variable. And if you take a look at the last two lines, you’ll see why that can be an issue. We set pie.slices equal to ‘I like pie!’ and when we log it out, we see that it worked. Now if this was a real program, it would be broken because ‘I like pie!’ is unfortunately not a number and we can’t increase it by 1.

So there we go, if you don’t want the variable to be accessible from outside of the function you write your function like the first example. We can also make private methods this way, but that’s another blog post, I think.

And next we need to update our template

And this will work exactly like it did in the previous example, except we’ll have one problem. Nicolas Cage doesn’t use a weapon, so he’ll just have a blank spot and that will look pretty awful. Lucky for us, we can use a conditional statement to check if something exists and only add that part if it does. So we’ll modify the template to look like this:

Since not everyone has a weapon, we can wrap that p tag in an if statement like this {{#if weapon}}. This is like saying if (weapon) in regular JavaScript. If weapon exists, then add this, if it doesn’t, don’t. Really simple and really useful, this can be used if you want to create templates with content that really varies. We can also take advantage of paths in Handlebars.js, which can be used to make more complicated content more organized.

I’ve split name into two parts, first and last, which we’re using as an example of how we can use objects to organize our content even more. But if you loaded the page now, it would should something like [object Object]. The content is in there, how do we get to it?

Now if you run the code, it looks exactly like it was before. This doesn’t really make that much sense to do in a simple example like this but it’s a great option to have if you’re working with a more complicated layout and content. But the point of using these templates it to have less code in our HTML and do all the work in our JS file. This is where Handlebars.js helpers come in. Add this code to your JS file:

We call the registerHelper method and give it a name of ‘fullname’ then we create function where we combine the first and last name. The person variable can be anything, we’re just passing an object to this function. It’ll make more sense when we look at the HTML:

Instead of {{name.first}} {{name.last}}, we have {{fullname name}}. We’re passing name to our helper and getting Handlebars,js to do all the work of combining the names for us. Helpers are another one of those features that will make your like a lot easier when you’re using far more complex and varied content than we are here, it will keep your template simple and easier to use and put all the heavy lifting in the JavaScript.

You can check out the demo.

That’s all I have about JavaScript templates. Use them any time you can because they will make your coding easier and allow you to work a lot faster.

We’re using the same HTML as before, so all we need to do is alter our JavaScript file (I’ve added CSS to style the example, but none of it is necessary for our example to work). What we’ll build is a page with three links at the top for each rating, then we’ll swap out the content based on which link was clicked. Here’s the starting point for our JS (where we left off last time):

Just as a refresher, we use Handlerbars.js to grab and compile the template we have in our HTML and then we use jQuery’s append method to insert that template into the page after we pass the people array to the template. But we aren’t doing anything special, just passing an array to our template, we can use this to set up our different categories. First, we need to add the category navigation to our HTML:

We have three choices, “Awesome”, “Badass” and “Crazy”. And each has a hash of 0 to 2. We’ll use this when the link is clicked to show that content on our page. Now on to the JavaScript, first we need to grab our nav. Add this right under the container variable:

Now we have access to all the anchor tags inside our nav. If this content was being updated and added to frequently, then you’d probably want to create the category choices dynamically too, but we don’t really need that in this example. Next we need to change our array so this will work the way we want. Currently, we have objects in our people array and Handlebars.js runs through them and creates our HTML. Since we can nest arrays, which you should know unless you’re brand new to JavaScript, we can set up our people array in a way to make it easy to swap our categories. Change the people array to this:

Other than the fact that I’ve added a few people to our array, the main change is that we’ve nested an array for each category. And each of those arrays are exactly the same as our original array, it’s an array of objects. Now you might have figured out what we’re going to do. Each category in our nav has a hash that’s a number and that number corresponds with the position of that category in our array. In our original JS, we had this line:

Now we need to change it to this:

Now we’re passing the first item in our people array which is our Awesome category. So if we left it here, then the only change would that Mario shows up and Batman and Nic Cage don’t. And if you clicked on the links, nothing would happen. Let’s add some functionality:

If you’ve used jQuery even once, you should be able to guess what’s basically going on here. We’re using the on method to listen for when one of anchor tags is clicked and then we use preventDefault() so that the page doesn’t reload. Next we create a variable called hash but what’s going on with what we’re assigning it? The word this is equal to which anchor tag we’ve clicked on, and we then have access to that anchor tag’s hash. There’s a problem though, if we just had var hash = this.hash, hash would equal ‘#0’ and we can’t pass that as the position in our array. So we use JavaScript’s replace method and use a tiny regular expression to remove the ‘#’ so when end up with just the number. So var hash = this.hash.replace(/^#/, ‘’) will give us ‘0’ instead of ‘#0’.

In the HTML, I added a class of current to the ‘Awesome’ link, so we remove that and then we clear the HTML inside the container div with by calling jQuery’s html() method and passing an empty string to it. Next we run the same line of code as we did before to append our template to the page but this time, instead of passing 0, we pass whatever link was clicked using our hash variable. And, finally, we add the class of current to the link that was clicked.

And here’s a demo of what we get.

The final effect is nothing that you haven’t seen before, but usually we’ve had to reload the page and use server side code, use big, hard to edit strings of HTML in our JavaScript or use a something like the jQuery tabs plug-in that still requires us to write out all the HTML. Now look at how little code we had to write to get it to work.

I’m going to do another post showing how to use Handlebars.js’ features such as conditionals and helpers.

Let’s say we had some HTML like this:

There is nothing special here, just a couple of divs that list a couple of people, what they do and their rating. This is simple and would take 30 seconds to write. But let’s say that we might have to update the site a fair amount. Not enough that we need to set up a CMS but we’ll update it enough and with enough content that copy and pasting that code will be more work than it needs to be.

I like to use Handlebars.js. It’s super simple to use and it’s amazing how little code you need to set it up. First, just save this JS file, I’ve saved it as Handlebars.js. And then at the bottom of your HTML file you’ll need to link to it and jQuery:

Next we need to create the actual template. Handlebars.js uses curly braces {{ }} for the content in its templates. So what we need to replace in our template is the name, job and rating because we can leave the labels for those in the template because they’ll always be the same. The template will be inside a script tag with a special type attribute:

The type=”text/x-handlebars-template” tells our code that this is a template and to use it to create our HTML.

Wow, what is going on here? First off the {{#each this}}. This is just like a for loop in JavaScript. It’s just saying, for each of our items, use this HTML and add the content. Next we have {{name}}, {{job}} and {{rating}}. This is our content and we’ll set what goes there in the JavaScript we’ll write next. Finally we have {{/each}} which is the closing tag for our each loop. Simply put, for each item we have in our JS code, this will run and add the HTML to our page. If we have 20 items, our HTML will just have these nine lines instead of 180 lines of HTML. Now let’s write some JavaScript and make this work. We’ll create a JS file and link to it, I called my template-script.js. So you should have something that looks like this at the bottom of your HTML file.

Now our JS:

If you’ve used JavaScript at all, you should be able to figure out what’s going on here. First, we get the div with the id of container because that’s where we’re going to stick our generated HTML. Next, we create an array called people that contains all the content for our template. Inside the array, we have objects and each object has name, job and rating just like our template. Handlebars.js will insert the corresponding string into the template when it creates the HTML. Finally, we have a variable called template where we called Handlebars.js’ compile method on our template and we use jQuery’s html() method to get the HTML inside the script tags. Finally, we use jQuery’s append to add the template to the container and at the same time, we pass the people array to the template.

Now if we want to add or remove content from the page, we just edit this JavaScript file. In this example, which you can view here, it wouldn’t be that big of a deal to edit that HTML file, but in one with 500 lines of code, it would be a pain to hunt down the code you want to change. This way, you can just go into your 30 line JS file and add or remove 4 lines of code. I’m going to do another post showing some more complicated examples that really show the power of JavaScript templates.

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.

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.

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.

Then we have our CSS:

Now, let’s say that we want to get the width of the border that’s on our div with the class of box, we only need two lines to get it:

What’s going on here? First off, we’re finding our div in the DOM and assigning it to the variable box. Next, we’re declaring a new variable called borderWidth. Next we use a method called getComputedStyle and passing it our box variable, which gets all the style information of that element. Next we use the getPropertyValue method to get the value of the border width. Console.log that our and you’ll get ‘10px’. We could even turn this into a function that could be used any time we need it:

This was actually a bit tricky to figure out because I knew about the getPropertyValue method but I didn’t know about getComputedStyle, which you need for this to work.

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.

Well, the main reason was I didn’t know it could do what I wanted. In every example I’ve seen of querySelectorAll looked like this:

I didn’t realize I could pass in a class name and it would select everything with that class:

If you take a look at the Mozilla Developer Network page, the example it has is:

But up until recently, that was a huge red error message!

So what makes querySelectorAll so great? Well, I made an example that changes the class on a group of divs and then allows you to change it back even though it found the divs in the DOM using the class name. This wouldn’t be possible if I used getElementsByClassName because that live node list would become empty as soon as the class names were changed. Here’s the HTML and CSS:

This just makes five divs that are 100 pixels in width and height with a blue background to start. There a button that when clicked will change the class on the divs. Here’s the JavaScript:

So, when the button is pushed, the class is changed on all five divs from box to border. Check out the demo. And because I used querySelectorAll fo find them in the DOM, then even though the class on all the divs has changed to border, they’re still in the boxes array. This allows the class to be changed back to box when the button is clicked again. I included attachEvent because this will work in Internet Explorer 8, which makes this all kinds of useful!

I have to say, I really wish they’d picked a different name, it’s pretty clunky and doesn’t really describe what it does which I think is important for beginners. I’ll be honest with you, I’ve probably seen this function before but because it’s name, it didn’t catch my eye. I’m sure this makes perfect sense to the people that added it to JavaScript, but really, if you asked someone what it did, they would probably have a hard time guessing.

I’d like to see knowledge of this method spread more to front-end developers that only really know jQuery, because I don’t know how many times I’ve seen jQuery used just to select DOM elements. Hopefully, some devs will start using this so they don’t have to load jQuery just to select some divs.