브라우저 내 Counter-Strike 스타일 FPS 게임 개발 가이드 (Amazon Q 활용)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: 웹 개발자, 게임 개발 초보자, AI 도구 활용 희망자
- 난이도: 중간 (Three.js 기본 지식 필요, AI 도구 사용 경험 없이도 가능)
핵심 요약
Three.js와Vite를 사용한 브라우저 기반 3D FPS 게임 개발 가능Amazon Q를 활용해 대화형 프롬프트로 코드 자동 생성 (WASD 제어, 적 생성, 충돌 감지 등)HTML/CSS/JavaScript기반으로 게임 엔진 없이 개발 가능 (단순한 씬, 적, UI 구현)
섹션별 세부 요약
1. 프로젝트 준비 및 환경 설정
Vite프로젝트 생성 및Three.js설치 (npm install three)Amazon Q를 통해index.html,main.js,style.css파일 생성Windows 11환경에서 VS Code 에서 Amazon Q 확장 사용
2. 3D 씬 및 빛 생성
PerspectiveCamera,AmbientLight,DirectionalLight설정PlaneGeometry기반 바닥 추가,Three.js렌더 루프 실행Scene구성 요소: 카메라, 빛, 바닥, 렌더링
3. FPS 제어 시스템 구현
PointerLockControls를 사용한 WASD 이동 및 마우스 기반 시야 제어Three.js내장 컨트롤러 사용으로 FPS 게임 유사한 이동/시야 구현
4. 총기 모델 추가
BoxGeometry기반 간단한 총기 모델 생성, 카메라에 고정Player가 총기를 든 상태로 시야에 유지
5. 총알 발사 기능 구현
- 마우스 클릭 시 총알 생성 (Bullet 배열 관리)
Raycasting으로 플레이어 시야 방향에 따라 발사- 총알은 적과 충돌 시 또는 일정 시간 후 제거
6. 적 생성 및 이동 로직
Enemy객체 생성: 랜덤 X/Z 위치에서 생성- Vector Math 기반으로 플레이어 향해 이동
- 적이 플레이어에 도달 시 플레이어 HP 감소
7. 총알-적 충돌 감지
Bounding Box+Raycasting을 사용한 충돌 감지- 적 제거 및 플레이어 점수 증가
8. HP 및 점수 UI 구현
DOM Overlay를 활용한 HP/점수 표시div요소로 ❤️ Health: 100 🎯 Score: 0 표시
9. 게임 종료 상태 및 재시작 기능
- HP 0 도달 시 게임 루프 중지 및 "Game Over" 텍스트 + 재시작 버튼 표시
R키 입력 시 재시작 기능 추가
결론
Amazon Q를 활용한 대화형 프롬프트 기반 개발은 복잡한 게임 로직을 간단하게 구현 가능Three.js와Vite로 게임 엔진 없이도 브라우저 기반 FPS 게임 개발 가능- 향후 개선 방향: 배경 음악 추가, 적 종류 확장, 텍스처 적용, 난이도 증가 시스템 구현 권장