HTML and CSS Reference
In-Depth Information
00:00:05.000 --> 00:00:07.000
<i>It's a pass</i>
5
00:00:08.000 --> 00:00:10.000
<i>It's picked off</i>
In the future it will also be possible to style the cues in CSS using the ::cue pseudo; unfor-
tunately, Chrome hasn't yet implemented this.
That's enough media APIs and features for now. For the remainder of this chapter, you're
going to learn about experimental APIs that will be particularly useful for games or mobile
devices (or games on mobile devices!).
I.3. APIs for gaming and mobile
This section groups together a set of HTML5 APIs that are targeted at gaming, with partic-
ular reference to gaming on mobile devices. In this section you will
• Build a test bed, which you'll use to explore the APIs
• Target mouse events at a single element with
setCapture
• Expand an element to full screen
• Replace mouse events with touch events
• Replace mouse events with orientation events
• Use the vibration and battery APIs
• Use the pointer lock API to enable immersive experiences
I.3.1. Preparing a test bed—the return of Wilson
We need something with which to demonstrate all these APIs, so initially you're going to
build a simple canvas app (see
chapter 6
for background), which draws an object that will
then follow the mouse around the screen. You'll use this as the basis for all the experiments
until the end of the appendix, so it's worth spending time understanding how to put it to-
gether even if the techniques are familiar to you.
Your starting point for API exploration is a Wilson head, which follows your mouse pointer
around. The result is shown in
figure I.9
.
