피드로 돌아가기
Dev.toFrontend
원문 읽기
Vanilla JS 120라인으로 구현한 벡터 기반 Asteroids 물리 엔진
I Built Asteroids in ~120 Lines of Vanilla JavaScript
AI 요약
Context
복잡한 물리 엔진 라이브러리 없이 단순한 수학적 모델링만으로 공간 이동과 관성을 구현하려는 시도. 불필요한 추상화를 제거하고 캔버스 API와 기초 삼각함수를 활용한 경량 게임 루프 설계 필요성 대두.
Technical Solution
- 단일 angle 변수를 통한 회전 상태 관리 및 sin/cos 함수를 이용한 방향성 벡터 도출
- 위치(position)가 아닌 속도(velocity)에 가속도를 더하는 방식으로 우주 공간의 관성 및 Momentum 구현
- 0.99의 감쇄 계수를 적용한 Space Friction 로직으로 속도 무한 증가 방지 및 제어 가능성 확보
- Toroidal Space 개념을 도입한 좌표 래핑(Wrap) 함수로 화면 경계 너머의 연속적인 이동 공간 설계
- 재귀적 구조의 spawnSmaller 로직을 통한 바위 분열 시스템 및 객체 생명주기 관리
- 프레임당 데이터 업데이트 후 렌더링하는 단순 Rule-based Game Loop 적용
실천 포인트
- 복잡한 도메인 모델링 전 기초 수학(벡터, 삼각함수)을 통한 최소 기능 구현(MVP) 가능성 검토 - 상태 변화를 직접 제어하는 대신 속도-가속도-위치로 이어지는 물리적 파이프라인 설계 고려 - 화면 경계 처리 시 조건문을 통한 좌표 보정(Wrapping) 기법 적용