Mobile 2d game

[melnet]

Hello,

 

http://www.youtube.com/watch?v=AXEbjVX-vJk

any example or document for me to reference?

 

i just found one http://www.html5rocks.com/en/tutorials/device/orientation/

 

but i just tried to code:

<div class="main">      <h2>Device Orientation</h2>      <table>        <tbody><tr>          <td>Event Supported</td>          <td id="doEvent">DeviceOrientation</td>        </tr>        <tr>          <td>Tilt Left/Right [gamma]</td>          <td id="doTiltLR">0</td>        </tr>        <tr>          <td>Tilt Front/Back [beta]</td>          <td id="doTiltFB">0</td>        </tr>        <tr>          <td>Direction [alpha]</td>          <td id="doDirection">0</td>        </tr>      </tbody></table>  </div>       <img src="./deviceorientationsample_files/html5_logo.png" id="imgLogo" style="position: absolute;">     <script type="text/javascript">    init();    var count = 0;        function init() {      if (window.DeviceOrientationEvent) {        document.getElementById("doEvent").innerHTML = "DeviceOrientation";        // Listen for the deviceorientation event and handle the raw data        window.addEventListener('deviceorientation', function(eventData) {          // gamma is the left-to-right tilt in degrees, where right is positive          var tiltLR = eventData.gamma;                    // beta is the front-to-back tilt in degrees, where front is positive          var tiltFB = eventData.beta;                    // alpha is the compass direction the device is facing in degrees          var dir = eventData.alpha                    // call our orientation event handler          deviceOrientationHandler(tiltLR, tiltFB, dir);          }, false);      } else {        document.getElementById("doEvent").innerHTML = "Not supported on your device or browser.  Sorry."      }    }      function deviceOrientationHandler(tiltLR, tiltFB, dir) {      document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);      document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);      document.getElementById("doDirection").innerHTML = Math.round(dir);            // Apply the transform to the image      /*var logo = document.getElementById("imgLogo");      logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";      logo.style.MozTransform = "rotate("+ tiltLR +"deg)";      logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";*/    }            // Some other fun rotations to try...    //var rotation = "rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";    //var rotation = "rotate("+ tiltLR +"deg) rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";	$( "#imgLogo" ).animate({ "left": "+="+tiltLR+"px" }, "slow" );  </script>

but the code doesn't work

 

anyone any suggestion for me?

 

Thanks for help @@

 

[OadT]

The code at html5rocks.com works fine by me, did you test the code at this side: http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html

 

what phone did you use?

 

Edit:

I think I found the mistake: the last line of the script should be in the function deviceOrientationHandler

I hope it helps, I currently couldn't test the code

Edited January 7, 2014 by OadT