1. 폭죽이 서서히 없어지게 하기

일단 애니메이션이 한 번 실행되면 cancel될때까지 1초에 60번 실행된다. 따라서 서서히 없애려면 explode 안에 num이라는 변수를 만들고 실행될때마다 추가되도록 한다. 그럼 num이 100단위로 커질때 마다 폭죽 array안에 있는 스파크를 하나씩 줄이면 되지 않을까? 라는 생각을 했다.

fireworks.js

let num = 0;

function explode() {
  num++;

  switch (num) {
    case 100:
      fireworks.length = 8;
      break;
    case 250:
      fireworks.length = 5;
      break;
    case 300:
      fireworks.length = 3;
      break;
    case 350:
      fireworks.length = 1;
      break;
    case 400:
      fireworks.length = 0;
      break;
  }
}

완성!
그리고 애니메이션을 취소하려면 어떻게 해야할까? explode안에 있는 animation을 전역변수에 담고 explode밖에서 cancelanimation함수에다가 그 변수를 넣으면 된다는 것을 발견했다.

그럼 이제 거의 다 되었다. 그럼 전의 글에서 짰던 로직대로 실제 구현해보자

2. 폭죽 로직 구현

fireworks.js

var fireworkId;
function explode() {
  fireworkId = window.requestAnimationFrame(explode);
}

export default function startFireworks() {
  canvas.style.zIndex = 2;
  makeFireworks();
  fireworkId = window.requestAnimationFrame(explode);
  setTimeout(stop, 7000);
  console.log("startfire");
}

function stop() {
  window.cancelAnimationFrame(fireworkId);
  canvas.style.zIndex = -3;
}

시간이 지나면서 폭죽의 갯수는 줄어든다. 그게 대략 7초정도 걸린다. 따라서 setTimeout으로 7초뒤에 애니메이션을 종료하도록 했다.
그리고 startFireworks()를 recordToggle.js 안에서 new record / first record 안에다가 추가해주면 완성된다!

정말 너무너무 뿌듯하고 희열이 폭죽처럼 터진다. 감개무량하다. 결국 뚫어냈다. 나 자신을 믿을 수 있다. 이게 코딩을 하는 이유중 하나라고 생각한다.
구현하면서도 지적 호기심이 충족되면서 재밌었고 모든 버그를 해결하고 다 완성했을때의 성취감도 매우 크다. 천직인가보다 ㅋㅋㅋ

carrot-game-advanced