This chapter is the second and final part of the series where we're building a more robust snake game. In this chapter, we'll take what we already had from Chapter 3, Understanding the Gravity of HTML5, and add more HTML5 APIs to it, so as to make the game more feature rich, providing an even more engaging user experience.
The first version of the game used five HTML5 concepts, namely 2D canvas rendering, offline application cache, web workers, typed arrays, and requestAnimationFrame. In this version, we'll include two features from the new web storage API, namely local storage and session storage. We'll also look at a third API that is part of web storage, IndexedDB, as well as the web messaging feature, which includes cross-domain messaging.
Local storage and session storage are two mechanisms that allow us to save data on the user's browser using a key-value strategy. This is similar to a cookie, where every value must be a string. The difference between these two storage options and a cookie, first and foremost, is that a cookie is always sent back to the server through HTTP requests. This can be especially undesirable when we have larger amounts of data that we would like to store, since that data would be traveling around consuming extra bandwidth, and there is nothing that we can do about it. With HTML5's web storage, we can save more data locally, and that data never leaves the user's machine, though HTTP components like cookies do.
IndexedDB, also part of web storage, is similar to local and session storage, where data is stored in a key-value manner, but instead of values being limited to strings only, IndexedDB is more of an object store, where we can store entire JavaScript objects. Of course, IndexedDB is much more than a mere hash map that holds objects for us. As the name implies, this new API allows us to index these stored objects with the purpose of being able to search for them through a query system. In summary, IndexedDB is a NoSQL database accessed through an asynchronous programming interface.
Finally, the web messaging API provides an interface through which an HTML document can communicate with other HTML contexts. These documents can be related by iframes, in separate windows, and even in different domains.
Two new features were added to this second version of the game. First, we now keep track of the highest score achieved by a player, saving it through local storage. Even if the player closes the browser application, or turns off the computer, that value will still be safely stored in the player's hard drive, and will be loaded when the game starts again. Second, we use session storage to save the game state every time the player eats a fruit in the game, and whenever the player kills the snake. This is used as an extra touch of awesomeness, where after the player loses, we display a snapshot of all the individual level ups the player achieved in that game, as well as a snapshot of when the player hit a wall or run the snake into itself, as shown in the following screenshot:
At the end of each game, an image is shown of each moment when the player acquired a level up, as well as a snapshot of when the player eventually died. This images are created through the canvas API (calling the
toDataURL function), and the data that composes each image is saved throughout the game, and stored using the web storage API.
With a feature such as this in place, we make the game much more fun, and potentially much more social. Imagine how powerful it would be if the player could post, not only his or her high score to their favorite social network website, but also pictures of their game at key moments. Of course, only the foundation of this feature is implemented in this chapter (in other words, we only take the snapshots of these critical moments in the game). Adding the actual functionality to send that data to a real social network application is left as an exercise for the reader.