CINXE.COM
Control a game on your browser with an iOS / Android device. HTML5 demo by Webdigi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://node13.webdigi.co.uk:8010/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://node13.webdigi.co.uk:8010'); var dataStart=0; socket.on('spaceChanges', function (data) { if(dataStart == 0){ dataStart = 1; document.getElementById("statusMessage").innerHTML = 'Status: Great! Data received from your iOS device. Starting the game in 2 seconds..'; document.getElementById("statusMessage").style.color = 'green'; setTimeout('window.location = "http://www.webdigi.co.uk/fun/space/space.php?id=222239";',2100); } }); socket.on('disconnect', function() { //console.log('disconnected'); }); //socket.emit('setChannel', {'channelName': '222239'}); socket.on('connect', function() { socket.emit('setChannel', {'channelName': '222239'}); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Control a game on your browser with an iOS / Android device. HTML5 demo by Webdigi</title> <link href="include/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "735c8735-1444-4bfb-9789-340b449acdc9"}); </script> </head> <body> <div id="outer_wrapper"> <div id="wrapper"> <div id="header"> <div class="logo_sec"> <a href="#"><img src="include/logo.png" alt=""/></a> <p class="tag"><span>Tech demo with NodeJS, accelerometer, HTML5</p> </div> <div class="social_link"> <span class='st_facebook_vcount' displayText='Facebook'></span> <span class='st_twitter_vcount' displayText='Tweet'></span> <span class='st_linkedin_vcount' displayText='LinkedIn'></span> <span class='st_plusone_vcount' displayText='Google'></span> </div> </div> <div id="page"> <div class="instrution"> <div class="left_sec"> <h2 class="head">Instructions:</h2> <ul> <li> <span>1</span> <p>Scan the QR code with your Mobile/Tablet OR type the full URL address under the QR code into your Mobile/Tablet browser.</p> </li> <li> <span>2</span> <p>This page will load the game once your Mobile/Tablet pairing is complete.</p> <p>To play simply hold your Mobile or Tablet in portrait mode and tilt the device left and right to control the space ship.</p> <p>Have fun!</p> </li> </ul> </div> <div class="right_sec"> <div class="webdig_sec"> <div class="img_sec"> <a href="#"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=http://www.webdigi.co.uk/fun/space/ios.php?id=222239&chld=H|1" alt=""/></a> </div> <a href="#" style="font-size: 16px" class="link">http://webdigi.co.uk/222239</a> </div> <div class="webdig_btm"> <img src="include/mobile.png" alt=""/> </div> </div> </div> </div> <div id="footer"> <p id="statusMessage" class="status">Demo does not work on Internet Explorer. Please try Chrome / Firefox / Safari</p> <p class="developed"><a href="https://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/" target="_blank">Read technical details of this demo on our blog</a><br/>Webdigi - <a href="https://www.webdigi.co.uk/" target="_blank">Web development company in London</a></p> </div> </div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3659733-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>