아이들이 화면 앞에서 신체(손)를 움직이며 즐겁게 참여할 수 있는

'웹캠 기반 손 인식 게임'을 만들려고 해.

"구글 미디어 파이프 핸드 트래킹 API를 사용해서,

웹캠으로 손바닥을 인식해서

화면에 나오는 표적을 맞추는 3D 사격 게임을 만들어줘.

손 뼈대를 인식했는지 알 수 있게 손 뼈대를 시각화해줘.

그리고 기본 배경음악을 이 게임과 어울리게 만들어줘."

외부 이미지나 오디오 파일 없이, 코드로만 텍스처와 효과음을 생성하는 단일 HTML 파일(Single HTML File)로 전체 코드를 작성해 줘.

[게임 테마 설정]

1. 게임 이름: [게임 이름 입력, 예: 바다 쓰레기 청소 대작전]

2. 타겟 오브젝트: [오브젝트 설명, 예: 구겨진 종이컵, 플라스틱 병 모양의 2D 그림]

3. 오브젝트 색상/분위기: [예: 칙칙한 회색과 파란색 계열]

4. 배경음악 분위기: [예: 바닷속을 탐험하는 듯한 신비롭고 약간 빠른 템포의 음악]

5. 효과음(파괴 시): [예: 물방울이 팡! 하고 터지는 듯한 경쾌한 소리]

[핵심 기술 및 작동 방식]

- 라이브러리: Three.js(3D/2D 렌더링), Google MediaPipe Hands(손 인식), Web Audio API(사운드 합성)

- 화면 구성: 16:9 와이드 비율의 풀스크린(100vw, 100vh). 배경은 웹캠 화면이 그대로 보여야 함.

- 조작 방식: 복잡한 주먹 쥐기(Pinch) 제스처는 제외할 것. 사용자의 손(초록색 뼈대로 시각화)이 타겟 오브젝트와 겹치거나 '스치기만 해도' 즉시 파괴되도록 충돌 판정(Raycaster)을 구현할 것.

- 애니메이션: 타겟 오브젝트들은 한곳에 뭉치지 않고 화면 전체(좌, 우, 상, 하)에서 스폰되며, 불규칙하고 넓은 반경으로 둥둥 떠다녀야 함.

* **디바이스에 따라 화면이 최적화 될 수 있는 반응형 레이아웃을 구성해줘

[게임 흐름 (UI/UX)]

- 시작 화면: 게임 이름과 "손을 흔들어 [타겟 오브젝트]를 없애보세요!"라는 안내 문구, [게임 시작] 버튼 배치.

- 진행 화면: 좌측 상단에 '현재 점수', 중앙 상단에 '30초 타이머' 표시.

- 종료 화면: 30초가 지나면 화면 중앙에 "시간 종료! 최종 점수: OOO점" 텍스트와 함께 화려한 폭죽(Confetti) 효과와 승리 빵빠레 사운드 재생. 하단에 [처음으로 돌아가기] 버튼 배치.