Jump to content

Mobile 2d game


Recommended Posts




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 @@


Link to comment
Share on other sites

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?



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 by OadT
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...