60라인 JS로 구현한 60 FPS Game Loop 기반 Pong 시스템 설계

Context

복잡한 게임 엔진 없이 브라우저 환경에서 동작하는 최소 단위의 아케이드 게임 아키텍처 설계 필요. 상태 관리의 오버헤드를 줄이고 프레임 드랍 없는 실시간 렌더링 구현에 집중.

Technical Solution

• 16ms 간격의 setInterval을 활용하여 State Update와 Repaint를 분리한 Game Loop 패턴 적용
• 객체 지향 설계를 배제하고 5개의 Primitive Number로 게임 전체 상태를 정의하여 메모리 효율 극대화
• Keydown 이벤트 핸들러 내 직접 이동 로직을 배제하고 Key Map Polling 방식을 통한 Frame-rate 동기화 구현
• 패들 충돌 시 속도 5% 증가 및 충돌 지점에 따른 반사각 계산 로직으로 게임의 동적 난이도 조절
• CPU 상대의 Jitter 현상을 방지하기 위해 ±5px의 Deadband를 적용한 타겟 추적 알고리즘 설계