디바이스 방향 감지

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) {
  const absolute = event.absolute;
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;

  // 방향 데이터로 사용자 작업 수행
}

<div class="garden">
  <div class="ball"></div>
</div>
디바이스를 바닥에 놓고 XY축을 따라 회전하면 공이 각각 상하좌우로 움직입니다.
<pre class="output"></pre>

.garden {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

const ball = document.querySelector(".ball");
const garden = document.querySelector(".garden");
const output = document.querySelector(".output");

const maxX = garden.clientWidth - ball.clientWidth;
const maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  let x = event.beta; // 각도의 범위는 [-180,180)
  let y = event.gamma; // 각도의 범위는 [-90,90)

  output.textContent = `beta: ${x}\n`;
  output.textContent += `gamma: ${y}\n`;

  // 장치를 반대로 인지하지 않게 하기 위해
  // X 값을 다음과 같이 제한합니다. [-90,90]
  if (x > 90) {
    x = 90;
  }
  if (x < -90) {
    x = -90;
  }

  // 계산을 편하게 하기 위해 다음과 같이 범위를 조정합니다.
  // x와 y는 [0,180]
  x += 90;
  y += 90;

  // 10은 공의 절반 크기입니다.
  // 공의 지점을 중앙으로 이동하기 위합입니다.
  ball.style.left = `${(maxY * y) / 180 - 10}px`; // y축을 중심으로 회전하면 공은 수평 방향으로 이동합니다.
  ball.style.top = `${(maxX * x) / 180 - 10}px`; // x축을 중심으로 회전하면 공은 수직 방향으로 이동합니다.
}

window.addEventListener("deviceorientation", handleOrientation);

window.addEventListener("devicemotion", handleMotion, true);