피드로 돌아가기
Dev.toFrontend
원문 읽기
외부 라이브러리 없이 HTML5 Canvas와 Web Audio API로 구현한 저지연 리플렉스 게임
Sushi Striker A World Cup Sushi Goalkeeper Game for the June Solstice Game Jam
AI 요약
Context
프레임워크나 게임 엔진 없이 순수 웹 표준 API만으로 브라우저 기반 게임을 구현해야 하는 제약 상황. 다양한 디바이스 환경에서 일관된 렌더링 성능과 오디오 재생 보장 및 프레임레이트 독립적인 물리 연산 체계 구축이 핵심 과제임.
Technical Solution
- Delta-time 기반 이동 로직 설계를 통한 디바이스별 프레임레이트 편차 제거 및 일관된 게임 속도 유지
- Canvas shape primitives를 활용한 절차적 그래픽 렌더링으로 이미지 파일 로딩 오버헤드 제거 및 OS 간 렌더링 일관성 확보
- Web Audio API의 Oscillator와 Gain Node를 이용한 합성음 생성 및 try/catch 래핑을 통한 오디오 런타임 에러의 메인 루프 전파 차단
- 배열의 splice 대신 dead flag를 사용하는 객체 관리 전략을 통해 루프 내 인덱스 변형으로 인한 런타임 버그 방지
- 사용자 제스처 기반의 AudioContext 생성 시점 제어를 통한 브라우저 Autoplay 정책 준수
- 레이아웃 확정 후 setTimeout을 통한 Canvas 크기 고정으로 런타임 리사이징에 따른 렌더링 이슈 원천 차단
실천 포인트
- 게임 루프 구현 시 하드웨어 성능에 무관한 경험을 위해 Delta-time 기반의 물리 연산을 적용할 것 - 외부 리소스 의존성을 줄이기 위해 단순 도형의 조합인 절차적 렌더링(Procedural Rendering) 검토 - 오디오 모듈처럼 실패 가능성이 높은 서브 시스템은 메인 실행 루프와 격리하여 시스템 전체의 가용성 확보 - 동적 배열 수정 시 발생할 수 있는 인덱스 오류를 방지하기 위해 상태 플래그(Dead Flag) 방식의 객체 제거 패턴 활용