html5: fullscreen, tilt and vivration
DESCRIPTION
Using some underutilized Html5 APIs to make your games stand out!TRANSCRIPT
Using Tilt, Vibration and Fullscreen
HTML5 Device APIs
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); // TIMEnavigator.vibrate([30,20,50]); // VIBRA,PAUSE,VIBRA
Vibration
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
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
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
isFullscreen: function(){
return document.fullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement ||document.msFullscreenElement;
}
// Button event handler, for example:toggleFullscreen: function(){
if( this.isFullscreen() ) this.exitFullscreen();
elsethis.enterFullscreen();
}
Fullscreen
