밝을희 클태

총 게임을 하다 보면 벽에 총알 자국이 생겼다가 시간이 지남에 따라 옅어지면서 사라지는 효과를 구현하고 싶었다.먼저 총알 자국 PNG 이미지를 준비한다. 이 이미지는 나중에 게임에서 총알 자국을 그릴 때 사용된다.이전의 총알 자국들을 기억하기 위해 bulletMarks라는 배열을 만들고, 배열 안에 총알 객체를 저장한다. 각 총알 자국 객체는 다음과 같은 속성을 가진다x, y: 총알 자국의 좌표t: 총알 자국이 생긴 시간rotate: 총알 자국을 랜덤한 각도로 회전시키기 위한 값각도는 2π 라디안(360도)으로 표현할 수 있으며, 랜덤한 각도를 만들기 위해 N (0 N N = 0.52π * 0.5 = 1π1π = 180ºN = 0.22π * 0.2 = 0.4π0.4π * 180/π = 72ºN = 0.8..

Canvas로 도라에몽을 움직이는 애니메이션을 구현하던 중, 도라에몽을 잡으면 게임이 종료되고 ‘클리어’ 표시가 나오는 기능을 추가하려고 했다. 그러나 이 과정에서 다음과 같은 문제가 발생했다문제게임 종료 조건이 충족되면 setIsSuccess(true)가 호출되어 isSuccess 상태가 true로 변경되고, Canvas를 담당하는 useEffect의 리렌더링이 발생한다.리렌더링 후 useEffect의 clean-up 함수에서 clearRect()로 Canvas를 지우도록 구현했지만, 이전 애니메이션 프레임들이 남아 있어 피격 효과와 이미지가 전부 지워지지 않아 Canvas가 멈춘 듯 보인다.원인requestAnimationFrame을 사용하여 애니메이션을 구현할 때는 브라우저 렌더링 스케줄에 따라 애..