TINY SURVIVORS _{티니 서바이버즈}

뱀서라이크(survivor-like) 도트 생존 액션 웹 게임 바닐라 JS + Canvas · 런타임 의존성 0 · 단일 HTML 파일로 배포

▶ 지금 플레이 (공식 서버) · GitHub Pages 데모

7막 「부서진 별의 들판」 — 엑스칼리버 · 뇌우 · 유성창으로 공허 군단을 상대하는 중

특징

• ⚔️ 무기 13종 + 진화 13종, 패시브 13종 — 매 판 다른 빌드. 무기 상성(참격·마탄·성염)까지 계산하면 더 강해집니다
• 🌙 2개 챕터, 10막 스테이지 — 1장 「리치 왕의 저주」, 2장 「공허의 서막」. 막마다 분 단위 웨이브 + 미니보스 + 최종보스
• 🧟 적 61종 + 보스 30종 — 15분을 버티면 승리, 그 뒤엔 엔드리스 모드
• 🎮 생존자 8명 — 각자 시작 무기와 특성이 다른 캐릭터들, 스테이지 클리어로 해금
• 💰 메타 진행 — 골드·파워업 상점·업적·저주(난이도) 시스템, localStorage 저장 + 공식 서버에선 클라우드 저장/기기 간 복구
• 🏆 온라인 랭킹 — 스테이지별 상위 50위 (공식 서버)
• 🎵 프로시저럴 칩튠 9트랙 — 자체 WebAudio 트래커가 실시간 연주 (오디오 파일 0개)
• 📱 모바일 지원 — 화면 드래그로 이동, 터치 UI

스크린샷

10막 최종보스 「공허의 심장」 — 발가르의 심장 · 사건의 지평선으로 교전

레벨업 — 무기/패시브 선택으로 빌드 완성	생존자 8명, 각자 다른 시작 무기와 특성
챕터/스테이지 선택 — 2장 「공허의 서막」	골드로 영구 강화하는 파워업 상점

플레이

• 공식 서버 (풀 기능 — 랭킹 · 클라우드 저장 · 기기 간 복구): https://d1vgt173gf7ghl.cloudfront.net
• GitHub Pages 데모 (프론트엔드 전용): https://hanjeongho.github.io/tiny-survivors/
  • 게임은 전부 동일하게 동작하고, 진행 상황(골드·해금·업적)은 브라우저 localStorage에 저장됩니다.
  • 랭킹·클라우드 저장만 꺼져 있으며, 자체 백엔드를 배포했다면 ?api=https://내주소/api 로 연결할 수 있습니다.

조작: 이동 WASD / 방향키 (모바일: 화면 드래그) · 일시정지 ESC — 공격은 자동입니다.

실행

# 완성본 실행 (아무 정적 서버나, 또는 파일 직접 열기)
open dist/index.html          # 브라우저에서 바로 열어도 동작 (모든 에셋 인라인)

# 개발 모드
python3 -m http.server 8080   # 프로젝트 루트에서
# → http://localhost:8080/index.html

빌드

npm install                    # esbuild, puppeteer(테스트용)
npm run build                  # → dist/index.html (단일 파일), dist/artifact.html

에셋 임베드본(src/gen/assets-data.js)이 저장소에 포함되어 있어 위 두 줄로 빌드가 끝납니다. 스프라이트/사운드/폰트 원본을 바꿀 때만 npm run build:assets를 실행하세요 — 저장소 상위에 ../assets_raw/(Kenney 팩들 + fonts/Galmuri9·11.woff2)와 ffmpeg(FFMPEG 환경변수)가 필요합니다.

테스트

node tools/api-test.mjs        # 백엔드 라우팅/CORS 유닛 테스트
node tools/headless-test.mjs   # DOM 없이 15분 세션 시뮬레이션 (승리/사망 경로, NaN/폭주 검증)
node tools/browser-test.mjs [stage] [char] [seconds]  # headless Chrome 스모크 + 스크린샷 (shots/)
node tools/cloud-e2e.mjs       # 로컬 백엔드+실브라우저 E2E
node tools/readme-media.mjs    # 이 README의 스크린샷/GIF 재촬영 (ffmpeg 필요)

셀프 호스팅 (내 AWS 계정에 풀 기능 배포)

랭킹·클라우드 저장까지 포함한 나만의 서버를 올릴 수 있습니다. 준비물: AWS 계정 + AWS CLI 로그인. 필요 IAM 권한은 tools/deploy-iam-policy.json(프론트) / tools/deploy-iam-policy-backend.json(백엔드) 참고 — <ACCOUNT_ID>, <REGION>, <DISTRIBUTION_ID> 자리표시자를 본인 값으로 바꿔 쓰세요.

node tools/build-assets.mjs && node tools/build-dist.mjs
bash tools/deploy-cloudfront.sh    # 1) 비공개 S3(OAC) + CloudFront 생성, .deploy-state.json 기록
bash tools/deploy-backend.sh       # 2) DynamoDB + Lambda + HTTP API 생성, CloudFront /api/* 연결
# 이후 갱신: bash tools/deploy-cloudfront.sh update / bash tools/deploy-backend.sh update

• 게임은 자기 CloudFront 도메인에서 same-origin /api를 호출하므로 추가 설정이 필요 없습니다.
• CORS: 백엔드는 same-origin과 로컬 개발(localhost/127.0.0.1)만 허용합니다. 다른 오리진을 허용하려면 Lambda 환경변수 ALLOWED_ORIGINS(쉼표 구분 오리진 목록)를 설정하세요.
• 피드백 열람(선택): Lambda 환경변수 ADMIN_KEY 설정 후 GET /api/feedback?key=<ADMIN_KEY>.

백엔드 (클라우드 저장 + 랭킹)

• 구성: CloudFront /api/* → API Gateway(HTTP API) → Lambda(nodejs20, backend/handler.mjs) → DynamoDB(tiny-survivors)
• 기능: 유저별 진행 상황 저장(닉네임+개인 코드로 기기 간 복구), 스테이지별 상위 50위 랭킹(승리>생존, 승리는 빠른 클리어 우선)
• 로컬 개발: node backend/local-server.mjs 8788 후 게임을 ?api=http://127.0.0.1:8788/api로 열기

구조

• src/core/ — 엔진: 루프/카메라/공간해시, 에셋(리컬러), 오디오, 칩튠 시퀀서, 입력, 저장
• src/data/ — 순수 데이터: 무기 13종+진화 13종, 패시브 13종, 적 61종+보스 30종(미니 포함), 스테이지 10종 타임라인(1장 5막+2장 5막), 캐릭터 8종
• src/game/ — 게임플레이: Game(DOM 비접촉), 무기 시스템, 적 AI, 픽업, 웨이브 디렉터, 레벨업/상자, 월드, 렌더러, 이펙트
• src/ui/ — DOM UI(한국어): 타이틀/선택/HUD/레벨업/상자/일시정지/결과/상점/업적/옵션/크레딧
• tools/ — 에셋 파이프라인, 번들러, 테스트, 배포 스크립트

라이선스

• 코드: MIT — LICENSE
• 에셋 (전부 무료 공개):
  • Kenney Tiny Dungeon, Tiny Town, Tiny Ski (CC0) — 스프라이트
  • Kenney Impact/Digital/RPG/Interface Sounds (CC0) — 효과음
  • Galmuri 한국어 픽셀 폰트 (SIL OFL 1.1 — 저작권 고지·전문은 OFL.txt, 게임 크레딧 화면에도 내장)
  • 음악은 WebAudio 프로시저럴 칩튠 (자체 트래커, 원곡 9트랙)