Vanilla JS와 Canvas 2D 기반의 고성능 단일 파일 게임 아키텍처 설계

Context

프레임워크와 빌드 도구 없이 HTML5 Canvas API만을 활용한 초경량 브라우저 게임 구현 요구사항 발생. 최소한의 리소스로 실시간 물리 연산과 동적 시각 효과를 동시에 처리해야 하는 제약 조건 존재.

Technical Solution

• requestAnimationFrame 기반의 Game Loop 설계를 통한 물리 연산과 렌더링 동기화 구현
• Gravity Accumulator(vy += 0.58) 및 Ground Clamp 적용으로 스냅감 있는 점프 물리 체계 구축
• Score 기반의 Linear Interpolation을 통한 Sky Phase 상태 전이로 별도의 애니메이션 시스템 없이 부드러운 배경 전환 처리
• Score에 비례하여 Spawn Interval을 동적으로 감소시키는(max(38, 88 - score * 0.38)) 가변 난이도 알고리즘 설계
• Sine Offset을 활용한 천체 오브젝트의 유동적 움직임 구현으로 정적인 화면에 생동감 부여
• ASCII 인코딩 기반의 Binary String을 장애물 텍스처에 매핑하여 내러티브와 시각적 요소를 결합한 렌더링 구조 채택