[Vue, VITE] 토끼와 거북이 경주게임_ 기존 코드 업그레이드 시키고 사용자 화면도 바꾸기.

 

 

원래 화면은 밤티였다.
Vue를 공부하기 위해서 만든거라 그다지 이쁘지 않았다.
이땐 프론트가 처음이었던지라 부족한 점이 많았는데
그동안 성장한 만큼 기능을 추가해서 코드를 수정해보자

 

 

 

 

1. 충격적인 밤티 기존 화면

 

다시봐도 대충격 비주얼이다. 마치 공산당에서 만든 비주얼이다. 생각해보면 토끼랑 거북이는 원래 흙에서 경주했던 것 같은데... 과거의 나는 공정성을 위해 거북이를 바다에서 경주시킨걸까?ㅋㅋㅋㅋ 사실 농담이고 이땐 그런 생각 없었다. 프론트가 신기해서 이것저것 해보는 그냥 이상한 사람이었던 것! 

아무튼 이제 포트폴리오를 작성해야해서 이 밤티 프로젝트를 넣어야하는데 이렇게 넣을 순 없을 것 같다. 비주얼 업그레이드 시키고, 기능도 개선해보겠다.

 

 

 

 

---

 

 

 

 

2. 외관 개선

• 수정 전

홈화면

게임화면

내 추억의 프로젝트가 될 것 같다. 나의 미감 현실을 알려주는...ㅋ (나름 귀여운 것 같기도 하고)

 

 

• 수정 후

홈화면

게임화면

내 미감의 한계다. 최대한 노력했다. 약간 솜사탕과 무지개떡 사이의 색감 같다 ㅋㅋㅋ 이미지는 GPT한테 만들어달라고 했다. 전에도 GPT가 만들어준건데 작년보다 올해 기능이 더 좋아져서 귀엽게 만들어줬다. (근데 놀라운건 저거 만들때 진짜 엄청 뿌듯해했음ㅋㅋㅋㅋㅋ GPT 그림 그려주는것도 만족했다는게 웃김 ㅋㅋ) 그리고 이제 거북이도 땅에서 경주한다. 억까의 인생이 시작된 셈이다. 

 

 

 

 

---

 

 

 

 

3. 라이브러리 추가

"canvas-confetti": "^1.9.4",
"gsap": "^3.15.0"

더 생동감있는 표현을 위해 라이브러리를 추가했다. (솔직히 엄청난 차이가 있진 않다)

 canvas-confetti는 승리 했을 때 폭죽 효과를 넣기 위해 추가했다. 그리고 원래 토끼와 거북이 이동을 css keyframe으로 진행했는데 gsap을 추가해서 JS 애니메이션으로 제어했다. 

 

 

 

 

---

 

 

 

4. 경주 로직 변경

• 기존 CSS keyframe 방식

data() {
  return {
    rabbitRunning: false,
    rabbitStopping: false,
    turtleRunning: false,
  }
}

거북이는 항상 일정한 속도로 달린다. 게임의 승리여부는 토끼에게 달려있는 셈이다. rabbitRunnig은 토끼가 나무에서 적당히 쉬는 버전이고 rabbitStopping은 토끼가 나무에서 많이 쉬었을 때 버전이다. 이때 이 셋의 기본 상태값을 false로 움직임이 없도록 하고, 시작 버튼을 누르면 상태값이 바뀌도록 했다.

gameStart() {
  const currentSeconds = new Date().getSeconds()

  if (currentSeconds % 2 === 0) {
    this.rabbitRunning = true
  } else {
    this.rabbitStopping = true
  }

  this.turtleRunning = true
}

현재 초를 가져와서 초를 2로 나눈다. 그리고 나머지가 0이면(짝수) 토끼가 이기도록 했다. 0이 아니면 토끼가 지도록 코드를 작성했다.

 

@keyframes rabbit-run {
  0% {
    left: -10%;
  }
  40% {
    left: 50%;
  }
  60% {
    left: 50%;
  }
  100% {
    left: 90%;
  }
}

.running-rabbit.run {
  animation: rabbit-run 5s linear forwards;
}

.running-rabbit.stop {
  animation: rabbit-run 7s linear forwards;
}

첫 시작은 왼쪽에서 -10 위치에서 시작한다. 화면상으론 그냥 왼쪽 끝에 있도록 보인다. 토끼가 중간쯤 오면 멈춘다. 이 부근이 나무가 있는 부근이다. 토끼는 60%에서 다시 움직이는데 running-rabbit.run인 경우 이 모든 진행을 5초에 끝내도록 했고 running-rabbit.stop은 7초에 끝내도록 했다.

 

@keyframes turtle-run {
  0% {
    left: -10%;
  }
  100% {
    left: 90%;
  }
}

.running-turtle.run {
  animation: turtle-run 6s linear forwards;
}

거북이 코드는 더 간단하다. 무조건 left -10에서 90까지 가는 걸 6초에 끝내도록 설정했다.

 

 

• GSAP

<img ref="rabbitEl" src="@/assets/rabbit2.png" class="runner runner-rabbit" />
<img ref="turtleEl" src="@/assets/turtle2.png" class="runner runner-turtle" />

const rabbitEl = ref(null)
const turtleEl = ref(null)

const {
  countdown,
  message,
  reset,
  running,
  start,
  winner,
} = useRaceGame({ rabbitEl, turtleEl })

토끼, 거북이 이미지에 ref를 붙이고 이 DOM 요소를 useRaceGame(js파일)에 넘겼다. 이제 애니메이션은 CSS 클래스가 아니라 JS에서 직접 실행하게 된다. 

function pickWinner() {
  const currentSeconds = new Date().getSeconds()
  return currentSeconds % 2 === 0 ? 'rabbit' : 'turtle'
}

먼저 승자를 뽑자. 로직은 처음 짠거랑 똑같다. 현재 초가 짝수면 rabbit의 승리, 홀수면 turtle의 승리이다. 

function run(nextWinner) {
    const finishX = () => window.innerWidth * 0.82

    timeline = gsap.timeline({
      defaults: {
        ease: 'power1.inOut',
      },
    })

결승선 위치는 finishX, 화면 전체 너비(window.innerWidth)에서 82% 지점을 결승선으로 설정했다. 함수 () => 형태로 작성해서 창의 크기가 변해도 항상 동적으로 맞춰지도록 했는데, 잘 될지 모르겠다. (내겐 화면이 하나이다!)

gsap.timeline( )은 여러 애니메이션을 연결해서 재생하기 위해 타임라인을 만들었다. 기본 움직임인 ease 속성값인 power1.inOut을 사용했다. 이건 나중에 gsap 라이브러리를 작성하면서 더 자세히 설명하겠다.

 

    if (nextWinner === 'rabbit') {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.42,
          y: -10,
          rotate: -4,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          y: 4,
          rotate: -8,
          duration: 0.65,
          ease: 'sine.inOut',
        })
        .to(rabbitEl.value, {
          y: -8,
          rotate: 3,
          duration: 0.3,
          ease: 'power2.out',
        })
        .to(rabbitEl.value, {
          x: finishX,
          y: -12,
          rotate: 3,
          duration: 2.2,
          ease: 'power3.out',
          onComplete: () => end('rabbit'),
        })
        .to(turtleEl.value, {
          x: () => window.innerWidth * 0.62,
          y: 5,
          duration: 5.8,
        }, 0)
    }

토끼가 이길때 코드이다. 출발하자마자 화면의 42% 지점까지 뛰어간다. 이게 2초 걸리도록 했다. 나무 부근까지 가면 멈춰서 약간의 움직임을 주었다. 살짝 몸을 흔드는 동작인데, 별 다른 의미는 없고 나름 있어보이고 싶어서 추가했다. 그리고 결승선으로 빠르게 달련간다. 이때 power3.out을 썼다. 도착하면 onComplete가 발동해서 end('rabbit') 함수를 부르고 경주가 끝난다.

거북이는 토끼와 동시에 출발하지만 5.8초동안 화면의 62% 지점까지 가도록 설정했다. 결승선에 닿지 못하고 끝난다.

 

 else {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.38,
          y: -10,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          rotate: -8,
          y: 2,
          duration: 1.1,
          ease: 'sine.inOut',
          yoyo: true,
          repeat: 1,
        })
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.68,
          y: -6,
          rotate: 2,
          duration: 2.8,
        })
        .to(turtleEl.value, {
          x: finishX,
          y: 2,
          duration: 5.7,
          ease: 'power1.out',
          onComplete: () => end('turtle'),
        }, 0)
    }
  }

거북이가 이길때 코드이다. 토끼가 화면의 38% 지점까지 간다. 아마 이 지점이 나무 부근일 것이다. 이 다음 코드에 yoyo: true가 있는데, 나무 부근에서 토끼의 움직임이 역재생되도록 한 것이다. 게임을 진행할 때 보면 토끼가 이길땐 토끼의 기울기가 한 번 움직인다. 그런데 거북이가 이길 땐 토끼의 움직임이 2번 발생한다. 이게 yoyo를 true해서 그렇다. repeat을 1로 설정해서 한번만 역재생 되도록 했다. 그다음 토끼는 다시 결승선을 향해 움직이지만 68%에서 멈추게 될 것이다.

거북이는 5.7포 동안 한결같은 걸음으로 결승선을 향해 움직인다.

 

 

 

 

---

 

 

 

5. 이긴 동물 폭죽

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

우승한 동물이 있는 위치에서 폭죽이 터지도록 좌표를 계산했다. 결승선은 화면의 88% 지점에 있다. (왼쪽을 기준으로 88%만큼 떨어져 있다는 것) 토끼가 이기면 A : B 중 A가 된다. (true면 A, false면 B) 그래서 토끼가 이기면 y축이 화면의 25%(위가 기준) 지점에서 폭죽이 터지고 토끼가 지면 거북이가 있는 부근인 72% 지점에서 터진다. 

 

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

폭죽을 이쁘게 만들었다. 이 부분은 움직임과 색상을 설정한 부분이다. particleCount는 110, 꽃가루의 개수를 의미한다. spread: 70은 꽃가루가 퍼지는 각도이다. 그리고 startVelocity는 폭죽이 처음 터져 나갈 때의 초기 속도이다. 숫자가 클수록 더 멀리 강하게 나간다. origin은 아까 위에서 계산한 승자의 좌표를 넣는 부분이다. colors는 꽃가루 색상 조합이 된다.

 

 

---

 

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

 

 

 

https://gsap.com/