jQuery Game Development Essentials

Most jQuery statements are of the following form: a selection followed by one or more actions. The way those actions are combined is called chaining and is one of the most elegant aspects of jQuery. A beginner using jQuery who wants to set the width of an element to 300 pixels and its height to 100 pixels would typically write something like:

$("#myElementId").width(300);
$("#myElementId").height(100);

With chaining, this would be written as:

$("#myElementId").width(300).height(100);

This has many advantages: the element is selected only once, and the resulting code is more compact and conveys the semantic meaning that what you want to achieve is really only one thing, which is to change the element size.

Functions that allow chaining don't only make it possible to group many calls on the same object, but also there are many ways to actually change on what object (or objects) the next function on the chain will operate. In these situations, it is typical to use indentation to convey the idea that you're not working on the same elements as the previous indentation level.

For example, the following chain first selects an element, then sets its background's color as red. It then changes the elements in the chain to the children of the previous element and changes their background-color attribute to yellow.

$("#myElementId").css("background-color", "red")
   .children().css("background-color", "yellow");

It's important that you always ask yourself how the current interactions with the previous and next element in the chain can be avoided for undesired behavior.

jQuery has its own way to use polymorphism, and a given function can be called in a lot of different ways depending on how much information you want to give to it. Let's have a look at the .css() function. If called with a String data type as the only argument, this function will behave as a getter by returning the value of the CSS property you asked for.

For example, the following line retrieves the left-hand side position of a given element (assuming it's positioned absolutely):

var elementLeft = $("#myElementId").css("left");

However, if you pass a second argument, it will start to behave like a setter and set the value of the CSS property. The interesting thing is that the second argument can also be a function. In this situation, the function is expected to return the value that will be set to the CSS property.

The following code does just that and uses a function that will increase the left-hand side position of the element by one:

$("#myElementId").css("left", function(index, value){
   return parseInt(value)+1;
});

However; wait, there's more! If you pass just one element to the same function, but that element is an object literal, then it will be considered as holding a map of properties/values. This will allow you to change many CSS properties in one single call, like setting the left and top position to 100 pixels in the following example:

$("#myElementId").css({
   left: 100,
   top: 100
});

You can also use strings as the key and value of your object literal as it's done in JSON.

A very complete resource for finding about all the ways to call a function is the jQuery API website (http://api.jquery.com).

We will now focus on a few functions that are of interest for developing games.

The .animate() function from jQuery allows you to make a property vary through time from the current value to a new one. A typical effect, for example, would be to move it left from 10 pixels, or change its height. From what you've seen earlier and experienced for other type of functions, you may expect the following code to make a div (DOM division element) move diagonally to the position left = 200px and top = 200px.

$("#myElementId").animate({top: 200}).animate({left: 200});

However, it doesn't! What you will see instead is the div first moves to reach top = 200px and only then moves to left = 200px. This is called queuing; each call to animate will be queued to the previous ones and will only execute once they're all finished. If you want to have two movements executed at the same time, thereby generating a diagonal movement, you'll have to use only one call to .animate().

$("#myElementId").animate({top: 200,left: 200});

Another possibility is to explicitly tell the .animate() function not to queue the animations:

$("#myElementId").animate({top: 200}).animate({left: 200},{queue: false});

Keep in mind that this also applies to other functions that are in fact wrappers around the .animate() function, such as the following:

Here is a list of functions that you can use to manipulate this queue of animations.

$("#myElementId")
.animate({top: 200})
.animate({left: 200})
.dequeue();

$("#myElementId").fadeIn().delay(2000).fadeOut();

Queues are not used only for animations. When you don't specify otherwise, the queue manipulated by those functions is the fx queue. This is the default queue used by animations. However, if you want to, you could create another queue and add any number of custom functions and delays to script some time-dependent behavior in your game.

The .bind() function is the basic way to handle events. .click() is, for example, just a wrapper around it. The two lines of the following example have exactly the same effect:

$("#myElementId").click(function(){alert("Clicked!")});
$("#myElementId").bind('click', function(){alert("Clicked!")});

However, there is a limitation with the usage of bind. Like all other jQuery functions, it only applies to the selected elements. Now, imagine a situation where you want to execute some task each time a user clicks a link with a given class. You would write something like this:

$(".myClass").click(function(){/** do something **/});

This will work as intended, but only for the link present in the webpage at the moment of its execution. What if you change the content of the page with an Ajax call, and the new content also contains links with this class? You will have to call this line of code again to enhance the new links!

This is far from ideal, because you have to manually track all event handlers you defined that may require to be called again later and all the places where you change the content of the page. This process is very likely to go wrong and you'll end up with some inconsistencies.

The solution to this problem is .delegate(), which is explained in detail in the following section.

With .delegate(), you give the responsibility of handling events to a parent node. This way all elements added later on as a child to this node (directly under it or not) will still see the corresponding handler execute.

The following code fixes the preceding example to make it work with a link added later on. It's implied that all those links are children of a div with the ID attribute as page.

$("#page").delegate(
".myClass", 
"click", 
function(){/** do something **/});

This is a very elegant way to solve the problem and it will come in very handy while creating games, for example, where you click on sprites.

If you need to remove an event handler you can simply use the .unbind() and .undelegate() functions.

In jQuery 1.7, .delegate() and .bind() have been replaced by .on() (and .off() to remove the handlers). Think of it as a .delegate() function with the capacity to behave like .bind(). If you understand how .delegate() works, you will have no problem to use .on().

This function allows you to add a child to the currently selected element (or elements). It takes as argument some already existing DOM element, a string containing HTML code that describes an element (or a whole hierarchy of elements), or a jQuery element selecting some nodes. For example, if you wanted to add a child to a node with the ID "content", you would write:

$("#content").append("<div>This is a new div!</div>");

Keep in mind that if you give a string to this function, the content will have to be parsed and that this could have some performance issues if you do it too often or for very large strings.

This function works exactly like .append(), but adds the new content before the first child of the selected element instead of after its last one.

This function allows you to completely replace the content of the selected node(s) with the string passed as an argument. If called without an argument, it will return the current HTML content of the first of the selected elements.

If you call it with an empty string, you will erase all the content of the nodes. This could also be achieved by calling .empty().

This function will simply delete all the selected elements and unregister all the associated event handlers and data.

In some situations, you may only want to remove some content for a short period of time and add it again later. This is typically a case where .remove() does too much of a good job. What you really want is to keep all those other things you associated with your nodes so that when they get added later on, they will work exactly like before. .detach() has been created exactly for this situation. It will behave like .remove(), but will allow you to reinsert your elements easily.