Replit과 Claude Opus 4.7로 스트리트 파이터 스타일 2D 격투 게임 만들기

📋 STREET DUEL FIGHTER — 풀 마스터 프롬프트

# STREET DUEL FIGHTER (SDF) — 격투 게임 기획서 웹사이트 + 플레이어블 데모

스트리트 파이터 II 오마주 격투 게임 기획서 사이트를 만들어줘.
모든 텍스트는 한국어, CRT 아케이드 미학, 8명 캐릭터, 카피라이트 안전 리브랜드.
플레이 가능한 1대1 격투 데모 포함.

═══════════════════════════════════════════════════════
## 1. 기술 스택 (반드시 이대로)
═══════════════════════════════════════════════════════
- React 18 + TypeScript + Vite
- Tailwind CSS v4 (HSL CSS 변수 기반)
- Wouter (가벼운 라우터)
- HTML5 Canvas API (게임 렌더링)
- Lucide React (아이콘, 옵션)

폴더 구조:
src/
  App.tsx              ← 라우트 정의
  main.tsx             ← React 18 createRoot
  index.css            ← Tailwind v4 + 커스텀 변수 + CRT 효과
  components/layout.tsx ← 헤더/푸터/메인 래퍼 (라우트별 분기)
  pages/
    overview.tsx       ← /
    characters.tsx     ← /characters
    combat.tsx         ← /combat
    demo.tsx           ← /demo (풀스크린)
  assets/
    characters/        ← 8 PNG (kazuo, riku, mei-lin, cole, volt, boris, ravi, goro)
    stages/            ← 6 PNG (japan, china, india, russia, usa, brazil)

═══════════════════════════════════════════════════════
## 2. 디자인 토큰 (index.css)
═══════════════════════════════════════════════════════
@import "tailwindcss";

:root {
  --background: 220 30% 5%;        /* 깊은 검정-블루 */
  --foreground: 0 0% 95%;
  --primary: 0 80% 55%;            /* 강렬한 빨강 */
  --primary-foreground: 0 0% 100%;
  --secondary: 200 90% 50%;        /* 시안 */
  --accent: 50 100% 55%;           /* 형광 노랑 */
  --muted: 220 10% 25%;
  --muted-foreground: 220 10% 65%;
  --card: 220 20% 10%;
  --destructive: 0 100% 50%;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
}

.font-pixel { font-family: 'Press Start 2P', monospace; letter-spacing: 0.05em; }
.font-sans  { font-family: 'Inter', system-ui, sans-serif; }

@keyframes blink { 0%,50%,100%{opacity:1} 25%,75%{opacity:.3} }
.blink { animation: blink 1.5s infinite; }
@keyframes slide { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* CRT 스캔라인 오버레이 */
.crt-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.15) 0, rgba(0,0,0,.15) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.crt-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6) 100%);
}

═══════════════════════════════════════════════════════
## 3. 캐릭터 8명 (정확한 데이터 — 그대로 사용)
═══════════════════════════════════════════════════════
배열 그대로 코드에 박아주세요:

const ROSTER = [
  { id: "kazuo",  name: "KAZUO",  origin: "JAPAN",  height: "175cm", weight: "68kg",  style: "Karate",                move: "Shockwave",          stats: { hp:7, atk:7, spd:7,  stun:7, reach:6 } },
  { id: "riku",   name: "RIKU",   origin: "USA",    height: "175cm", weight: "72kg",  style: "Karate",                move: "Flame Upper",        stats: { hp:7, atk:7, spd:8,  stun:7, reach:6 } },
  { id: "mei-lin",name: "MEI-LIN",origin: "CHINA",  height: "169cm", weight: "Secret",style: "Chinese Martial Arts",  move: "Lightning Kick",     stats: { hp:6, atk:5, spd:10, stun:5, reach:7 } },
  { id: "cole",   name: "COLE",   origin: "USA",    height: "182cm", weight: "86kg",  style: "Martial Arts",          move: "Sonic Boom",         stats: { hp:8, atk:7, spd:6,  stun:8, reach:7 } },
  { id: "volt",   name: "VOLT",   origin: "BRAZIL", height: "192cm", weight: "98kg",  style: "Feral Movement",        move: "Electric Thunder",   stats: { hp:8, atk:8, spd:8,  stun:6, reach:6 } },
  { id: "boris",  name: "BORIS",  origin: "USSR",   height: "214cm", weight: "115kg", style: "Pro Wrestling",         move: "Spinning Piledriver",stats: { hp:10,atk:10,spd:3,  stun:10,reach:8 } },
  { id: "ravi",   name: "RAVI",   origin: "INDIA",  height: "176cm", weight: "48kg",  style: "Yoga",                  move: "Yoga Fire",          stats: { hp:6, atk:6, spd:4,  stun:5, reach:10 } },
  { id: "goro",   name: "GORO",   origin: "JAPAN",  height: "185cm", weight: "137kg", style: "Sumo",                  move: "Tidal Slap",         stats: { hp:9, atk:9, spd:4,  stun:9, reach:6 } },
];

캐릭터 이미지는 AI 이미지 생성으로 별도 제작 — 한 명당 풀바디 일러스트 1장
(kazuo.png, riku.png 등으로 src/assets/characters/ 에 저장)

═══════════════════════════════════════════════════════
## 4. 레이아웃 컴포넌트 (components/layout.tsx)
═══════════════════════════════════════════════════════
헤더(상단 sticky):
- 좌측 로고: "SDF" (빨강 픽셀폰트, 광원효과) + "STREET DUEL FIGHTER" + "DESIGN DOCUMENT" 부제
- 우측 네비: OVERVIEW / ROSTER / COMBAT / PLAY (활성탭은 시안색 밑줄+글로우)

메인 콘텐츠:
- /demo 라우트일 때만 max-width 제거하고 풀스크린
- 다른 라우트는 max-w-7xl mx-auto p-6 md:p-12

푸터:
- "INSERT COIN" 깜빡이는 빨강 픽셀텍스트
- 파랑/노랑/빨강 작은 막대 3개 (CRT 색채조정 모티브)
- 하단 "© KOMBAT FORGE STUDIOS — A FAN-MADE TRIBUTE - GAME DESIGN DOCUMENT V1.0"

전체 화면에 .crt-overlay와 .crt-vignette 항상 표시

═══════════════════════════════════════════════════════
## 5. /overview 페이지 (overview.tsx)
═══════════════════════════════════════════════════════
세 섹션:

(A) 히어로 섹션 (rounded-xl, border-4 border-primary/50, aspect-21/9):
- 배경: japan.png 스테이지 (opacity-50, mix-blend-luminosity)
- 중앙 큰 타이틀: "STREET DUEL FIGHTER" (text-7xl, 노랑→빨강 그라데이션)
- 부제 한국어: "대전 격투 게임의 장르를 확립하고 아케이드 시장의 르네상스를 이끌어낼 혁명적인 프로젝트. 8명의 개성 넘치는 전사들이 최강의 자리를 놓고 격돌합니다."
- 하단에 캐릭터 4명 이미지가 줄지어 서있음 (Kazuo flipped, Mei-Lin 가운데 강조, Cole, Riku)

(B) CORE USP (3-grid):
- "01 — 4-BUTTON SYSTEM" — "약/강 펀치와 약/강 킥, 단순하지만 깊이 있는 4버튼 체계로 누구나 쉽게 시작하고 깊이 있게 마스터할 수 있습니다."
- "02 — COMBO MECHANIC" — "연속적인 공격이 히트하는 콤보 시스템을 통해 숙련도에 따른 확실한 보상과 화려한 연출을 자랑합니다."
- "03 — DIVERSE CAST" — "각기 다른 체형, 스피드, 고유 필살기를 가진 8명의 매력적인 캐릭터로 전 세계 유저의 취향을 만족시킵니다."

(C) MATCHUP SIMULATOR:
- "INSERT COIN" 큰 버튼 클릭하면 8명 중 무작위 두 명 P1/P2로 대결구도
- 양쪽에서 슬라이드 인, 가운데 "VS" → 2초 후 "FIGHT!" 큰 텍스트 (노랑→빨강 그라데이션, bounce)
- "NEXT MATCH" 버튼으로 재시도

═══════════════════════════════════════════════════════
## 6. /characters 페이지 (characters.tsx)
═══════════════════════════════════════════════════════
페이지 타이틀: "SELECT YOUR FIGHTER" (빨강 픽셀, 노랑 하단 라인)
부제: "세계를 무대로 싸울 8명의 전사. 각각의 고유한 격투 스타일과 필살기를 마스터하여 최강의 자리에 오르십시오."

12-그리드 분할 (lg:grid-cols-12):

좌측 7컬럼 — 캐릭터 4x2 격자 셀렉트:
- 8명 카드 격자, 각 셀: 이미지 + 하단 이름
- 마우스 호버/클릭으로 선택, 선택된 카드: border-accent, scale-105, 흰색 펄스 테두리
- 비선택 카드는 grayscale-50%

우측 5컬럼 — 디테일 카드:
- 선택 안 됨: "WAITING FOR PLAYER..." 점선 테두리 깜빡임
- 선택 됨:
  - 상단 큰 캐릭터 이미지 (배경에 origin 텍스트 회전)
  - 하단 좌측에 이름(픽셀폰트, 빨강 그림자) + 국적
  - 데이터 그리드: HEIGHT, WEIGHT, STYLE, SIGNATURE MOVE
  - 스탯바 5개 (hp/atk/spd/stun/reach), 빨강→노랑 그라데이션, 0~10 기준

═══════════════════════════════════════════════════════
## 7. /combat 페이지 (combat.tsx)
═══════════════════════════════════════════════════════
(A) 헤더 섹션:
- 타이틀 "COMBAT SYSTEM" (시안 픽셀)
- 부제: "격투 게임의 진수를 4버튼 체계와 캔슬 기반의 콤보 시스템으로 풀어냅니다."

(B) 2컬럼 — 4-BUTTON LAYOUT / SPECIAL COMMANDS:
좌측: 4-BUTTON LAYOUT
- LP 약펀치 → J (파랑 테두리)
- HP 강펀치 → K (진파랑)
- LK 약킥 → N (빨강)
- HK 강킥 → M (진빨강)

우측: SPECIAL COMMANDS (순차 입력 800ms 이내)
- SHOCKWAVE: S → D → J
- FLAME UPPER: D → S → K
- CYCLONE KICK: S → A → M

(C) COMMAND TRAINER (실시간 인터랙티브):
- 키보드 S, D, J 입력을 순서대로 화면에 누적 표시 (최근 3키)
- 정확히 "SDJ" 시퀀스 완성 시:
  - Kazuo 일러스트 잠깐 스케일 변형
  - 화면 가운데서 시안 에너지볼이 발사되어 우측으로 슬라이드 (1초)
  - "SHOCKWAVE!" 텍스트 출현
  - 시안 플래시 오버레이
  - 콤보 카운터 "N HITS!" 우상단에 펄스
- 800ms 이내 키 안 누르면 입력 리셋

═══════════════════════════════════════════════════════
## 8. /demo 페이지 (demo.tsx) — 풀스크린 게임
═══════════════════════════════════════════════════════
레이아웃은 layout.tsx에서 /demo일 때만 max-width 해제됨.

구조:
- 상단 HP UI (absolute):
  - 좌: "KAZUO" + 빨강→노랑→초록 HP바 (gradient-to-r)
  - 가운데: 큰 "99" 카운터 (노랑, 깜빡임)
  - 우: "RIKU" + 동일 HP바 (반대방향, gradient-to-l)
- 중앙 게임 캔버스:
  - 내부 해상도 800x400, CSS는 풀화면 (height: calc(100vh - 220px), object-contain)
  - 배경 japan.png
  - P1 (Kazuo), P2 (Riku) — 풀바디 일러스트로 그려짐
  - 그림자 타원 (검정 50% 알파)
- 하단 컨트롤 가이드: WASD / J / K 키 표시
- 게임 종료 시 INSERT COIN TO CONTINUE 버튼 (페이지 새로고침)

게임 로직:
const GRAVITY = 0.8;
const JUMP_FORCE = -15;
const SPEED = 5;
const GROUND_Y = 210;

type Player = {
  x: number; y: number; w: 100; h: 180;
  vy: number; hp: number;
  state: "idle"|"walk"|"jump"|"punch"|"kick"|"guard"|"hit"|"ko";
  dir: 1|-1; imgObj: HTMLImageElement|null;
};

규칙:
- 양쪽 100 HP 시작
- P1 키 입력: A=좌, D=우, W=점프, S=가드, J=펀치, K=킥
- P1은 항상 상대방 쪽으로 자동 face (dir 자동 설정)
- P2는 단순 AI: 거리>120이면 접근(walk), 가까우면 5% 확률 punch / 2% kick
- 충돌: 펀치 reach=80 / 데미지=5, 킥 reach=100 / 데미지=8
- 가드 성공 시 데미지 무효 (방향 일치 시)
- 피격 시 30px 넉백, "hit" 상태 400ms 후 idle 복귀
- HP 0이면 KO, 회전+낙하 표시, 화면 중앙에 "K.O." + "PLAYER N WINS"

캐릭터 그리기 (Canvas 변환):
- drawW = w * 2, drawH = h * 1.5
- 바닥 중심 기준 회전/스케일
- punch: rotate 0.1, scale(1.1, 0.95)
- kick: rotate -0.1, scale(1.2, 0.9)
- guard: rotate -0.1, scale(0.9, 1)
- hit: rotate -0.2, translate(-10,-10), filter brightness 200% hue-rotate 90
- ko: rotate -1.5, translate(-50, 50)
- walk: translateY(sin(time/100) * 5) — 보빙
- jump: scale(0.9, 1.1)
- dir == -1이면 ctx.scale(-1,1) + translate(-800,0)으로 좌우 반전

히트 이펙트:
- 피격 시 충돌 지점에 노랑+흰색 원 (랜덤 크기), 매 프레임 다시 그려짐

═══════════════════════════════════════════════════════
## 9. AI로 따로 만들어야 할 이미지 (Midjourney/DALL-E/Imagen 등)
═══════════════════════════════════════════════════════
캐릭터 일러스트 공통 베이스:
"Hand-painted 16-bit arcade fighting game character art, full body standing
fighting stance, side view facing right, transparent background PNG,
no text, no UI, no shadows. Detailed pixel-painting style."

각 캐릭터 추가 묘사:
- KAZUO: Japanese karateka, white headband, sleeveless white karate gi torn at edges, black belt, red fingerless gloves, barefoot, athletic muscular build, short black spiky hair.
- RIKU: American karateka, long red wavy hair tied with red headband, orange karate gi, black belt, red fingerless gloves, barefoot, athletic muscular build, confident grin.
- MEI-LIN: Young Chinese woman martial artist, red sleeveless qipao with gold dragon embroidery, black silk pants, white cloth wraps on hands and feet, long black hair in single high ponytail with red ribbon, athletic slim curvaceous build.
- COLE: American military fighter, blonde flat-top hair, green camo pants, white tank top, red dog tags, black combat boots, athletic build, serious expression.
- VOLT: Brazilian feral fighter, wild green-tinted skin, long orange wild hair, torn brown shorts, bare feet with claws, hunched athletic build, sharp teeth.
- BORIS: Russian wrestler giant, completely bald, huge muscular bodybuilder physique, red wrestling tights, big leather boots, scarred chest, thick mustache.
- RAVI: Indian yoga master, lean wiry physique, bald head with fire markings, yellow loincloth and skirt, white jewelry, long stretchy limbs, calm serene face.
- GORO: Japanese sumo wrestler, traditional mawashi belt, topknot hair, massive heavy build, broad shoulders, intimidating stance.

스테이지 배경 공통:
"Pixel art 16-bit fighting game stage background, horizontal landscape
2:1 aspect ratio (1280x640), atmospheric lighting, no characters, no UI."

각 스테이지:
- japan.png: Japanese temple at sunset, cherry blossoms, torii gate, stone lanterns, red architecture
- china.png: Chinese marketplace, hanging red lanterns, pagoda
- india.png: Ancient temple with elephants, sandstone columns
- russia.png: Industrial factory in snow, smokestacks, brutalist
- usa.png: American military base, fighter jet, hangar
- brazil.png: Amazon jungle clearing, ruins, vines

═══════════════════════════════════════════════════════
## 10. 구현 순서 권장
═══════════════════════════════════════════════════════
1. Vite + React + TS + Tailwind v4 프로젝트 셋업
2. index.css에 디자인 토큰 + 폰트 + CRT 효과 추가
3. layout.tsx (헤더/푸터/네비, /demo 분기)
4. 빈 4개 페이지 라우트 연결
5. AI로 8 캐릭터 + 6 스테이지 이미지 생성, src/assets/ 에 저장
6. characters.tsx — 그리드 + 디테일 카드
7. overview.tsx — 히어로 + USP + 매치업 시뮬레이터
8. combat.tsx — 키 입력 트레이너
9. demo.tsx — Canvas 게임 루프 + 충돌 + HP

═══════════════════════════════════════════════════════
## 11. 톤앤매너
═══════════════════════════════════════════════════════
- 모든 UI 텍스트는 한국어
- 시스템 라벨/버튼은 영문 픽셀폰트 (KAZUO, FIGHT!, INSERT COIN, K.O.)
- 설명문은 한국어 본문 폰트(Inter 등)
- 색감: 깊은 검정 배경 + 네온 빨강/시안/노랑 강조
- 모든 패널에 border (보통 border-4) + glow (drop-shadow)
- 픽셀폰트는 항상 letter-spacing 넓게
- 깜빡임/펄스 효과 적극 사용 (.blink, animate-pulse)
- CRT 스캔라인은 화면 전체에 지속 표시

이 명세대로 만들어줘. 막히면 단계별로 끊어서 진행해.