반응형
휴대폰 앱이 아닌 브라우저에서 범프와 유사한 기능이 필요하여 자바스크립트를 통한 충돌 체크하는 부분을 확인하였습니다.
모바일 기기에서 자이로스코프와 가속도계가 내장되어야만 체크가 가능합니다.
<!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>반응형
'FullStack > 11. JavaScript' 카테고리의 다른 글
| IOS 13이후 아이패드와 Mac 구분 방법 (0) | 2024.06.17 |
|---|---|
| 자바스크립트 이벤트 디버깅 방법 (0) | 2023.03.08 |
| 팝업창 닫힘 onunload가 아닌 스크립트로 체크하기 (0) | 2022.08.03 |
| [JS] 날짜 포맷 만들기 (0) | 2021.04.20 |
| 내부변수를 이용하여 한번 실행 (0) | 2020.01.28 |
