자바스크립트로 자이로스코프 기능을 이용한 휴대폰 충돌 체크

nakanara 2024. 7. 10. 23:39

휴대폰 앱이 아닌 브라우저에서 범프와 유사한 기능이 필요하여 자바스크립트를 통한 충돌 체크하는 부분을 확인하였습니다.

모바일 기기에서 자이로스코프와 가속도계가 내장되어야만 체크가 가능합니다.

<!DOCTYPE html>
<html>
<head>
    <title>휴대폰 충돌 감지 예제</title>
</head>
<body>
    <h1>휴대폰 충돌 감지</h1>
    <p id="status">센서 데이터를 기다리는 중...</p>

    <script>
        if ('Accelerometer' in window) {
            // 가속도계 객체 생성
            let accelerometer = new Accelerometer({frequency: 60});

            accelerometer.addEventListener('reading', () => {
                let x = accelerometer.x;
                let y = accelerometer.y;
                let z = accelerometer.z;

                // 충돌 감지 로직
                if (Math.abs(x) > 15 || Math.abs(y) > 15 || Math.abs(z) > 15) {
                    document.getElementById('status').innerText = '충돌 감지됨!';
                    // 충돌 감지 시 수행할 작업 추가
                } else {
                    document.getElementById('status').innerText = `X: ${x.toFixed(2)}, Y: ${y.toFixed(2)}, Z: ${z.toFixed(2)}`;
                }
            });

            accelerometer.addEventListener('error', (event) => {
                document.getElementById('status').innerText = `가속도계 오류: ${event.error}`;
            });

            accelerometer.start();
        } else {
            document.getElementById('status').innerText = '가속도계를 지원하지 않는 기기입니다.';
        }
    </script>
</body>
</html>

저작자표시 (새창열림)