HTML and CSS Reference
var timer = setInterval(nextElement,500);
The first thing this code does is get the dimensions of the window using jQuery; then it defines a couple of
variables to store the number of blocks left to display and the number the user has clicked.
It then defines a nextElement function that is called each time a block is to be added to the page. This
function first checks if the game is over by looking at the countdown variable and calls the gameOver meth-
od if it is. If the game is not over, a random x and y position is generated and a new 50-by-50-pixel red square
block is created, styled, and positioned on the screen.
The gameOver function first clears the interval timer, so that no more elements are added onto the page,
and then pops up an alert message either telling the player that they won or lost.
Next is a call to setInverval to ensure a new block is created every 500 milliseconds.
Finally, with one call to $(selector).on , the game captures all the mousedown events on all the <di-
v> s inside the #container element, even for elements that have not yet been created. When the player clicks
a <div> , the countup variable is increased, and the element is faded out. In this case the mousedown event
is used instead of a click event because the click event requires the mouse to be released over the same
element as it is clicked on, which slows down the game.
NOTE Users can cheat in the Block Clicker game by clicking the fading element quickly in succession. Can
you think of a way to prevent this?
Making Ajax Calls
So far, only one aspect of jQuery has been discussed in detail, DOM manipulation, but the library has some
more useful tricks. jQuery also provides a simple and consistent interface for making AJAX call back to a web
server. Using AJAX allows your game to push and pull data to and from a web server without requiring a full
page reload. One thing to remember when making Ajax calls is that they are, by definition, asynchronous. This
means that you can't be sure when they are going to be finished.
Calling Remote Servers
jQuery provides one method to rule them all when it comes to making Ajax calls, called $.Ajax . If you look
at the documentation for $.Ajax at http://api.jquery.com/jQuery.ajax/ , you can notice that the method takes
more than 30 different options to configure various parts of the request being made.
This level of configurability can be overwhelming when you just want to send or grab some data. Luckily
jQuery provides a few shorthand methods. For example, say you want to load a JSON file of level data; you
could simply write:
// Do something with your levelData