Learning HTML5 from Dodge

You should probably check out the Dodge application first. The simple game, I must admit, is very similar to Blockdodge but the difference lies in the fact that this one is coded purely in Javascript.

Yes, you are right - That means that Dodge can run on the iPad. To do a quick check on this, right click on the playing area. You will find the familiar About Adobe Flash missing from the context menu!

So there are two features of the HTML5 specification that are being used in Dodge - the canvas tag and the global localStorage Javascript object.

The canvas tag defines a region or a stage on the web page where you can draw using Javascript. In our case, the playing area is the canvas and the blocks are animated by redrawing the canvas every few milliseconds just like key-framing in Flash.

The localStorage object presents a clean API to store persistant data in the form of key-value pairs in your browser's local database. It is quite similar, in concept and function, to a cookie; the only difference being the locally stored variables are not sent with each HTTP request to the server, thereby reducing performance overheads

The following localStorage API methods are used in the game to store the highest score and the number of games played for a given browser client.

// Insert a key/value pair into the local database
localStorage.setItem(key, value);
 
// Retrieve the value for a given key
localStorage.getItem(key); 

// Removes the entry from the database
localStorage.removeItem(key);