PWA移动端应用摇手机触发随机选分类的JavaScript函数求助

问题原因 #

你之前用到的shake.js、devicemotion/deviceorientation事件以及旧的Accelerometer用法被标记为废弃，核心原因是浏览器出于隐私合规和API标准化考量，推荐使用标准Sensor API的现代实现，同时需要明确的用户权限授权。

解决方案 #

以下是基于LinearAccelerationSensor的实现方案——该传感器会自动排除重力干扰，更精准检测摇晃动作，且符合现代浏览器的标准规范：

1. 权限请求与传感器初始化

先完成传感器权限申请与基础检测逻辑搭建：

// 全局变量：控制摇晃触发防抖，避免连续触发
let isShaking = false;
// 摇晃阈值：可根据设备灵敏度调整，单位m/s²
const SHAKE_THRESHOLD = 15;
// 防抖冷却时间：摇晃触发后锁定一段时间
const DEBOUNCE_TIME = 1500;

async function initShakeDetection() {
  try {
    // 请求加速度传感器权限
    await navigator.permissions.query({ name: 'accelerometer' });
    
    // 初始化线性加速度传感器，每秒读取60次数据
    const sensor = new LinearAccelerationSensor({ frequency: 60 });
    
    sensor.addEventListener('reading', () => {
      // 计算三维加速度的合值（排除重力后的实际运动加速度）
      const totalAcceleration = Math.sqrt(
        Math.pow(sensor.x, 2) +
        Math.pow(sensor.y, 2) +
        Math.pow(sensor.z, 2)
      );
      
      // 检测摇晃动作并触发逻辑
      if (totalAcceleration > SHAKE_THRESHOLD && !isShaking) {
        isShaking = true;
        handleShakeTrigger();
        // 防抖解锁
        setTimeout(() => isShaking = false, DEBOUNCE_TIME);
      }
    });
    
    sensor.addEventListener('error', (err) => {
      console.error('传感器异常:', err.message);
    });
    
    // 启动传感器
    sensor.start();
  } catch (err) {
    console.error('无法初始化摇晃检测:', err.message);
    // 降级处理：给不支持传感器的设备提供提示
    alert('当前设备不支持摇晃检测，请使用按钮选择分类');
  }
}

2. 摇晃触发后的核心逻辑

实现随机选分类并触发对应随机化函数：

function handleShakeTrigger() {
  // 从分类列表中随机选一项
  const randomCatIndex = Math.floor(Math.random() * categoriesList.length);
  const selectedCategory = categoriesList[randomCatIndex];
  
  // 执行和分类按钮点击一致的逻辑
  getRandomWord();
  if (newGameModal.classList.contains('show')) {
    newGameModal.classList.remove('show');
  }
  
  // 可选：控制台输出选中分类，便于调试
  console.log('摇晃触发，选中分类:', selectedCategory.name);
}

3. 整合到现有代码

在应用初始化阶段调用摇晃检测初始化：

// 页面加载完成后启动所有逻辑
window.addEventListener('load', () => {
  initShakeDetection();
  generateCategoryButtons();
});

关键注意事项 #

• 安全上下文要求：传感器API仅在HTTPS环境或localhost中可用，PWA必须部署在HTTPS下才能正常工作。
• 权限兼容：部分浏览器会自动授权传感器权限，部分则需要用户手动允许，建议在应用中添加对应的权限引导说明。
• 参数调整：SHAKE_THRESHOLD可根据设备灵敏度微调，数值越大，需要的摇晃力度越强。
• 降级兼容：始终为不支持传感器的设备保留按钮触发路径，保证功能可用性。

你的现有generateCategoryButtons函数无需修改，摇晃触发逻辑和按钮点击逻辑保持一致，确保用户体验统一。

内容的提问来源于stack exchange，提问作者zero_idea