DDZIP STUDIO

CLAUDE ONE-SHOT WEB GAME / 2026

JELLY DASH

20명의 젤리빈이 세 라운드를 달려 단 하나의 왕관을 겨루는 3D 파티 게임입니다.

Fall Guys를 보고 장애물 레이스와 라운드 진행 방식을 따라 만들어 본 프로젝트입니다. 레이스, 무너지는 육각 타일, 왕관 쟁탈전으로 이어지는 배틀로얄을 브라우저에서 바로 플레이할 수 있게 만들었습니다. Claude에게 게임 전체 사양을 담은 원샷 프롬프트를 한 번 전달해 단일 HTML 파일로 완성했습니다.

파스텔 장애물 코스를 달리는 JELLY DASH 플레이 화면
제작 방식
Claude 원샷 프롬프트
게임 구성
3 ROUNDS · 20 PLAYERS
핵심 기술
Three.js · 직접 구현 물리
상태
PLAYABLE

PLAYABLE DEMO / PC ONLY

포트폴리오 안에서 바로 왕관에 도전하기.

START를 누른 뒤 게임 화면을 한 번 클릭하고 키보드로 조작하세요.

JELLY DASH PLAYABLE
키보드가 있는 PC에서 플레이할 수 있습니다. WASD 이동 · Space 점프 · Shift 다이브 · G 붙잡기
WASD 이동 SPACE 점프 SHIFT 다이브 G 상대 붙잡기
새 창에서 크게 플레이

PROJECT OVERVIEW

달리고, 버티고, 마지막 왕관을 잡는 흐름.

짧은 조작만으로 바로 이해되는 파티 게임을 목표로, 서로 다른 규칙의 세 라운드와 20명의 경쟁자가 자연스럽게 이어지도록 구성했습니다.

01

규칙이 달라지는 3개 라운드

DOOR DASH 레이스에서 10명, HEX FALL 생존전에서 5명으로 줄어든 뒤 CROWN GRAB에서 최종 우승자 한 명을 결정합니다.

02

19명의 봇과 함께 달리는 경쟁

봇마다 속도와 반응 차이를 주고, 목표 추종과 장애물 회피, 스턱 감지를 조합해 매 판 다른 흐름을 만듭니다.

03

라이브러리 없이 만든 경량 물리

중력, 마찰, 반발, 캐릭터 밀치기와 기본 충돌을 직접 구현하고 고정 timestep으로 브라우저에서도 일관된 움직임을 유지합니다.

ONE-SHOT BUILD

한 번의 프롬프트에서 플레이 가능한 3D 게임으로.

  1. STEP 01

    게임 전체를 한 번에 설계

    캐릭터 조작부터 세 라운드, 봇 AI, 물리와 사운드까지 필요한 사양을 하나의 원샷 프롬프트에 구조적으로 정리했습니다.

  2. STEP 02

    Claude로 단일 HTML 완성

    외부 에셋 없이 Three.js와 절차적 텍스처, WebAudio를 사용해 브라우저에서 바로 실행되는 한 파일의 게임으로 구현했습니다.

  3. STEP 03

    포트폴리오 플레이 경험 연결

    완성된 게임을 전용 프로젝트 페이지에 이식하고, 페이지 안 플레이와 전체화면 전환, 새 창 실행을 모두 지원하도록 구성했습니다.

USED PROMPT / FULL TEXT 실제 원샷 프롬프트 전체 보기

JELLY DASH · ONE-SHOT PROMPT

# 역할
너는 웹 게임 전문 개발자다. 아래 사양의 게임을 **한 번의 응답으로 완성된 형태**로 구현한다.

# 목표
Fall Guys 스타일의 3D 캐주얼 배틀로얄 파티게임 "JELLY DASH"를 만든다.
단일 HTML 파일(`jelly-dash.html`)로, 브라우저에서 더블클릭만 하면 바로 실행되어야 한다.

# 기술 제약 (엄수)
- **파일 1개.** HTML + CSS + JS 전부 인라인. 외부 이미지/오디오/폰트 파일 없음.
- 3D 렌더링은 Three.js **r160 이상, ESM import map + CDN(unpkg 또는 jsdelivr)** 사용.
- 물리엔진 라이브러리 금지. **직접 구현한 경량 물리**만 사용:
  - 중력, 속도 적분, 캡슐 vs AABB/구/평면 충돌, 반발계수, 마찰
  - 봇/플레이어 간 원기둥 충돌(밀치기)
- 사운드는 WebAudio API로 **코드에서 생성**(오실레이터/노이즈)한다. 점프, 착지, 충돌, 탈락, 승리음.
- 텍스처는 canvas로 절차적 생성(체크무늬, 스트라이프)만 사용.
- 60fps 목표. `requestAnimationFrame` + 고정 timestep(1/60) 물리 누적기.

# 게임 사양

## 캐릭터
- 젤리빈 형태(캡슐 몸통 + 구 머리 + 눈 2개). 색상은 HSL로 랜덤 팔레트.
- 조작: WASD/방향키 이동(카메라 상대), Space 점프, Shift 다이브(공중 몸던지기), 마우스로 카메라 회전(포인터락), 휠로 줌.
- 이동은 가속/감속 기반이라 **약간 미끄럽고 통통 튀는 느낌**이 나야 한다. 넘어지면 3초간 쓰러진 상태(래그돌 흉내: 몸통 회전 + 조작 불가) 후 자동 기상.
- 봇 19명 + 플레이어 1명 = 20명 시작. 봇은 목표 지점 추종 + 장애물 회피 + 랜덤 점프 AI. 봇마다 실력 편차(속도/반응속도) 부여.

## 라운드 구조 (총 3라운드, 생존자 수 감소)
1. **Round 1 — DOOR DASH (레이스)**: 20명 → 10명 통과.
   회전 바(스위핑 암), 좌우로 미는 피스톤, 굴러오는 큰 공, 좁은 통로. 결승선 도달 순서로 통과자 결정.
2. **Round 2 — HEX FALL (생존)**: 10명 → 5명.
   육각 타일 3층 바닥. 밟으면 0.8초 뒤 타일이 사라진다. 아래로 떨어지면 다음 층, 최하층에서 떨어지면 탈락. 제한시간 60초 생존.
3. **Round 3 — CROWN GRAB (결승)**: 5명 → 1명.
   상승하는 플랫폼 지형 꼭대기의 왕관을 먼저 잡는 사람이 우승. 왕관은 좌우로 흔들리며 회피 이동한다.

## 시스템
- 라운드 사이에 **결과 화면**(통과자/탈락자 명단, 3초 카운트다운 후 자동 진행).
- HUD: 현재 라운드명, 생존자 수, 타이머, 순위(레이스), 미니 안내 텍스트.
- 시작 화면: 게임 타이틀, 조작법, [START] 버튼.
- 종료 화면: 승리(왕관 연출 + 색종이 파티클) / 탈락(순위 표시), [다시 하기] 버튼.
- 리스폰: 맵 밖으로 떨어지면 해당 라운드 규칙에 따라 탈락 또는 체크포인트 복귀.
- 카메라: 부드러운 추적(lerp) + 벽 관통 방지(간단한 레이캐스트 거리 축소).

## 비주얼
- 밝고 파스텔한 톤. 하늘색 배경 그라디언트, 소프트 그림자(PCFSoft), 살짝의 안개.
- 캐릭터 착지/충돌 시 스쿼시&스트레치 스케일 애니메이션.
- 탈락 시 캐릭터가 위로 튀어오르며 사라지는 연출.

# 코드 품질 요구
- 하나의 파일 안에서 명확히 섹션 주석으로 구분: `CONFIG / AUDIO / UTILS / PHYSICS / CHARACTER / AI / LEVELS / GAME STATE / UI / MAIN LOOP`.
- 라운드는 `{ name, build(scene), update(dt), checkResult() }` 인터페이스를 가진 객체로 만들어 **추가/교체가 쉽게** 한다.
- 상단 `CONFIG` 객체에 튜닝 값(중력, 이동속도, 점프력, 봇 수, 라운드 시간 등)을 전부 모아둔다.
- 매직넘버 금지, 전역 오염 최소화, 라운드 전환 시 씬/이벤트 리스너 정리(메모리 누수 방지).

# 출력 규칙
1. 먼저 **10줄 이내**로 구현 방향을 요약한다.
2. 그다음 완성된 `jelly-dash.html` 전체 코드를 **하나의 코드블록**으로 출력한다. 생략(`// ...구현 생략`, `// TODO`) 절대 금지 — 모든 함수는 동작하는 실제 코드여야 한다.
3. 마지막에 아래 **자체 검증 체크리스트**를 항목별로 ✅/❌ 로 답한다. ❌가 있으면 그 부분 코드를 즉시 수정해서 다시 낸다.
   - [ ] import map 경로가 실제 존재하는 CDN 버전인가
   - [ ] 파일을 로컬에서 열었을 때 콘솔 에러 0개인가 (모듈/CORS 이슈 없음)
   - [ ] 3개 라운드 전부 시작→진행→결과까지 도달 가능한가
   - [ ] 봇이 끼임 없이 목표까지 이동하는가 (스턱 감지 후 리셋 로직 존재)
   - [ ] 탈락/통과 인원 수 계산이 항상 정확한가 (동점/전멸 예외 처리)
   - [ ] 라운드 전환 시 이전 씬 오브젝트와 리스너가 정리되는가
   - [ ] 포인터락 해제(ESC) 후 재진입이 되는가
   - [ ] 저사양에서도 동작하도록 파티클/그림자 상한이 있는가

# 금지
- 설명을 위한 부분 코드 나열 금지. 최종 전체 코드 1회만.
- "이후 확장하세요" 류의 미완성 안내 금지.

TOOLS

  • Claude
  • One-Shot Prompt
  • Three.js r161
  • Vanilla JavaScript
  • Custom Physics
  • WebAudio API
  • Canvas 2D

READY TO RACE

20명 중 마지막 하나, 왕관을 먼저 잡아보세요.