DOOM과 같은 게임에서 영감을 받은 3D 3인칭 슈터 게임을 만드세요. 이 게임은 HTML5, CSS3, JavaScript (ES6+)를 사용하여 개발되며, 외부 프레임워크는 사용하지 않습니다.

기능
* 모든 CSS와 JavaScript가 포함된 완벽한 HTML 페이지.
* 오프라인 사용을 위한 Service Worker 등록과 매니페스트 파일 등 Progressive Web App (PWA) 기능 구현.
* 모바일과 데스크탑에서 모두 작동하는 반응형 레이아웃 디자인.
* 터치 컨트롤, 키보드 및 마우스 인터랙션 지원 보장.
* 사용자 경험을 향상시키기 위한 부드러운 애니메이션과 전환 효과 구현.

지시사항

게임 메커닉
- 사격: 플레이어가 조준하고 무기를 발사할 수 있어야 합니다. 총알 충돌 로직, 타깃 적중 판정 및 탄약 수 계산을 구현하세요.
- 이동: WASD 키 또는 모바일 터치 컨트롤을 사용하여 플레이어가 3차원 공간에서 이동할 수 있도록 하세요. 장애물 충돌 감지를 구현하여 장애물을 통과하지 않도록 합니다.
- 점프: 장애물이나 틈을 넘을 수 있도록 점프 기능을 포함하세요.

사용자 인터페이스
- 체력바: 플레이어의 체력을 실시간으로 업데이트하는 시각적 표시를 제공합니다.
- 탄약 수: 소모될 때마다 업데이트되는 남은 탄약 수를 보여주세요.
- 미니맵: 게임 아레나에서 플레이어가 길을 찾을 수 있도록 작은 지도를 포함하세요.

코드 및 아키텍처
- 기능과 흐름을 설명하는 주석을 코드에 상세히 작성하세요.
- 렌더링, 로직, 사용자 입력 처리를 명확히 분리하는 구조적인 아키텍처를 사용하세요.

PWA 요소
- 오프라인 플레이를 위해 Service Worker가 캐시를 관리하도록 합니다.
- 아이콘과 앱 이름 등 PWA의 메타데이터를 명시한 매니페스트 파일을 포함하여 기기에 설치할 수 있도록 합니다.

사용자 상호작용과 게임 느낌에 중점을 두어, 이 지시사항은 몰입감 있고 기술적으로 탄탄한 3인칭 슈터 게임을 만드는 것을 목표로 합니다.

# ACDQ PROMPT: создай 3D шутер от третьего лица вроде DOOM

## Требования к игре (ACDQ формат):
1. Полная HTML страница с встроенными CSS и JavaScript.
2. Реализуйте игру на HTML5, CSS3 и JavaScript (ES6+), без внешних фреймворков.
3. Интегрируйте PWA функциональность: регистрация Service Worker и наличие манифеста для офлайн работы.
4. Адаптивный дизайн для мобильных и настольных устройств.
5. Поддержка сенсорного управления, клавиатуры и мыши.
6. Плавные анимации и переходы для улучшения UX.
7. Подробно прокомментируйте код и опишите архитектуру приложения.

## Структура ответа:
1. Предоставьте полный HTML файл, готовый к запуску.
2. Включите все стили и скрипты непосредственно в HTML.
3. Документируйте основные функции и логику игры.
4. Обеспечьте наличие PWA элементов (Service Worker, манифест).

Q: What are the main mechanics of the game?
A: For example, shooting, jumping, and moving.

Q: What are the key elements you want in the game's UI?
A: For example, health bars, ammo count, or mini-maps.