html5使用device orientation制作平衡球游戏 html5使用运动传感的案例

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html5使用device orientation制作平衡球游戏 html5使用运动传感的案例

2025-10-27

浏览次数：次

返回列表

html5使用device orientation制作平衡球游戏 html5使用运动传感的案例

在现代移动设备上，HTML5 提供了 DeviceOrientation 和 DeviceMotion 事件，可以用来获取手机或平板的物理方向和加速度数据。利用这些能力，我们可以制作一个简单的“平衡球”游戏：通过倾斜设备来控制页面上小球的移动，让它在不掉落的情况下保持平衡。

实现原理：DeviceOrientation 与重力加速度

虽然 deviceorientation 提供的是设备相对于地球坐标系的朝向（如 alpha、beta、gamma），但更适用于平衡球游戏的是 devicemotion 事件中的加速度数据，尤其是包含重力影响的 accelerationIncludingGr*ity。

我们主要关注：

gamma：左右倾斜（绕 X 轴旋转），范围约 -90° 到 90°，对应设备左高右低或反之
beta：前后倾斜（绕 Y 轴旋转），设备前高后低或反之

这两个值可以直接映射为小球在二维平面上的水平与垂直方向的移动速度。

HTML 结构

创建一个容器作为“平台”，里面放一个小球：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

<div id="platform">
  <div id="ball"></div>
</div>

CSS 样式

设置平台边界和小球样式，确保小球不会移出可视区域：

#platform {
  width: 300px;
  height: 300px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
  background-color: #f0f0f0;
  overflow: hidden;
}
<h1>ball {</h1><p>width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 140px;
top: 140px;
}</p>

J*aScript 核心逻辑

监听设备方向变化，动态更新小球位置：

let ball = document.getElementById('ball');
let platform = document.getElementById('platform');
<p>let ballX = 140;
let ballY = 140;</p><p>const platformWidth = 300;
const platformHeight = 300;
const ballSize = 20;</p><p>// 检查是否支持 DeviceOrientation
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
// gamma：左右倾斜 (-90 ~ 90)
// beta：前后倾斜 (-180 ~ 180)
const gamma = event.gamma; // 左负右正
const beta = event.beta;   // 前正后负</p><pre class='brush:php;toolbar:false;'>// 将倾斜角度转换为移动速度
const speedFactor = 5;
const dx = gamma * speedFactor / 90;
const dy = beta * speedFactor / 180;

// 更新小球位置
ballX += dx;
ballY += dy;

// 边界检测：防止小球移出平台
ballX = Math.max(0, Math.min(platformWidth - ballSize, ballX));
ballY = Math.max(0, Math.min(platformHeight - ballSize, ballY));

// 应用新位置
ball.style.left = ballX + 'px';
ball.style.top = ballY + 'px';

}); } else { alert('您的设备不支持设备方向感应！'); }