0 Favourites

HTML acelerometer

  • Hi,

    I am converting for HTML5, with C2, a game I did with Corona for IOS/Android. But I used the acelerometer to control the character. I found two samples of HTML pages with scripts which use the acelerometer, but how I am a beginner with HTML code, I ask if somebody can see it and forward me how could I use the returned x and y variables in C2.

    Blog Topic

    Link 1

    P.S: You can see the code behind the pages with ctrl+U in Chrome, even if it can not work in your device. Anyway I am attaching the second code, the simplest one, below.

    <!DOCTYPE html>  
     <html>  
     <head>  
     <title>Mobile Safari HTML5 Accelerometer Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
     <meta name="viewport" content="width=device-width,user-scalable=no" />  
     
     
     <style>  
     body { 
     background-color: black; 
     color: white; 
     font-family: Helvetica, Verdana, Sans Serif; 
     font-size: 10px; 
     } 
      
     #no { 
     display: none;  
     } 
      
     #ball { 
     width: 20px; 
     height: 20px; 
     border-radius: 10px; 
    [ul]
    	[li]webkit-radius: 10px;[/li]
    [/ul] background-color: red; 
     position:absolute; 
     top: 0px; 
     left: 0px; 
     } 
     </style>  
     
     
     <script>  
     // Position Variables 
     var x = 0; 
     var y = 0; 
      
     // Speed - Velocity 
     var vx = 0; 
     var vy = 0; 
      
     // Acceleration 
     var ax = 0; 
     var ay = 0; 
      
     var delay = 10; 
     var vMultiplier = 0.01; 
      
     window.onload = function() { 
     if (window.DeviceMotionEvent==undefined) { 
     document.getElementById("no").style.display="block"; 
     document.getElementById("yes").style.display="none"; 
      
     } else { 
     window.ondevicemotion = function(event) { 
      
     ax = event.accelerationIncludingGravity.x; 
     ay = event.accelerationIncludingGravity.y; 
     } 
      
     setInterval(function() { 
     vy = vy + -(ay); 
     vx = vx + ax; 
      
     var ball = document.getElementById("ball"); 
     y = parseInt(y + vy * vMultiplier); 
     x = parseInt(x + vx * vMultiplier); 
      
     if (x<0) { x = 0; vx = 0; } 
     if (y<0) { y = 0; vy = 0; } 
     if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = 0; } 
     if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = 0; } 
      
     ball.style.top = y + "px"; 
     ball.style.left = x + "px"; 
     document.getElementById("pos").innerHTML = "x=" + x + "<br />y=" + y; 
     }, delay); 
     }  
     }; 
     </script>  
     
     
     </head>  
      
     <body>  
     <div id="content">  
     <h1>Move the Ball</h1>  
     <div id="yes">  
     <p>Tilt your device to move the ball. This sample is using Device Orientation and Motion API compatible with iOS since 4.2</p>  
     <p>Mantain your device in portrait orientation for better results (you can lock it)</p>  
     <div id="pos">x=0<br />y=0</div> 
     <div id="ball"></div>  
     </div>  
     <div id="no">  
     Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.  
     </div>  
     </div>  
     </body>  
     </html>  
    
  • Quick response (I only have 2 minutes right now) : you can put the javascript to access the acceleromter in its own function, inside the exported index.html. Then you can use the CallJS plugin to call that function, and update the various items you are drawing with the information from the accelerometer.

  • The Touch object has expressions to access the accelerometer!

  • Thanks Pole and Ashley, I will try here.

  • Yeah Ashley, works like a charm, excuse my fault in not read ALL the functions.

  • Ashley: My bad ! Why do it the easy way when you can do it the hard way ? ;) (I didn't saw the accelerometer in that object before, by lack of use for it for the moment...)

  • Yeah Ashley, works like a charm, excuse my fault in not read ALL the functions.

    can you post a QR Code for the motion controlled app you made, can we see the source code, what phone?, did you convert it to an app using phonegap?

  • Here is my sample gyro motion.capx

    Isn't perfect but it works to make motion using left and right, i tsted it on iPod 4 touch

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Hi All,

    I have just started experimenting with Touch.beta and gamma. I couldn't get it working with PhoneGap properly using cordova-1.7.0rc1.   It just crashed when you tilt the phone but I did get it working through AppMobi.

  • simwhi there's a known bug where minifying your exported project and running on PhoneGap causes accelerometer to break. It should be fixed in the next build.

  • Ashley. Thanks for the information. I'll try it out.

    EDIT: I got it working using PhoneGap 1.7.0rc1 but it still crashes when you tilt the phone too much.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
[Plugins] Pode HTML Pack
305 99,155
Lordshiva1948's avatar
Lordshiva1948
Unread hot topic
0 Favourites
[PLUGIN] HTML | iFrame
299 36,321
Nandynho's avatar
Nandynho
Unread hot topic
101 37,410
imothep85's avatar
imothep85