feat: add readme

Author: yunuo46

README.md

@@ -0,0 +1,132 @@
+# 건국대학교 메타버스 웹 게임 🎮
+
+> **Phaser.js 기반의 실시간 멀티플레이어 메타버스 + 리듬게임**
+
+건국대학교 캠퍼스를 배경으로 한 2D 메타버스 게임으로, 실시간 소셜 기능과 K-POP 리듬게임을 결합한 웹 기반 게임입니다.
+
+## 🚀 주요 특징
+
+### 🌍 메타버스 월드
+- **건국대학교 캠퍼스 맵**: 실제 캠퍼스를 모티브로 한 2D 탑다운 월드
+- **실시간 멀티플레이어**: 최대 다수 플레이어 동시 접속
+- **소셜 상호작용**: 실시간 채팅, 이모티콘, 말풍선 시스템
+
+### 🎵 리듬게임 모드
+- **3가지 K-POP 트랙**: 에스파 - Supernova, 라이즈 - Get A Guitar 등
+- **타이밍 기반 게임플레이**: 정확한 타이밍으로 노트 히트
+- **AI 대전 시스템**: 가상 상대와의 실시간 점수 경쟁
+
+### 📱 크로스 플랫폼 지원
+- **데스크탑**: 키보드 방향키 + 기능키 조작
+- **모바일**: 가상 조이스틱 + 터치 인터페이스
+
+## 🛠️ 기술 스택
+
+### Frontend
+- **게임 엔진**: [Phaser.js 3.80.1](https://phaser.io/) - 완전한 2D 게임 프레임워크
+- **언어**: TypeScript 5.2.2 - 타입 안정성 보장
+- **빌드 도구**: Vite 5.2.0 - 고속 개발 서버 및 번들링
+- **UI 플러그인**: Phaser3-rex-plugins - 가상 조이스틱 지원
+
+### Backend & Communication
+- **실시간 통신**: STOMP over WebSocket
+- **서버**: `wss://api.getaguitar.site/ws`
+- **CDN**: AWS CloudFront - 게임 에셋 전역 배포
+
+### Game Engine Features
+- **물리 엔진**: Phaser Arcade Physics - 2D 충돌 감지 및 이동
+- **타일맵**: Tiled JSON 포맷 - 레벨 디자인 도구 연동
+- **애니메이션**: 스프라이트시트 기반 캐릭터 애니메이션
+- **오디오**: Web Audio API - 고품질 사운드 재생
+
+## 🎯 게임플레이
+
+### 메타버스 모드
+1. **캐릭터 생성**: 닉네임 입력 후 게임 참여
+2. **자유 탐험**: 건국대 캠퍼스 맵 내에서 자유롭게 이동
+3. **소셜 활동**: 다른 플레이어와 채팅 및 이모티콘 교류
+4. **미니게임**: 맵 내 특정 오브젝트와 상호작용
+
+### 리듬게임 모드
+1. **곡 선택**: 3가지 K-POP 트랙 중 선택
+2. **노트 플레이**: 화면 상단에서 떨어지는 노트를 정확한 타이밍에 히트
+3. **점수 경쟁**: AI 상대와 실시간 점수 비교
+4. **결과 확인**: 게임 종료 후 최종 점수 표시
+
+## 🏗️ 아키텍처
+
+### 씬 관리 시스템
+```
+로딩 화면 → 닉네임 입력 → 메인 월드 → 리듬게임
+```
+
+### 실시간 통신 구조
+- **WebSocket STOMP**: 브라우저 ↔ 서버 실시간 양방향 통신
+- **상태 동기화**: 플레이어 위치, 애니메이션, 채팅 메시지
+- **이벤트 기반**: Pub/Sub 패턴으로 확장 가능한 구조
+
+### 렌더링 파이프라인
+- **멀티 레이어**: 배경, 오브젝트, 캐릭터, UI 분리 렌더링
+- **카메라 추적**: 플레이어 중심 스무스 카메라 이동
+- **최적화**: 뷰포트 컬링 및 오브젝트 풀링
+
+## 🚀 시작하기
+
+### 개발 환경 설정
+```bash
+# 의존성 설치
+npm install
+
+# 개발 서버 실행
+npm run dev
+
+# 빌드
+npm run build
+```
+
+### 프로젝트 구조
+```
+src/
+├── scenes/          # 게임 씬들
+├── assets/objects/  # 게임 오브젝트
+├── constants/       # 상수 및 설정
+├── utilities/       # 유틸리티 함수
+└── main.ts         # 엔트리 포인트
+```
+
+## 🎨 에셋 및 리소스
+
+### 그래픽 에셋
+- **캐릭터 스프라이트**: 32x32 픽셀 4방향 애니메이션
+- **타일셋**: 16x16 픽셀 모듈러 타일
+- **UI 요소**: 팝업, 버튼, 말풍선 등
+
+### 오디오 에셋
+- **BGM**: K-POP 트랙 3곡 (MP3/OGG)
+- **효과음**: 게임 내 상호작용 사운드
+
+## 🔧 주요 기능 구현
+
+### Phaser.js 활용
+- **게임 루프**: 60fps 렌더링 및 업데이트
+- **물리 시뮬레이션**: 캐릭터 이동 및 충돌 처리
+- **이벤트 시스템**: 사용자 입력 및 게임 이벤트 관리
+
+### 실시간 멀티플레이어
+- **상태 동기화**: 플레이어 위치 실시간 업데이트
+- **채팅 시스템**: 즉석 메시지 전송 및 말풍선 표시
+- **이모티콘**: F1-F4 키로 감정 표현
+
+### 리듬게임 엔진
+- **타이밍 시스템**: 밀리세컨드 단위 정확도
+- **점수 계산**: 히트/미스 기반 점수 시스템
+- **AI 대전**: 랜덤 알고리즘 기반 가상 상대
+
+## 🌟 기술적 혁신
+
+- **하이브리드 장르**: 메타버스와 리듬게임의 성공적 결합
+- **웹 기반**: 별도 설치 없이 브라우저에서 즉시 플레이
+- **교육 콘텐츠**: 실제 대학 캠퍼스를 게임 월드로 구현
+- **K-POP 연동**: 한국 대중문화와 게임의 융합
+
+---