[제작기] 자바스크립트로 웹 게임 만들기 #1: 왜 '총알 피하기'였나?

안녕하세요! 프론트엔드 개발자로서 사이드 프로젝트를 진행하며 겪는 고민과 해결 과정을 기록하는 블로그입니다.

첫 포스팅으로 최근 진행 중인 자바스크립트 기반 웹 게임 제작기를 연재해보려고 합니다. 단순한 기능 구현을 넘어, 개발 과정에서 마주한 기술적 도전들을 정리해 보겠습니다.

---

1. 왜 게임 개발을 선택했나?

프론트엔드 개발자에게 HTML5 Canvas와 JavaScript는 아주 강력한 도구입니다. 복잡한 UI 프레임워크에서 잠시 벗어나, 순수 로직만으로 화면의 객체를 제어하고 물리 엔진(충돌, 가속도 등)을 구현해보고 싶었습니다.

그중에서도 '총알 피하기' 장르를 선택한 이유는 명확합니다.

• 객체 관리: 화면에 뿌려지는 수많은 총알(Enemy)을 효율적으로 관리하는 로직 학습
• 충돌 감지: 원형 또는 사각형 충돌 판정 알고리즘 구현
• 최적화: requestAnimationFrame을 활용한 매끄러운 60fps 유지

---

2. 기술 스택 및 환경 설정

가장 가볍고 빠르게 결과물을 확인하기 위해 아래의 환경으로 시작했습니다.

• Language: JavaScript (ES6+)
• Rendering: HTML5 Canvas API
• Bundler: Vite (빠른 HMR을 위해 선택)

---

3. 핵심 로직: 플레이어 움직임 구현

가장 먼저 구현한 것은 키보드 입력에 따른 플레이어의 부드러운 이동입니다. 단순히 keydown 이벤트에서 좌표를 수정하면 움직임이 뚝뚝 끊기기 때문에, 키 상태를 객체에 저장하여 프레임마다 업데이트하는 방식을 사용했습니다.

const keys = {};

window.addEventListener("keydown", (e) => {
  keys[e.code] = true;
});

window.addEventListener("keyup", (e) => {
  keys[e.code] = false;
});

function update() {
  if (keys["ArrowUp"]) player.y -= player.speed;
  if (keys["ArrowDown"]) player.y += player.speed;
  // ...좌우 이동 로직 동일
}

---

4. 첫 단계를 마치며 (고민했던 점)

처음에는 단순하게 좌표만 계산하면 될 줄 알았는데, 대각선 이동 시 이동 속도가 루트 2배만큼 빨라지는 이슈가 발생하더군요. 이를 해결하기 위해 벡터 정규화 개념을 다시 공부해야 했습니다.

다음 포스팅에서는 이 대각선 이동 보정과 본격적인 총알 생성 로직에 대해 다뤄보겠습니다.

---

💡 마치며

현재 이 블로그는 애드핏 심사를 기다리고 있습니다. 앞으로 개발 지식뿐만 아니라 VSCode 확장 프로그램 제작, 웹 서비스 수익화 과정 등 실전적인 경험들을 꾸준히 공유할 예정이니 자주 방문해 주세요!

궁금한 점이나 조언이 있다면 댓글로 언제든 남겨주세요.

---

🎮 지금 바로 플레이해보기

https://bullet-hell-creator--jh2001c12.replit.app

---

---

🔗 게임이 안보이면 다음링크에서 확인하세요

https://bullet-hell-creator--jh2001c12.replit.app