Developing Better Than Native Games - HTML5 Game Development Insights - page 225

Since you should decouple event handling from your game loop (see Chapter 20), you may resort to using a DOM
element on top of your game to serve as a fullscreen button as a quick solution. With event handling decoupled from
your loop, you cannot call requestFullscreen from the loop when your code detects that an event has happened
inside the boundaries of a button. Instead, you can either call requestFullscreen directly from your game's touch or
click handler, and in that case you need check the event coordinates against the button area, as shown in Listing 15-1.
Listing 15-1. Calling requestFullscreen directly from your game's touch or click handler
onTouch = function(event){
// retrieve first touch coordinates
var x = event.touches[0].clientX,
y = event.touches[0].clientY;
// isInFullscreenButtonArea detects if the button have been clicked
if(isInFullscreenButtonArea(x,y)){
canvas.requestFullscreen();
}
else{ // fullscreen button haven't been touched
// record event coordinates for later use by our loop
recordTouch(x, y);
}
};
canvas.addEventListener( 'touchstart', onTouch );
You could also create a DOM element such as a div with its own event handler to serve as a button, as shown
in Listing 15-2.
Listing 15-2. Creating a DOM element with its own event handler to serve as a button
onTouch = function(event){
canvas.requestFullscreen();
};
div.addEventListener( 'touchstart', onTouch );
Depending of the structure of your game, one approach might be more convenient to implement than another.
Losing Fullscreen and How to Handle It
On both desktop and mobile you may lose fullscreen state at any time. The user can exit fullscreen himself by hitting
a key, by performing a gesture, or by rotating the device; he might also cause fullscreen to exit by switching apps or
turning the screen off.
Whether the user exits fullscreen on purpose or accidentally, your game should be able to handle it. The browser
fires the fullscreenchange event whenever it enters or exits fullscreen. When your user exits fullscreen, you should
give the option to the user to go back fullscreen; you may also choose to pause the game. See the code in Listing 15-3.
Listing 15-3. Giving the user the option to go back fullscreen after exiting it
onFullscreenLose = function(){
showFullscreenButton();
pauseGame();
};