DETECT IOS DEVICE TILT DIRECTION USING HTML5 + JAVASCRIPT

When building game for IOS device using HTML5 we may need to detect the IOS device tilt direction to move the Car, Space ship or any Object in same direction. There are lots and lots of user interactive games or apps can be done with this. In this article we have shared the code which makes it possible to tilt programming objects to react with user action of tilting the IOS device.

Note: Please note that the code works only in IOS browser. 

Will not work on the HTML5 enabled browser in desktop.

Read the article about IOS device orientation detection using HTML5 Difficulty: Intermediate developers Tools & Programming Used:

• HTML5
• Javascript
• IOS Device for Checking

IOS device tilt detection using HTML5 and Javascript:

Below code checks the IOS device tilt direction on both portrait and landscape mode of the device. Periodic checking of the device orientation or tilt was done using javascript timer function. Javascript also updates the direction, orientation and number of tilt in the HTML.

Entire Code for IOS device tilt detection:

//Code below checks the device direction and orientation and triggers the movement of gallery

	var status = 0;
	var count = 0;
	var checkTimer;

	if (window.DeviceMotionEvent==undefined) {
		 alert("Not supported on your device or browser.  Sorry.");
	}
	else
	{
		checkTimer = setInterval(function(){checkDirection()},2000);

		window.ondevicemotion = function(event) {

			 ax = event.accelerationIncludingGravity.x * 5;
			 ay = event.accelerationIncludingGravity.y * 5;

			 var landscapeOrientation = window.innerWidth / window.innerHeight > 1;

			 if (landscapeOrientation)
			 {
				document.getElementById("orientationLabel").innerHTML = "Landscape";
				getDirection(ay, true);
			 }
			 else
			 {
				document.getElementById("orientationLabel").innerHTML = "Portrait";
				getDirection(ax, true);
			 }

		}
	}

	//True = called from device Event | False called for repeat action
	function getDirection( dir )
	{
		if(status == 0){ //initial condition
		  status = 3; //stay
		  statusmsg = 'Tilt to Play Gallery';
		}
		if(dir > 10 && status != 2){ //move right on device
		  status = 2;
		  statusmsg = 'Right';
		}
		if(dir < -10 && status != 1){ //move left on device
		  status = 1;
		  statusmsg = 'Left';
		}
		if(dir > -10 && dir < 10 && status != 3){ //device held steady
		  status = 3;
		  statusmsg = 'Tilt to Play Gallery';
		  //If device idle make count zero
		  count = 0;
		  document.getElementById("directionLabel").innerHTML = statusmsg;
		}
	}

	function checkDirection( )
	{

		if(statusmsg == "Right")
		{
			count++;
			document.getElementById("directionLabel").innerHTML = statusmsg +" : "+count;

			Game._navigate('right');

		}else if(statusmsg == "Left")
		{

			count++;
			document.getElementById("directionLabel").innerHTML = statusmsg +" : "+count;	

			Game._navigate('left');

		}
	}

Code Explanation:

Initially check for device and HTML5 support

if (window.DeviceMotionEvent==undefined) {
		 alert("Not supported on your device or browser.  Sorry.");
	}
	else
	{
		//Device supports
	}

Checking the device orientation using javascript

We have discussed about the IOS device orientation detection here,

HTML for action display on screen:

<h2>Device Orientation with HTML5</h2>
Direction :<span id="directionLabel">Tilt to Play Game</span><br/>
Orientation :<span id="orientationLabel"></span>

Conclusion: We have seen simple code to detect IOS device tilt direction using Javascript+html5

Related posts:

1. Detect / get iPad device orientation using HTML5
2. Create HTML5 Canvas dynamically using javascript
3. InnerHtml is not working in FireFox and Safari.
4. Adding HTML5 Canvas Mouse Events using javascript
5. Open Html popup Window in as3 using JavaScript