Using some underutilized Html5 APIs to make your games stand out!

1. Using Tilt, Vibration and Fullscreen
HTML5 Device APIs

2.  The simplest of the 3
 Either works or doesn't. Just check existinence.
 Simple API ( although usual prefixes ):
navigator.vibrate = navigator.vibrate ||
navigator.webkitVibrate ||
navigator.mozVibrate ||
navigator.msVibrate;
navigator.vibrate(200); // TIME
navigator.vibrate([30,20,50]); // VIBRA,PAUSE,VIBRA
Vibration

3.  Has some device specific issues related to sensistivity
 Simple API ( no prefixes! ):
if( window.DeviceOrientationEvent ) { // if supported
window.addEventListener("deviceorientation",
handleOrientation, true);
function handleOrientation(event) {
var absolute = event.absolute; // Space check
var alpha = event.alpha; // roll/z axis
var beta = event.beta; // pitch/x axis
var gamma = event.gamma; // yaw/y axis
}
}
Tilt

4.  Works on major desktop browsers & Chrome mobile
 Lots of code!
enterFullscreen: function()
{
var element = document.documentElement; // this goes fullscreen
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen){
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
Fullscreen

5. exitFullscreen: function()
{
var element = document.documentElement; // this goes fullscreen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Fullscreen

6. isFullscreen: function()
{
return document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
}
// Button event handler, for example:
toggleFullscreen: function()
{
if( this.isFullscreen() )
this.exitFullscreen();
else
this.enterFullscreen();
}
Fullscreen

7. Questions?
Contact me:
david.goemans@boostermedia.com
@dgoemans
Thanks!