Updating a display object position through accelerometer events

Developers can make use of the accelerometer sensor and continual updates provided by it for many purposes, including motion-detection games and updating the position of an object on the screen.

How to do it…

We will use the device's accelerometer sensor on continual update to move an element around the screen as a response to device movement:

1. First, create a new PhoneGap project named accelobject by running the following command:

   phonegap create accelobject com.myapp.accelobject accelobject
   

2. Add the device platform. You can choose to use Android, iOS, or both:

   cordova platform add ios
   cordova platform add android
   

3. Add the device motion plugin by running the following command:

   phonegap plugin add org.apache.cordova.device-motion
   

4. Open www/index.html and clean up unnecessary elements. Within the body tag create two div elements. Set the first with the id attribute equal to dot. This will be the element that will move around...