在现代移动设备上，HTML5 提供了 DeviceOrientation 和 DeviceMotion 事件，可以用来获取手机或平板的物理方向和加速度数据。利用这些能力，我们可以制作一个简单的“平衡球”游戏：通过倾斜设备来控制页面上小球的移动，让它在不掉落的情况下保持平衡。
实现原理：DeviceOrientation 与重力加速度
虽然 red">deviceorientation 提供的是设备相对于地球坐标系的朝向（如 alpha、beta、gamma），但更适用于平衡球游戏的是 devicemotion 事件中的加速度数据，尤其是包含重力影响的 accelerationIncludingGravity。
我们主要关注：
- gamma：左右倾斜（绕 X 轴旋转），范围约 -90° 到 90°，对应设备左高右低或反之
- beta：前后倾斜（绕 Y 轴旋转），设备前高后低或反之
这两个值可以直接映射为小球在二维平面上的水平与垂直方向的移动速度。
立即学习“前端免费学习笔记（深入）”；
HTML 结构
创建一个容器作为“平台”，里面放一个小球：
CSS 样式
设置平台边界和小球样式，确保小球不会移出可视区域：
#platform {
width: 300px;
height: 300px;
border: 2px solid #333;
position: relative;
margin: 50px auto;
background-color: #f0f0f0;
overflow: hidden;
}
ball {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 140px;
top: 140px;
}
JavaScript 核心逻辑
监听设备方向变化，动态更新小球位置：
let ball = document.getElementById('ball');
let platform = document.getElementById('platform');
let ballX = 140;
let ballY = 140;
const platformWidth = 300;
const platformHeight = 300;
const ballSize = 20;
// 检查是否支持 DeviceOrientation
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
// gamma：左右倾斜 (-90 ~ 90)
// beta：前后倾斜 (-180 ~ 180)
const gamma = event.gamma; // 左负右正
const beta = event.beta; // 前正后负
// 将倾斜角度转换为移动速度
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('您的设备不支持设备方向感应！');
}
增强体验建议
- 加入“目标点”或“迷宫路径”，让玩家引导小球到达指定位置
- 使用 requestAnimationFrame 优化动画流畅度
- 添加震动反馈（Navigator.vibrate）当小球触边
- 适配横屏模式，提升游戏视角体验
- 加入计时器或掉落判定（比如超出边缘一定距离算失败）
基本上就这些。这个案例展示了 HTML5 如何结合设备传感器打造交互式游戏体验，无需额外插件，只需浏览器支持即可运行在大多数智能手机上。只要用户允许访问传感器，就能实现类似原生应用的体感操作效果。
