1986년 에닉스(ENIX) 불멸의 명작 콘솔 RPG '드래곤 퀘스트 1' 100% 완전 재현 웹앱
외부 에셋 의존 없이 순수 HTML5 Canvas 2D와 4채널 NES Web Audio 칩튠 사운드로 구현되었으며,
원작에는 없던 혁신적인 스마트 AI 자동 진행(Autopilot) 기능이 탑재되어 있습니다.
🎮 라이브 데모 플레이하기: https://jeiel85.github.io/dragon-quest-1/
- 순수 HTML5 Canvas 2D 픽셀 렌더러: 256x240 NES 오리지널 해상도를 픽셀 퍼펙트 비율로 정밀 렌더링
- 4채널 NES Chiptune 사운드 신디사이저: 펄스파 1/2, 트라이앵글 베이스, 노이즈 채널을 Web Audio API로 100% 프로시저럴 합성 재생
- 8곡 BGM (로토의 서곡, 탄타겔 성, 알레프갈드 필드, 평화로운 마을, 어두운 던전, 전투 테마, 용왕 최종 결전, 평화의 피날레 엔딩)
- 12종 효과음 (선택, 취소, 공격, 회심의 일격, 마법, 회복, 계단, 문 개방, 보물상자, 레벨업 팡파레, 여관 숙박, 사망)
- CRT 브라운관 스캔라인 필터: 레트로 감성을 극대화하는 스캔라인 오버레이 토글 지원
- 거대 오버월드 전도: 라다톰 반도, 북동쪽 숲, 서쪽 가라이 산맥, 남쪽 독 늪지대, 류오의 마왕 섬
- 성 & 마을 거점:
- 탄타겔 성 (로파 대왕, 왕좌, 비밀 지하 보물고)
- 라다톰 마을 (여관, 무기상인, 열쇠장인)
- 마이라 온천 마을 (온천, 요정의 피리)
- 요새 도시 메르키드 (거대 골렘 수호, 최고급 무기점)
- 성스러운 사당 (무지개의 제단)
- 던전:
- 늪지의 동굴 (그린 드래곤과의 결전 및 로라 공주 구출 이벤트)
- 마왕 류오의 성 (사악한 미로와 최강의 무기 [로토의 검], 용왕의 옥좌)
- 명작 턴제 배틀 시스템: [싸운다] / [주문] / [도구] / [도망]
- 회심의 일격(Critical Hit): 1/16 확률로 방어력을 관통하는 통쾌한 일격 및 화면 진동 연출
- 전 몬스터 도감: 슬라임, 레드 슬라임, 드라키, 고스트, 마도사, 메탈 슬라임, 스켈레톤, 키메라, 킬러 아머
- 보스전:
- 골렘: 요정의 피리로 재우고 돌파
- 그린 드래곤: 늪지의 동굴에서 로라 공주를 지키는 수호 마수
- 용왕 1차 형태: 보라색 로브와 해골 지팡이의 마왕 인간형
- 용왕 2차 형태 (진 드래곤 폼): 거대한 날개와 불타는 눈을 가진 궁극의 거룡!
원작에는 없던 최첨단 자율 탐험 AI 시스템을 탑재하였습니다.
우측 상단 [🤖 AI 자동진행] 버튼 또는 키보드 [A] 키를 누르면 AI가 스스로 게임을 클리어해 나갑니다.
- A* 자율 경로 탐색: 바다, 산, 벽 등 장애물을 피하고 독 늪지와 마법 장벽을 지능적으로 우회
- 자율 생존 & 파밍: HP가 40% 미만으로 떨어지면 즉시 호이미 주문이나 약초로 자가 치유하며, 위험 시 가까운 마을 여관으로 귀환 숙박
- 스마트 상점 쇼핑: 골드가 모이면 라다톰/메르키드 상점에서 상위 장비(구리검 -> 강철검 -> 화염의 검)와 열쇠를 자동 구매
- 전설의 퀘스트 연대기 순차 클리어:
- 로파 대왕 알현 및 보물상자 열쇠/골드 수령
- 라다톰 마을 방문 및 기본 장비 장착
- 탄타겔 성 1층 보물고에서 [태양의 돌] 획득
- 마이라 온천 마을에서 [요정의 피리] 발굴
- 북서쪽 사당에서 [비구름의 지팡이] 획득
- 늪지의 동굴 침투, 그린 드래곤 격파 및 로라 공주 구출
- 메르키드 앞에서 골렘을 요정의 피리로 잠재우고 격파
- 남쪽 깊은 독 늪지대에서 [로토의 증표] 발굴
- 성스러운 사당에서 3대 신기를 결합해 [무지개의 물방울] 생성
- 류오의 성 침입, 최강 무기 [로토의 검] 획득
- 마왕 류오 1/2차 형태 최종 격파 및 알레프갈드 해방!
- 배속 지원: 1x, 2x, 5x 배속으로 영화처럼 빠른 관전 가능
| 동작 | 키보드 (PC) | 모바일 / 터치 |
|---|---|---|
| 이동 | ↑ ↓ ← → / W A S D |
가상 D-Pad 터치 |
| 결정 / 대화 / 조사 / 공격 | Z / Enter / Space |
A 버튼 (빨간색) |
| 취소 / 간이 메뉴 열기 | X / Esc |
B 버튼 (파란색) |
| AI 자동 진행 토글 | A 키 또는 상단 버튼 |
상단 [🤖 AI 자동진행] 버튼 |
| 진행 속도 조절 | 상단 [⚡ 1x / 2x / 5x] 버튼 |
상단 [⚡ 속도] 버튼 |
| 레벨 부스트 (치트) | 상단 [⭐ Lv UP] 버튼 |
상단 [⭐ Lv UP] 버튼 |
| 저장 / 리셋 | 상단 [💾 저장] / [🔄 리셋] |
상단 버튼 |
- Core: HTML5, TypeScript, Canvas 2D API
- Audio: Web Audio API (4-Channel NES Chiptune Synthesizer)
- Bundler: Vite 6
- Architecture:
src/core/Game.ts: 게임 루프 및 씬 상태 관리src/audio/ChiptuneAudio.ts: 4채널 NES 프로그래머블 칩튠 사운드 엔진src/graphics/Sprites.ts: 절차적 픽셀 아트 및 스프라이트 생성기src/battle/BattleSystem.ts: 1:1 드퀘 턴제 배틀 엔진src/ai/Pathfinding.ts: A* 그리드 최단 경로 알고리즘src/ai/AutoPilot.ts: 지능형 자동 퀘스트/사냥/쇼핑 스테이트 머신src/ui/WindowRenderer.ts: 레트로 블랙 박스 윈도우 UI
- Deployment: GitHub Pages & GitHub Actions CI/CD Pipeline
This project is a fan-made tribute and educational web recreation inspired by Dragon Quest (© 1986 ARMOR PROJECT / BIRD STUDIO / SQUARE ENIX).