프론트엔드
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
두줄요약
React와 TypeScript로 캔버스 기반 바나나 먹기 게임을 구현했습니다. 이미지 로딩, 키보드 이동, 낙하·충돌 판정, 애니메이션 정리 과정을 설명합니다.
구조와 흐름
- Create React App·TypeScript 기반 React 캔버스 게임 구성
useRef기반 이미지·좌표·키 입력·바나나 가속도 상태 관리requestAnimationFrame렌더링 루프와setInterval바나나 생성 루프 결합
핵심 내용
- 비동기 이미지 로드 후 미니언 초기 위치와 바나나 크기 저장
- 키보드 입력에 따른 좌우 이동 및 캔버스 경계 제한
- 랜덤 위치 바나나 낙하, 프레임별 가속도 증가, 사각형 좌표 기반 충돌 판정
주의할 점
- 매 프레임
clearRect호출로 이전 위치의 잔상 제거 useEffect정리 함수에서 키보드 이벤트·타이머·애니메이션 프레임 해제
적용해볼 점
- 플레이·일시정지·정지 상태와 점수 상태를 React 상태로 분리
- 획득·화면 이탈 바나나 제거 시 좌표 배열과 가속도 배열 동시 갱신
