This chapter touched on the very important topic of browser support and code portability. As productive and efficient developers, we should always strive to create maintainable code. Thus, the more browsers we can support with the same code base, the more efficient we are. In order to help us achieve this goal, we can create abstractions that encapsulate code that varies from browser to browser, as well as from device to device. Another alternative is to use existing polyfills that other people have written, and thus accomplish the same thing, but with possibly less effort and more reliability.

The game we built in this chapter makes use of three HTML5 APIs, namely drag-and-drop, web audio, and SVG. Native drag-and-drop provided in HTML5 is a lot more than simply dragging DOM elements around the screen. With it we can customize a lot of the visual elements related to the drag-and-drop action, as well as specify data that is carried through the draggable element and the target where it is dropped.

Web audio allows us to manage multiple audio entities. Although most modern browsers support more than one audio format, there is not yet a single audio format that is supported by all of these modern web browsers. Because of that, it is recommended that we link at least two different versions of each audio file we wish to play through the API, so that all modern browsers are capable of playing that file. Although we can specify multiple sources for each audio element (where each source is a different version of the same file, but encoded in a different format), the browser is smart enough to only download the one file that it supports and knows how to play, or the one file that is most appropriate for it to playback. This makes load time shorter, and saves both the user and your server quite a bit of bandwidth.

Scalable Vector Graphics is an XML-based description language for two dimensional graphics, which can be embedded in a web page in a variety of ways. Since all of the graphical elements are nothing more than XML nodes rendered by the browser onto an SVG canvas, each of these graphical elements are managed by the browser, and can, therefore, be styled through CSS, and have user input events linked to them. We can also register callback functions with each SVG primitive for events generated by the browser, such as when the element is loaded, focused, blurred, and so on.

Finally, we saw how none of the timer functions provided by JavaScript are at all appropriate for fast games. Thankfully, there is a new rendering API that we'll cover in the next chapter that can be used to overcome the deficiencies of JavaScript timers. Using the request animation frame interface allows us to render our games much more efficiently because the browser itself manages the timer that is used, as well as allows our games to be more CPU-friendly by not rendering a screen that is not visible (such as when the browser is minimized, or a different tab is focused).

In the next chapter, we will write a traditional snake game, with the main focus points being rendering the entire game scene using the canvas API (as opposed to using raw DOM elements), application cache for offline game play, web workers, and the new and powerful JavaScript typed arrays. As alluded earlier in this chapter, we will also take a look at the new way to render very dynamic graphics in HTML5 apps, using requestAnimationFrame to access the browser's very own rendering pipeline.