React와 Canvas로 만든 Minion 바나나 캐치 게임 튜토리얼

이 튜토리얼은 Create React App과 TypeScript를 활용해 HTML5 Canvas API로 렌더링하는 간단한 브라우저 게임을 만드는 방법을 소개한다. 게임에서는 키보드 입력(A/D 또는 방향키)으로 Minion 캐릭터를 조작해 떨어지는 바나나를 잡는다.

게임 메커니즘

게임 캔버스는 600x600 픽셀로 설정된다. 주요 구성 상수는 다음과 같다.

• Minion 속도: 좌우 이동 모두 프레임당 6픽셀.
• 바나나 가속도: 프레임당 0.02단위로 시간이 지날수록 더 빠르게 떨어짐.
• 생성 주기: 500밀리초마다 새로운 바나나 생성.
• 점수: 바나나 하나를 잡을 때마다 50점 획득.

기술 구현

핵심 로직은 게임 루프에서 캔버스 지우기, 위치 업데이트, 이미지 그리기를 처리하기 위해 requestAnimationFrame을 사용한다. 충돌 감지는 Minion과 바나나의 교차 여부를 확인하는 축 정렬 경계 상자(AABB) 검사로 수행한다. React 상태는 게임 상태(재생/일시정지/중지)와 점수를 관리하는 데 사용되며, refs는 캔버스 참조와 변경 가능한 게임 객체 위치를 관리해 성능을 최적화한다.