Canvas API와 수학적 트릭으로 구현하는 고성능 브라우저 게임 설계

Context

별도의 엔진 설치 없이 브라우저에서 즉시 실행 가능한 게임 환경 필요. 프레임워크 의존성을 제거한 가벼운 런타임 구조 지향. 기기별 성능 차이로 인한 게임 속도 불일치 문제 해결 필요.

Technical Solution

• requestAnimationFrame 기반의 게임 루프와 deltaTime 변수를 활용한 기기 독립적 프레임 제어 설계
• 배경 레이어별 이동 속도를 다르게 설정하여 깊이감을 구현하는 Parallax Scrolling 기법 적용
• 재귀 함수와 Math.random()을 조합하여 매번 다른 형태의 유기적 나무를 생성하는 Procedural Generation 로직 구현
• 메모리 효율을 위해 화면 밖으로 나간 오브젝트를 반대편으로 재배치하는 Object Recycling 전략 채택
• lerp(Linear Interpolation)를 통한 캐릭터 수직 이동 보정으로 부드러운 움직임 구현
• AABB(Axis-Aligned Bounding Boxes) 충돌 감지 로직에 20%의 히트박스 여유분을 두어 사용자 경험 개선

Key Takeaway

복잡한 물리 엔진 없이 단순한 수학적 보간과 시각적 트릭만으로도 충분한 몰입감을 주는 게임 루프 설계 가능. 기능 구현보다 'Game Feel'을 결정짓는 폴리싱 작업의 중요성 확인.