Game Development Reference
In-Depth Information
Summary
This chapter touched on the very important topic of browser support and code portab-
ility. As productive and efficient developers, we should always strive to create main-
tainable 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 recom-
mended 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 dif-
ferent 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 ap-
propriate 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.
