Samouczek JS: Wykrywanie Potrząśnięcia

Aby wykryć potrząśnięcie, używamy API przeglądarki devicemotion. Ten samouczek omawia matematykę, wymagania dotyczące uprawnień iOS oraz ostateczną implementację.

Krok 1: Matematyka (Pomiar Siły G)

Akcelerometr dostarcza wartości dla osi X, Y i Z. Aby wykryć potrząśnięcie niezależnie od orientacji telefonu, obliczamy całkowitą wielkość wektora przyspieszenia.

Używamy accelerationIncludingGravity. Nieruchomy telefon ma wielkość około 9.8 (grawitacja ziemska). Potrząśnięcie zwykle powoduje skok powyżej 15 lub 20.

Krok 2: Obsługa uprawnień w iOS 13+

Nowoczesne iPhone'y wymagają od użytkownika ręcznego udzielenia zgody na użycie czujników ruchu. Nie można po prostu zacząć nasłuchiwać; trzeba wywołać żądanie poprzez interakcję użytkownika, np. kliknięcie przycisku.

function requestPermission() {
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    DeviceMotionEvent.requestPermission()
      .then(response => {
        if (response == 'granted') {
          window.addEventListener('devicemotion', handleMotion);
        }
      })
      .catch(console.error);
  } else {
    // Urządzenia inne niż iOS nie wymagają uprawnień
    window.addEventListener('devicemotion', handleMotion);
  }
}

Krok 3: Logika Potrząśnięcia

Dodajemy licznik "Debounce" (odbicia). Bez tego jedno fizyczne potrząśnięcie mogłoby uruchomić kod 50 razy w ciągu sekundy. Zmuszamy kod do odczekania (np. 1000ms) przed wykryciem kolejnego potrząśnięcia.

let lastShake = 0;
const MIN_INTERVAL = 1000; // Czekaj 1 sek. między potrząśnięciami

function handleMotion(event) {
  const acc = event.accelerationIncludingGravity;
  if (!acc) return;

  // Oblicz Wielkość (Magnitudę)
  const total = Math.sqrt(acc.x**2 + acc.y**2 + acc.z**2);

  // Próg 15 jest dobrym punktem wyjścia
  if (total > 15) {
    const now = Date.now();
    if (now - lastShake > MIN_INTERVAL) {
      lastShake = now;
      alert("Wykryto potrząśnięcie!"); 
    }
  }
}

Demo na żywo

Przetestuj kod tutaj. Jeśli jesteś na urządzeniu mobilnym, kliknij przycisk poniżej i potrząśnij telefonem.