DFJK - 4키 리듬 게임

D · F · J · K 키로 플레이하는 브라우저 기반 리듬 게임

주요 기능

• 자동 채보 생성: 음악 파일을 오디오 분석(Web Audio API)하여 노트 패턴 자동 생성
• 3단계 난이도: EASY / NORMAL / HARD — BPM 기반 낙하 속도 및 노트 밀도 조절
• 리더보드: 곡별 점수 서버 저장 및 TOP 5 순위 표시
• BGM 토글: 메인·난이도·리더보드 화면에서 배경음악 켜고 끄기
• 사이버틱 배경: 캔버스 기반 디지털 레인 애니메이션 (트래픽 0)
• 셔플 재생: 전체 곡을 한 바퀴 소진 후 반복하는 중복 방지 셔플 큐
• 반응형: 듀얼 모니터 해상도 전환 시 게임 레인 자동 재배치

기술 스택

영역	기술
프레임워크	React 19 + Vite 7
게임 렌더링	PixiJS v8 (WebGL)
UI / 애니메이션	Framer Motion + CSS Variables
상태 관리	Zustand
오디오 분석	Web Audio API (OfflineAudioContext)
백엔드	Express + scores.json (파일 DB)
배포	Docker Compose + Nginx Proxy Manager

시작하기

필수 요구사항

• Node.js 20+

로컬 개발 환경 설정

1. 의존성 설치

git clone https://github.com/yjoonh/dfjk.git
cd dfjk
npm install

2. 음악 파일 추가

src/assets/audio/ 폴더에 MP3 파일을 넣으면 자동 인식됩니다.

3. 개발 서버 실행

npm run dev

http://localhost:5173 에서 확인 (Express API는 http://localhost:3001 에서 실행)

Docker 배포

docker compose up -d --build

점수 데이터는 ./server/scores.json에 볼륨 마운트되어 컨테이너 재시작 시에도 유지됩니다.

프로젝트 구조

dfjk/
├── server/
│   ├── index.js              # Express API 서버 (점수 저장/조회)
│   └── scores.json           # 리더보드 데이터 (git 제외)
├── src/
│   ├── api/
│   │   ├── localTracks.ts    # 로컬 MP3 트랙 로더 (셔플 큐)
│   │   └── scores.ts         # 리더보드 API 클라이언트
│   ├── assets/
│   │   ├── audio/            # MP3 음악 파일 (여기에 추가)
│   │   └── effects/          # 효과음 (gameover, intro BGM)
│   ├── components/
│   │   ├── BgmToggle.tsx     # BGM 켜기/끄기 토글 버튼
│   │   └── CyberBg.tsx       # 캔버스 사이버 배경 애니메이션
│   ├── game/
│   │   ├── RhythmGame.ts     # PixiJS 게임 엔진 (레인, 노트, 판정)
│   │   ├── beatDetector.ts   # 오디오 분석 기반 자동 채보 생성
│   │   └── AudioManager.ts   # 게임 오디오 재생 관리
│   ├── screens/
│   │   ├── HomeScreen.tsx    # 메인 화면
│   │   ├── DifficultyScreen.tsx  # 난이도 선택
│   │   ├── GameScreen.tsx    # 게임 플레이
│   │   ├── ResultScreen.tsx  # 결과 화면 (점수 저장)
│   │   └── LeaderboardScreen.tsx # 리더보드
│   ├── store/
│   │   └── gameStore.ts      # Zustand 전역 상태
│   └── index.css             # 글로벌 스타일 + CSS Variables
├── Dockerfile
├── docker-compose.yml
└── vite.config.ts

개발 스크립트

npm run dev          # 개발 서버 실행 (Vite + Express 동시)
npm run build        # 프로덕션 빌드
npm start            # 프로덕션 서버 실행

게임 조작

키	역할
D F J K	각 레인 노트 입력
ESC	일시정지 / 뒤로가기
← →	리더보드 곡 탭 이동
↑ ↓ + Enter	난이도 선택

라이선스

MIT