HTML and CSS Reference
In-Depth Information
Chapter 15
Developing Better Than Native Games
Florian d'Erfurth, Freelance Game Developer
Back in Chapter 3, we covered the common pitfalls that cause a game to perform poorly, as well as the techniques to
address them. Now we will tackle techniques to make your game look and feel just like a native one on mobile.
By applying the techniques learned from high performance JavaScript with the ones that we are about to cover, your
game will both perform and look like its native counterparts while being cross-platform. It will be better than native.
Note that you will be able to see all the techniques in action in the demo available in the download pack from
www.apress.com
along with the source code.
The HTML5 Fullscreen API
The most prominent difference between a native game and a web game is certainly the browser and the system bars
all around it. Thankfully, with the fullscreen API you can request a fullscreen status and make the game the center of
the player's attention.
Here's how the API looks like for entering fullscreen:
canvas.requestFullscreen();
canvas.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
canvas.mozRequestFullScreen();
And here's how it looks for exiting fullscreen:
document.exitFullscreen();
document.webkitExitFullscreen();
document.mozCancelFullscreen();
Yep, that's it. However, you can only enter fullscreen upon user interaction. That is, you must call fullscreen
from a touch or click event handler; otherwise it won't work, as shown in Figure
15-1
. Figure
15-2
shows it running at
full screen.
