극한의 서바이벌

개요

HTML5 Canvas를 활용하여 제작된 2D 서바이벌 액션 게임입니다. 플레이어는 마법사 캐릭터를 조작해 몰려오는 적을 물리치며, 경험치를 모아 레벨업하고 무기를 최대 10단계까지 강화할 수 있습니다. 뱀파이어 서바이버류의 자동 공격, 레벨업 선택, 아이템 드랍, 온라인 랭킹 시스템을 갖추고 있습니다.

파일 구조

• index.html: 게임 화면 마크업, 시작·게임 오버·레벨업 오버레이, 랭킹 UI 레이아웃을 포함합니다.
• styles.css: 반응형 레이아웃, 오버레이, 랭킹 패널, 레벨업 카드 등 게임 전반의 시각 스타일을 정의합니다.
• game.js: Canvas 렌더링, 플레이어·적·투사체·아이템 로직, 무기 시스템, 레벨업, 게임 루프를 담당합니다.
• rank.js: 한뼘코딩 Rank API 연동(점수 제출, 상위 10위 조회)을 담당합니다.
• rank.txt: Rank API 사용 문서 참고 자료입니다.

화면·작동 안내

주요 UI 요소

• 시작 화면: 게임 제목과 활동 안내, 게임 시작 버튼, TOP 10 온라인 랭킹 목록이 제공됩니다.
• HUD (상태 표시): 상단 경험치 바, 현재 레벨·점수, 보유 무기 및 강화 단계를 실시간으로 보여줍니다.
• 레벨업 화면: 레벨업 시 3장의 강화 카드 중 하나를 선택해 무기를 강화하거나 신속·회복 등의 능력을 올릴 수 있습니다.
• 게임 오버 화면: 도달 레벨과 최종 점수를 표시하며, 원할 경우 닉네임을 입력해 랭킹에 등록할 수 있습니다(게임당 1회).
• 조작: PC(WASD·방향키)와 모바일·마우스(화면 중심 기준 드래그) 환경 모두 지원합니다.

사용 흐름

1. 게임 시작: 시작 화면에서 게임 시작을 눌러 플레이를 시작합니다. 닉네임 입력 없이 바로 시작할 수 있습니다.
2. 이동 및 생존: 캐릭터를 조작해 적의 접촉과 원거리 공격을 피하며 생존합니다.
3. 자동 공격: 마법 지팡이가 가장 가까운 적을 향해 자동으로 공격합니다. 레벨업을 통해 산탄총, 마늘 오라, 수호 구체 등 추가 무기를 해금·강화할 수 있습니다. 🛡️ 방패 몬스터는 투사체에 면역이므로 오라·수호 구체 등 근접 무기가 필요합니다.
4. 레벨업: 적 처치로 경험치를 얻어 레벨이 오르면 3가지 강화 옵션 중 하나를 선택합니다. 무기는 Lv.10까지 강화 가능하며, 레벨이 올라갈수록 화력이 크게 증가합니다.
5. 아이템 드랍: 👹 중간 보스 처치 시 ⚡ 무쌍 모드(20%), 👽 원거리 몬스터 처치 시 ❤️ 체력 회복(10%), 🛡️ 방패 몬스터 처치 시 ✨ 무적(5%) 아이템이 드랍됩니다. 아이템은 10초 후 사라집니다.
6. 무쌍 모드: ⚡ 아이템 획득 시 10초간 이동 속도·공격 속도·무기 위력이 대폭 상승합니다.
7. 무적 모드: ✨ 아이템 획득 시 10초간 체력이 감소하지 않습니다(적 접촉·원거리 공격 무효).
8. 랭킹 등록: 게임 오버 후 랭킹 등록 버튼을 눌러 닉네임과 함께 점수를 제출합니다. 시작 화면·게임 오버 화면에서 TOP 10 랭킹을 확인할 수 있습니다.
9. 랭킹 초기화: Rank API에 전체 삭제 기능이 없으므로, rank.js의 RANK_BOARD_VERSION 값을 1 올리면 새 program_key로 빈 랭킹이 시작됩니다.

프로젝트 진행 상황

• [x] Canvas 2D 기반 플레이어·적·투사체 렌더링
• [x] 마법 지팡이, 산탄총, 마늘 오라, 수호 구체 무기 시스템 (Lv.10 강화)
• [x] 레벨업 카드 선택 및 경험치·레벨 시스템
• [x] 일반·원거리·원거리 면역(방패)·중간 보스(탱크) 적 유형 및 난이도 스케일링
• [x] 무쌍 모드·체력 회복 아이템 드랍 (적 유형별 확률, 시간 만료)
• [x] 한뼘코딩 Rank API 연동을 통한 온라인 랭킹 시스템
• [x] 모바일 터치·마우스 및 PC 키보드 하이브리드 조작 지원
• [x] HTML / CSS / JS 파일 분리 구조