Pixel Survivors: AI로 만든 뱀파이어 서바이버즈 스타일 HTML5 게임

순수 HTML5 + Canvas2D + WebAudio — 단 하나의 파일, 외부 라이브러리 제로

🎮

직접 코딩한 AI 게임, 여기까지 오는데 3일 걸렸다

솔직히 말하면 "AI가 게임을 만들어주는 시대라면, AI한테 뱀파이어 서바이버 클론을 만들어 달라고 해볼까?" 라는 단순한 호기심에서 시작했다. 그런데 생각보다 훨씬 많은 시행착오가 필요했다. 처음에 Claude에게 "뱀파이어 서바이버처럼 만들어줘"라고 하니 SVG로만 가득 찬, 거의 동작하지 않는 코드를 뱉어냈다. 그걸 canvas 기반으로 바꾸고, 충돌 감지를 넣고, 무기 시스템을 추가하고, 레벨업 로직을 붙이는 과정에서 직접 코드를 70% 정도는 다시 써야 했다. 특히 Canvas 2D에서의 대량 객체 충돌 감지는 CPU를 너무 잡아먹어서 Spatial Hashing으로 최적화하는 부분이 가장 까다로웠다. AI가 생성한 코드를 무조건 믿지 말고 사람이 검증해야 한다는 교훈을 몸소 체험했다. 그래도 결국 돌아가는 데모가 나왔을 때의 쾌감은 이루 말할 수 없다.

🤖 AI Generated  이 게임은 AI 코딩 어시스턴트(OpenCode)와의 협업을 통해 만들어졌습니다. 코드 생성, SVG 스프라이트 디자인, 사운드 합성까지 AI가 제안하고 사람이 다듬는 방식으로 단 몇 시간 만에 완성했습니다.

소개

🎮 게임 소개

Pixel Survivors는 뱀파이어 서바이버즈(Vampire Survivors) 스타일의 캐주얼 서바이벌 액션 게임입니다. 플레이어는 자동 공격하는 무기를 장착하고, 끝없이 몰려오는 몬스터들을 물리치며 최대한 오래 살아남아야 합니다.

레벨업할 때마다 무기와 아이템을 선택해 캐릭터를 성장시키고, 특정 조합을 맞추면 진화(Evolution)가 발동되어 훨씬 강력한 효과를 얻을 수 있습니다. 단 1개의 HTML 파일, 외부 의존성은 전혀 없습니다.

AI 개발

🤖 AI 활용 개발 과정

이 프로젝트는 AI 코딩 도구인 OpenCode를 활용하여 개발되었습니다. 사람이 요구사항과 방향성을 제시하면, AI가 구체적인 코드와 디자인을 제안하고 사람이 검증·수정하는 방식으로 반복 개발했습니다.

• 코드 생성: 게임 엔진 루프, 무기/아이템 시스템, 몬스터 AI, 충돌 처리 등 핵심 로직은 AI가 생성
• 스프라이트: 플레이어, 몬스터, 아이템 등 모든 그래픽은 인라인 SVG — AI가 디자인한 SVG 코드를 그대로 사용
• 사운드: Web Audio API로 실시간 합성 — 외부 음원 파일 없이 모든 효과음을 브라우저가 직접 생성
• UI/UX: HUD, 레벨업 카드, 메뉴, 설정 등 사용자 인터페이스도 AI가 제안한 구조에 살을 붙임
• 게임 디자인: 무기 밸런스, 몬스터 스탯, 난이도 곡선, 진화 조건 등은 사람이 직접 기획하고 테스트

AI는 반복적인 코딩 작업과 디자인 제안에 탁월했고, 사람은 게임의 재미와 밸런스에 집중할 수 있었습니다. 개발 기간은 약 4시간 정도 소요되었습니다.

게임 시스템

⚔️ 게임 시스템

🔫 무기 (6종)

🛡️ 아이템 (6종)

✨ 진화 시스템

무기를 최대 레벨(Lv.8)까지 성장시키고, 해당 무기와 짝이 되는 아이템을 보유하면 특수 진화가 가능합니다! 진화 무기는 외형이 변하고 공격 범위와 위력이 크게 증가합니다. 예: 채찍+갑옷 → 피의 채찍(체력 흡수), 단검+신발 → 천검난무(전방위), 번개+생명의부적 → 천벌(체인 라이트닝)

👾 몬스터 (7종 + 보스)

시간이 지날수록 더 다양하고 강한 몬스터가 등장합니다. 약 60초마다 등장하는 보스 몬스터는 엄청난 체력을 자랑합니다.

조작법

🎮 조작법

• WASD 또는 ↑←↓→ — 이동
• 무기는 자동 공격 — 별도의 조작 불필요
• 레벨업 시 123 — 카드 선택
• Esc 또는 P — 일시정지
• 우측 하단 속도 버튼 — 1× / 2× / 3× / 5× / 10× 배속 모드