Game Development Reference
In-Depth Information
Chapter 3. Understanding
the
Gravity
of HTML5
Before we dive into the game that we'll build in this chapter, we will examine why writ-
ing applications in HTML and JavaScript can be difficult when deploying in multiple
different browsers. We will focus on simple and practical solutions to these problems,
especially with regards to HTML5 and the latest APIs used today.
The game we will build in this chapter will be a basic jelly wobbly gravity game. It will
make use of HTML5's new API for vector graphics, native audio manipulation, and
drag-and-drop. As the backbone of the rendering system for this game, we will use
the old JavaScript timer, which, as we will see, is not at all appropriate for games such
as this one where we need multiple updates per second. Thankfully, modern browsers
have solved this issue, and taken into account the need we have for highly efficient
rendering engines. However, we won't be discussing this new feature until the next
game. Just for completion, this new feature is known as
requestAnimationFrame
.
Browser compatibility
Anyone who has done any web development at all has quickly developed a very
deep, profound, and thorough hatred towards the way different browsers interpret and
render the same code. However, if we dig a bit deeper into this phenomena, and
look for the root cause of these discrepancies, it will surprise some people to real-
ize that the problem is not what it seems. While finding the cause for rendering dif-
ferences is easy, for example, some browsers define the box model differently, find-
ing the cause for differences in code may not be so clear. Surprisingly, some deve-
lopers seem to despise the JavaScript language because some code runs differently
in some browsers. However, the truth of the matter is that JavaScript is actually quite
portable, and its API is quite stable and consistent.
Believe it or not, most of these headaches are caused by the DOM API, and not
JavaScript itself. Some browsers register DOM-related events one way, while other
browsers don't acknowledge that method, and instead use their own variation for it.
The same goes for manipulating DOM elements and subtrees.
