DeviceMotionEventAcceleration.x — Eigenschaft · JavaScript-Referenz

Signatur

DeviceMotionEventAcceleration.x

Beschreibung

Die Eigenschaft x eines DeviceMotionEventAcceleration-Objekts liefert die Beschleunigung entlang der X-Achse des Geräts in Metern pro Quadratsekunde (m/s²). Die X-Achse verläuft bei einem Smartphone in Hochformat-Grundhaltung waagerecht von links nach rechts über das Display; positive Werte bedeuten eine Beschleunigung nach rechts.

Man erhält das Objekt über ein devicemotion-Ereignis, und zwar in zwei Varianten: event.acceleration enthält die Beschleunigung ohne Erdanziehung (benötigt ein Gyroskop bzw. Sensorfusion), event.accelerationIncludingGravity enthält sie inklusive Erdanziehung. Liegt das Gerät flach auf dem Tisch, ist accelerationIncludingGravity.x ungefähr 0; kippt man es seitlich, wandert ein Teil der Erdbeschleunigung (≈ 9,81 m/s²) auf die X-Achse.

Typische Einsatzzwecke sind Schüttel-Erkennung, Neigungssteuerung in Browserspielen, Schrittzähler-Prototypen oder Wasserwaagen-Apps. Da die Eigenschaft schreibgeschützt ist, lässt sie sich nur auslesen; eigene Objekte dieser Art kann man nicht direkt konstruieren.

Rückgabewert

Typ

number | null

Beschreibung

Beschleunigung entlang der X-Achse in m/s² als Gleitkommazahl, oder null, wenn das Gerät bzw. der Browser keinen Wert liefern kann.

Beispiele

X-Beschleunigung per addEventListener auslesen

const handleMotion = (event) => {
  const x = event.accelerationIncludingGravity?.x;
  if (x == null) {
    console.log('Kein X-Wert verfügbar');
    return;
  }
  console.log(`X-Beschleunigung: ${x.toFixed(2)} m/s²`);
};

if ('DeviceMotionEvent' in window) {
  window.addEventListener('devicemotion', handleMotion);
} else {
  console.log('DeviceMotionEvent wird nicht unterstützt');
}

X-Beschleunigung: -1.37 m/s²

Berechtigung unter iOS Safari anfragen

const button = document.querySelector('#sensor-start');

button.addEventListener('click', async () => {
  // iOS 13+ verlangt eine Erlaubnis nach Nutzerinteraktion
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    const state = await DeviceMotionEvent.requestPermission();
    if (state !== 'granted') {
      console.log('Zugriff verweigert');
      return;
    }
  }
  window.addEventListener('devicemotion', (e) => {
    console.log('x ohne Gravitation:', e.acceleration?.x);
  });
});

x ohne Gravitation: 0.042

Seitliches Schütteln erkennen

const THRESHOLD = 15; // m/s²
let lastShake = 0;

const onMotion = ({ accelerationIncludingGravity: acc }) => {
  const x = acc?.x ?? 0;
  const now = Date.now();
  if (Math.abs(x) > THRESHOLD && now - lastShake > 1000) {
    lastShake = now;
    console.log('Seitliches Schütteln erkannt!');
  }
};

window.addEventListener('devicemotion', onMotion);

// Nach 30 Sekunden wieder abmelden, um Akku zu sparen
setTimeout(() => {
  window.removeEventListener('devicemotion', onMotion);
  console.log('Sensor-Überwachung beendet');
}, 30_000);

Seitliches Schütteln erkannt! Sensor-Überwachung beendet

Neigung glätten für eine Spielsteuerung (on-Property)

let smoothX = 0;
const ALPHA = 0.2; // Tiefpass-Faktor

window.ondevicemotion = (event) => {
  const raw = event.accelerationIncludingGravity?.x;
  if (raw == null) return;
  smoothX = ALPHA * raw + (1 - ALPHA) * smoothX;
  const player = document.querySelector('#player');
  // Bewegung nach links/rechts proportional zur Neigung
  player.style.transform = `translateX(${(smoothX * 10).toFixed(0)}px)`;
};

// Wichtig · Fallstricke

Kann null sein: Desktop-Browser ohne Sensor oder Geräte ohne Gyroskop liefern für acceleration.x oft null. Immer mit ?. und == null absichern; accelerationIncludingGravity ist häufiger verfügbar.
Sicherer Kontext: Das Ereignis wird nur über HTTPS (oder localhost) ausgelöst. In iframes ist ggf. die Permissions-Policy accelerometer nötig.
iOS Safari: Seit iOS 13 muss DeviceMotionEvent.requestPermission() innerhalb einer Nutzeraktion (z. B. Klick) aufgerufen werden, sonst kommen keine Ereignisse an.
Achsenrichtung: Die Achsen beziehen sich auf das Gerät, nicht auf den Bildschirm – bei Querformat vertauschen sich X und Y aus Sicht des Nutzers. Ggf. screen.orientation.angle berücksichtigen.
Vorzeichen-Unterschiede: Ältere Android-/iOS-Versionen lieferten bei accelerationIncludingGravity teils umgekehrte Vorzeichen; auf echten Geräten testen.
Performance & Datenschutz: Das Ereignis feuert sehr häufig (typisch 60 Hz). Aufwendige Logik drosseln und den Listener entfernen, wenn er nicht mehr gebraucht wird. Bewegungsdaten können zum Fingerprinting genutzt werden; Browser reduzieren daher teils die Präzision.

Siehe auch

DeviceMotionEventAcceleration.y DeviceMotionEventAcceleration.z DeviceMotionEvent.acceleration DeviceMotionEvent.rotationRate DeviceMotionEvent.interval