html5使用device orientation制作平衡球游戏 html5使用运动传感的案例-html教程-PHP中文网

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

星夢妙者

发布： 2025-10-27 10:01:03

原创

605人浏览过

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

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

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

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

我们主要关注：

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

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

立即学习“前端免费学习笔记（深入）”；

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

查看详情

HTML 结构

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

<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>

登录后复制

JavaScript 核心逻辑

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

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('您的设备不支持设备方向感应！'); }