Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to make a gravity-sensing ball in HTML5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to make a gravity-sensing ball in HTML5" article.

Gravity sensor is a very common sensor built into mobile devices such as smartphones, and its basic function is to obtain the center of gravity of mobile devices. When the mobile device tilts or flips, the center of gravity changes, and the gravity sensor will truthfully record the process of the center of gravity change and reflect it through the data.

Due to security problems, browsers may turn off some configurations by default, so readers need to enter opera:config from the address bar of Oppon browser and enter to find the relevant parameters they need and adjust them.

If you find that the value sent by deviceorientation cannot be detected during the test, it may be because the support for deviceorientation is turned off, then you can try typing opera:config in the address bar, enter enter, then find the Orientation option and check it.

1. Learn about gravity sensors

Sensor is a very important device in the development of mobile Internet Web App, which involves many application concepts. In HTML5's Device API, the DeviceOrientation event specification provides three DOM events: deviceorientation, compassneedscalibration, and devicemotion. This section focuses on deviceorientation.

The DeviceOrientation specification defines that three values are returned: alpha, beta, and gamma, as shown in the following code:

Window.addEventListener ("deviceorientation", function (event) {

/ / return values event.alpha, event.beta, event.gamma

}, true)

When the device is placed horizontally on the desktop, its event returns the following value:

{alpha: 90

Beta: 0

Gamma: 0}

In this case, the orientation value of the device should be 360-alpha (when the device is flipped, the orientation operation is based on this formula)

When the rotation of the device turns into a rotation centered on the x-axis, the event returns the following values:

{alpha: 90

Beta: 90

Gamma: 0}

When the rotation of the device changes to rotate around the z axis, the alpha value changes.

When the rotation of the device changes to rotate around the y-axis, the gamma value changes.

When the accelerometer for Devicemotion events in the DeviceOrientation specification also allows gravity, it occurs:

{x: 0

Y: 0

Z: 9.81}

At this point, if the device is in freefall, its value should be:

{x: 0

Y: 0

Z:-9.81}

If the device is in a high-speed car, its value should be (this is a complex application, there is no good support at present

Interested readers can continue their in-depth study):

{acceleration: {x: v ^ 2 / r, y: 0, z: 0}

AccelerationIncludingGravity: {x: v ^ 2 / r, y: 0, z: 9.81}

RotationRate: {alpha: 0, beta: 0, gamma:-v/r*180/pi}}

two。 Gravity induction sphere exampl

In order to enable readers to better understand the gravity sensor and establish a perceptual understanding, we show the development process and skills of the gravity sensor through the example of a gravity induction ball.

The code for the gravity sensor example is as follows:

Gravity induction sphere

Turn off the prompt

Function hiddeDiv (id) {

Document.getElementById ('helpme'). Style.display='none'

}

Function showhelp () {

Document.getElementById ('helpme') .style.display =''

}

Var cur_x = 0

Var cur_y = 0

Var ball_radius = 50; / / the radius of the ball, used to determine whether it is close to the boundary or not, for collision detection

Var initialized = false; / / initialized value

Var ww

Var wh

Var speed_x = 0

Var speed_y = 0

Var accel_x

Var accel_y

Var friction_accel = 0.02; / / friction coefficient

Var interval = 33; / / milliseconds, approximately 30 frames per second

Var bg_color = "# EEEEEE"

Var fg_color = "# 333"

Var absorbing_rate = 0.5; / / ratio of elastic consumption

Var gunball=new Image ()

Gunball.src= "opera_ball.png"; / / the image of the instantiated ball

Var opera_pix_bg=new Image ()

Opera_pix_bg.src= "opera_pix_bg2.png"; / / instantiated background image

Function inSameDirection (a, b) {/ / direction judgment function

Return a > 0 & & b > 0 | | a

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.