Simple game to show how to use the Device Orientation API.
JavaScript CSS

Rolling ball

Rolling Ball is a simple game in which you move a ball through a labyrinth in order to make it fall into a hole and get access to the next level.


Try it live:

  • keyboard control: use arrows to make the ball roll, and space to make it jump
  • device motion control: change the orientation of your mobile device to make the ball roll, and move it up to make the ball jump

This demo is part of the following article on Mozilla Developer Network:


The web app makes use of canvas to draw graphics and the Device Orientation API to move the ball. More info inside the MDN article.


  • open github issues
  • add tests
  • levels
  • better look&feel
  • better playability
  • lock screen to landscape
  • make the ball roll via deviceorientation event
  • DOM-based version, instead of canvas-based