HTML5 Typography - Learn HTML5 by Creating Fun Games - page 66

Note
Keep in mind that, although it is possible to make a container element look
completely round by specifying a border radius value to all four corners large
enough proportional to each side's length, the element is still a rectangle to the
browser. In other words, if you float two or more elements that have been made
to look round through CSS, they will behave like rectangles and not circles.
The flow of elements and text in HTML5 is still rectangular based, although there
are experimental APIs that allow us to specify arbitrary shapes through which
text flows. For more information about these particular CSS APIs (called regions
and exclusions ), see Chapter 6 , Adding Features to Your Games .
There was only one use of CSS border radius in the game, which was on the right
side of the navigation options widget. The API allows us to specify which specific
side to apply a border radius to, and to demonstrate this feature, only two of the four
sides of the container were rounded.
The player icons could have been more HTML5-ish instead of just being a transpar-
ent image applied to the background of the element. One possibility could be to have
each icon be a rectangular image, which we could apply to the background of the
container representing each player, then we could have used border radius to make
the element look completely circular. An optional box shadow could also have been
added to create the same shadow effect achieved by the photo editing software used
to create the images. One benefit of using this technique would be that the native
effects would scale much better, meaning that if you zoom the page in or out, the
image will eventually look distorted and pixelated, whereas any border radius, box
shadow, or borders added to the element would always look smooth and fresh.
JavaScript
Although the logic that drives this game is fairly simple, and quite a bit limited, there
is still a decent amount of JavaScript code in order to make the game work. Since
we're trying to focus on HTML5 features, we'll only look at one particular API used
in the code that can more or less be considered HTML5. This is the selectors API ,
which was first drafted by the W3C back on May of 2006.