DDatge Survival
플레이하기: https://ddatge-survival.vercel.app/
뱀파이어 서바이벌 + agar.io 감성의 탑다운 성장형 생존 게임입니다.
플레이어는 작은 땃쥐로 시작해 먹이사슬을 따라 성장하고, 공복 게이지를 관리하며 최대한 오래 생존합니다.
1. 게임 개요
컨셉
- 장르: 탑다운 액션 서바이벌, 로그라이크(run-based), 성장형 게임
- 핵심 감정: 성장 쾌감 + 생존 긴장감 + 짧고 반복 가능한 세션
- 한 판 목표: 먹이 확보, 공복 관리, 천적 회피, 최고 점수 갱신
핵심 플레이 루프
- 이동(키보드/모바일 조이스틱)으로 먹이를 탐색
- 낮은 레벨 NPC를 포식해 점수/공복 회복
- 레벨업으로 스탯 성장 + 생태계 난이도 상승
- 아이템/스킬/코스튬을 활용해 생존 시간 확장
- 사망 후 기록 저장 및 리더보드 경쟁
주요 포인트
- 명확한 먹이사슬 규칙:
낮은 레벨은 포식, 동레벨은 대치, 높은 레벨은 위협
- 공복 시스템 기반 압박: 시간 경과에 따라 지속적으로 의사결정 유도
- 동적 생태계: 플레이어 레벨 기반으로 NPC 분포가 계속 재편
- 이동 애니메이션: 플레이어 외형 22종의 달리기, NPC 31종의 배회/추격을 동작별 4·6·8프레임으로 재생
- 메타 진행: 누적 점수로 스킬 언락/구매, 코스튬 수집, 슬롯 확장
2. 게임 기획 관점의 시스템 설계
먹이사슬/레벨
- 규칙:
npcLevel < playerLevel만 포식 가능 (FoodChain)
- 레벨업 요구치: 레벨별 누적 점수 기반 (
LevelSystem)
- 보스(특수 레벨) 출현 구간 존재
공복(Hunger)
- 생존 자원: 공복이 0이 되면 즉시 게임오버
- 레벨 상승에 따라 공복 소모량이 커져 후반 압박 증가
- 먹이 포식/아이템으로 공복 회복 또는 소모 완화
동적 생태계/NPC AI
- 플레이어 레벨 근처 대역을 중심으로 스폰 밀도 제어 (
NPCManager)
- 배회/추격/도주 상태 기반 행동
- 미니맵용 NPC 위치 동기화 최적화(주기 업데이트)
아이템/스킬/코스튬
- 아이템: 생존/버프/코스튬 카테고리 분리
- 스킬: 누적 점수 언락 + 화폐 구매 + 슬롯 장착(최대 3 슬롯 확장형)
- 코스튬: 플레이 중 획득 및 메타 보존, 리더보드 표시에 반영
3. FE 아키텍처
렌더링 레이어 분리
Next.js App Router: 페이지/레이아웃/API 라우팅Phaser: 실시간 월드 시뮬레이션 및 물리React UI: HUD, 모달, 리더보드, 게임오버 오버레이
상태 관리
Zustand 기반 전역 상태gameStore: 점수, 레벨, 공복, 버프, 위치, 게임 상태audioStore: BGM/SFX 볼륨, 음소거, 로컬 저장
엔진-UI 브릿지
EventBus로 Phaser <-> React 간 이벤트 전달- 예:
pause-game, resume-game, level-up, game-over, audio-settings-changed
4. 시스템 설계(구현 구조)
[Home / Game / Leaderboard (Next.js)]
|
v
[React UI + Zustand Store]
|
EventBus
|
v
[Phaser Scenes]
- PreloadScene (에셋 로드)
- GameScene (코어 루프)
- UIScene (모바일 조이스틱)
|
v
[Managers / Systems]
- NPCManager / ItemManager / SkillManager
- HungerSystem / LevelSystem / FoodChain
|
v
[API Routes]
- /api/scores (기록/리더보드/메타 데이터)
- /api/skills (스킬 구매)
- /api/slots (슬롯 구매)
|
v
[Supabase]
5. 기술 스펙
| 항목 | 내용 |
|---|
| Frontend | Next.js 16 (App Router), React 19, TypeScript |
| Game Engine | Phaser 3 (Arcade Physics) |
| State | Zustand |
| Backend | Next.js Route Handlers |
| DB/BaaS | Supabase |
| 주요 해상도 | 기본 800x600, 모바일 대응(브레이크포인트 960) |
| 맵 | 타일 기반 월드 + 장애물 + 동적 확장 요소 |
6. 주요 디렉토리
src/
app/
page.tsx # 메인 메뉴
game/page.tsx # 게임 페이지
leaderboard/page.tsx # 리더보드
api/
scores/route.ts
skills/route.ts
slots/route.ts
components/
game/ # HUD, 캔버스, 게임오버 등
ui/ # 설정/도움말 모달
lib/
phaser/
scenes/
systems/
entities/
data/
userId.ts
supabase.ts
store/
gameStore.ts
audioStore.ts
7. 실행 방법
npm install
npm run dev
- 브라우저:
http://localhost:3000
8. 환경 변수
.env.local 예시:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-service-key
9. 화면 캡처
Home
Home - How To Play Modal
Game
Game - Sound Modal
Game - How To Play Modal
Leaderboard
Mobile Snapshot
10. 참고 문서
