[Vue.js] animation과 @keyframs로 토끼와 거북이 경주게임 만들기.

 

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

 

 

[ 토끼와 거북이 경주게임 ]

[Vue.js] Vue.js를 이용하여 간단한 토끼와 거북이 경주게임 만들기.

 

 

---

 

 

 

 

 

1. 동작과정구성

토끼는 조건을 가진다. 짝수가 나오면 토끼의 행동 시간이 짧아지고, 홀수가 나오면 토끼의 행동 시간이 길어진다. 거북이는 조건 없이 항상 같은 속도로 달린다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

2. animation과 transition

animation과 transition 둘 다 동작,효과 등 움직임을 나타낼 때 쓴다. 하지만 이번 프로젝트에서 토끼와 거북이의 움직임은 transition이 아닌 animation으로 나타냈다. 

 

animation은 좀 더 복잡한 움직임을 나타낼 때 사용하기 좋다. 반대로 transition은 단순한 움직일 때 사용하기 좋다.

.game-start{
  position: absolute;
  top: 45%;
  left: 80%;
  width: 9%;
  height: 14%;
  transform: rotate(24deg);
  background: rgba(192, 240, 248, 0.75);
  border:  5px solid white;
  border-radius:  100px;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: Danjo-bold-Regular;
  text-align: center;
  z-index: 15;
  cursor: pointer;
  transition: width 2s ease, height 2s ease, background 2s ease, transform 2s ease;
}
.game-start:hover{
  width: 10%;
  height: 15%;
  background: rgba(244, 234, 110, 0.63);
  transform: rotate(30deg);
}

 

 

마우스를 버튼 위에 대면 색상이 변하도록 하는 부분은 transition을 이용했다. 보통 transition은 시작 상태와 끝 상태만 정의하기에 단순한 변화에 더 용이하다.

 

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

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

 

하지만 단계별로 움직임을 설정하고 싶은 경우, @keyframs를 사용할 수 있는 animation이 더 효율적인 듯 하다. animation은 코드에 forwards를 추가하면 마지막 동작을 유지시킬 수 있다. transition도 클래스를 만들거나 JS를 이용하여 마지막 동작이 유지되도록 만들 수 있긴 하지만 animation보다 좀 더 복잡한 걸 느낄 수 있다. 

 

 

 

 

 

---

 

 

 

 

 

3. animation과 @keyframs

 

animation

: 요소의 스타일을 시간에 따라 변화시키는 기능으로, 여러 개의 중간 단계를 설정하여 지정한 시간 동안 자동으로 재생된다.

 

@keyframs

: 애니메이션의 단계별 스타일 변화를 정의하는 CSS 규칙으로 0%에서 100%까지의 비율로 상태를 지정한다.

 

 

<style> 코드

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

<style> 코드 
토끼 이미지

.running-rabbit{
  position: absolute;
  top: 17%;
  left: -10px;
  width:20%;
  z-index: 10;
}

running-rabbit은 토끼 이미지로 시작 지점이 -10px가 된다. @keyframs에서 진행률 0%일 때 처음 토끼 이미지를 배치한 시점이 된다. 그리고 진행률이 40%가 되면 왼쪽 50% 지점까지 가게된다. 그리고 진행률 60%일 땐, 여전히 50% 지점으로 토끼가 쉬는 구간이 된다. 마침내 진행률이 100%가 되면 토끼가 결승선에 도착한다.

그럼 이 진행률의 빠르기는 후에 설정한 시간에 따라 달라진다. 

 

 

<style> 코드

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

<template> 코드

<img src="../assets/runrabbit.png" alt="달리는토끼" class="running-rabbit"
             :class="{run: rabbitRunning, stop: rabbitStopping}"/>

run이면 토끼가 승리하고, stop이면 토끼가 진다. 그래서 run은 @keyframs가 5초 동안 진행되고, stop은 @keyframs가 7초 동안 진행된다. 토끼가 멈춰서 머무르는 구간은 똑같이 존재하지만, @keyframs가 진행되는 시간 자체가 다르니 stop일 때 천천히 달리고 좀 더 쉬다가 결승선에 도착하게 된다.

 

 

<script> 코드

import {ref} from "vue";

const currentSeconds = ref(new Date().getSeconds());

ref는 Vue3에서 반응성 데이터를 만들 때 사용하는 함수이다. 여기서 반응성 데이터를 내가 이해한만큼 적어보려한다. (제대로 이해했는지 모르겠다) 시작하기 버튼을 누르면 그때의 값에 맞춰 어떤 화면을 그릴 것이다. (예로 짝수의 값을 받아 토끼가 이기는 화면) 그런데 새로운 값이 들어오면 그거에 맞춰 새로운 화면을 보여주는 것(이번에는 거북이가 이기는 화면)처럼 어떤 상황에 따라 화면을 다시 그리는게 반응성 데이터인 듯 하다. 아래 공식문서 설명을 적어두겠다.

ref( )는 Vue가 내부에서 Proxy로 감싸 값이 변경되면 화면이 자동으로 렌더링되도록 해준다. 그리고 const를 넣은 이유는 currentSeconds의 값이 재할당되는 걸 막기 위함이다. 하지만 개인 프로젝트라서 let을 써도 상관은 없을 듯 하다.

시작하기 버튼을 누르면 Date( ).getSeconds로 초를 가져와 currendSeconds에 저장한다. 이때 Date( ) 포멧은 자바스크립트에서 지원하는 문법이다. const와 let도 그렇다. 

한가지 궁금한 점은, 자바스크립트로 들고 온 getSeconds를 Vue 화면에 보여주기 위해 ref를 사용한 이유도 있는지이다. 처음엔vue로 만드는 부분을 찾아봤는데 ref를 사용하지 않는 코드들이 있었다. 그래서 이런 궁금증이 생겼다.  - 찾아도 안나오길래 GPT에게 물었더니, 변형된 값을 화면에 보여줄때 ref를 사용하는거라고 했다.

출처: https://vueuse.org/shared/useDateFormat/#usedateformat

 

 

<script> 코드

export default {
  name: 'MainView',
  data() {
    return {
      rabbitRunning: false,
      rabbitStopping: false,
      turtleRunning: false,
    }
  },

<template> 코드

<img src="../assets/runrabbit.png" alt="달리는토끼" class="running-rabbit"
             :class="{run: rabbitRunning, stop: rabbitStopping}"/>

rabbitRunning은 5초 동안 진행되어 토끼가 결승선에 먼저 도착하는 코드가 되고, rabbitStopping은 7초 동안 진행되어 거북이가 먼저 도착하는 코드가 된다. 이 데이터들은 모두 초기값이 false로 설정했다.

 

 

<script> 코드

methods: {
    gameStart() {
      const currentSeconds = ref(new Date().getSeconds());
      if(currentSeconds.value % 2 === 0) {
        this.rabbitRunning = true;
      } else  {
        this.rabbitStopping = true;
      }
      this.turtleRunning = true;
    },
    reload() {
      window.location.reload();
    }
  }

<template> 코드

<button class="game-start" @click="gameStart"> 시작 </button>

gameStart 메서드는 시작 버튼이 눌리면 진행된다. 현재 초를 받아와 2로 나눈 나머지 값이 0이 되면 토끼의 달리기가 rabbitRunning이 true가 되어 토끼는 5초 동안 움직일 것이다. 그 외 나머지 값은 rabbitStopping이 true가 되어 토끼의 움직임이 7초 동안 움직일 것이다. 

거북이는 시작 버튼이 눌리면 turtleRunning이 true가 된다.

 

 

<style> 코드

@keyframes turtle-run {
  0% {
    left: -10%;
  }
  100% {
    left: 90%;
  }
}
.running-turtle{
  position: absolute;
  bottom: 3.5%;
  left: -10px;
  width:20%;
  z-index: 7;
}
.running-turtle.run {
  animation: turtle-run 6s linear forwards;
}

거북이 코드는 아주 간단하다. 시작 버튼이 눌리면 일정한 속도로 6초 동안 -10%부터 90%까지 열심히 달려가면 된다.

 

 

 

---

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

 

---

 

 

- ref

Vue.js

 

 

- ref

Vue3 ref, reactive 사용법

 

 

- date

[Vue.js] dayJs 로 날짜 데이터 조작 및 Vue.js 간단 예제

 

 

- clock

Animated Digital Clock with Vue 3 | Matt Fletcher - Full Stack Developer Based in Hampshire, UK

 

 

- date

[Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기

 

 

- ref

Vue.js

 

 

https://sweets1327.tistory.com/63

자바스크립트 Date()와 포맷 변환(yyyy-mm-dd)