[Vue,VITE] canvas-confetti 라이브러리 이용하기

 

토끼와 거북이 경주게임을 만들었다.
더 생동감 있는 표현을 위해
confetti 라이브러리 추가해서 코드를 작성해보자

 

 

 

 

1. 화면

 

 

 

---

 

 

 

 

2. 라이브러리 설치

• 프로젝트 터미널 
  

npm이면

npm install canvas-confetti

npm + typescript이면

npm install -D @types/canvas-confetti

 

 

 

---

 

 

 

 

3. 코드

• useRaceGame.js
  

import confetti from 'canvas-confetti'

설치한 라이브러리를 불러온다.

function celebrate(nextWinner) {
    const origin = nextWinner === 'rabbit'
      ? { x: 0.88, y: 0.25 }
      : { x: 0.88, y: 0.72 }

    confetti({
      particleCount: 110,
      spread: 70,
      startVelocity: 36,
      origin,
      colors: ['#d692c8', '#8caa97', '#f8d0e5', '#fbfbb4', '#ffffff'],
    })
  }

nextWinner가 rabbit인 경우 {x: 0.88 y: 0.25}가 좌표로 지정되고, rabbit이 아닌 경우(turtle인 경우){x: 0.88, y:0.72}가 된다. 이 좌표는 토끼와 거북이가 결승선에 들어간 부근을 설정한 것이다. 여기서 0.88은 화면 왼쪽 끝에서 88%만큼 떨어진 지점을 말한다. 0.25는 화면 위쪽 긑에서 25%만큼 떨어진 지점을 말한다.

confetti로 폭죽이 어떻게 보일지 정할거다. particleCount는 한 번 터질 때 나오는 꽃가루 개수이다. 110개로 적당히 풍성한 느낌을 냈다. spread는 꽃가루가 퍼지는 각도이다. 70도 각도로 부채꼴 모양으로 퍼져나간다. startVelocity는 폭죽이 처음 터져 나갈 때의 초기 속도이다. 숫자가 클수록 더 멀리, 강하게 뻗어나간다. origin은 위에서 지정한 좌표가 들어간다. colors는 꽃가루 색상 조합이다. 설정한 이미지와 맞도록 핑크와 초록을 섞었다.

 

 

 

https://www.npmjs.com/package/canvas-confetti