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

 

 

 

 

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

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

 

 

 

 

토끼와 거북이
경주게임을
간단하게 만들어보자.

 

 

 

 

1. 환경

□ WebStrom

: HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이클립스와 같은 프론트엔드 개발에 최적화된 통합개발환경을 제공한다.

 

WebStorm

WebStorm: The JavaScript and TypeScript IDE, by JetBrains

 

 

□ Vue.js

: 사용자 인터페이스를 개발하기 위한 JavaScript 프론트엔드 프레임워크로 Evan You가 개발한 Vue.js는 최신 웹 개발 트렌드에 맞춰 경량화된 구조와 가상 돔(Virtual DOM) 기반의 성능 향상 기능을 제공한다.

 

Vue.js

Vue.js

 

 

□ Vite

: 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 툴이다. Vite는 합리적인 기본 설정을 제공한다. 프레임워크 지원이나 다른 도구와의 통합은 플러그인을 통해 가능합니다.

 

 

Vite

Vite

 

 

 

 

 

---

 

 

 

 

 

2. 어떻게 만들까?

 

□ 화면 구성

화면은 홈화면과 게임을 진행하는 게임화면으로 구성했다. 시작 버튼을 누르면 게임 화면으로 들어가지면서 바로 경주 게임이 시작되도록 구상했다.

첫번째 화면

두번째 화면

 

 

 

□ 동작 과정 구성 

초기 구상에서는 초(second)가 아니라 분(minute)을 받아오려했다. 막상 구현하니 내기 형식의 게임인데 1분 내내 같은 결과가 나오는 게 목적과 부적합하다고 느꼈다. 그래서 초로 바꿔 랜덤처럼 결과가 바뀌도록 했다.

원래 토끼가 승리하는 버전은 토끼가 쉬지 않고 달려가는 것이었다. 거북이보다 토끼가 속력이 빠르다보니, 중간에 쉬지 않고 달리면 누가 승리할지 쉽게 알 수 있는 것 같아 긴장감이 너무 없어보였다.  그래서 토기가 승리하는 버전에도 쉬는 구간을 추가하여 어떤 동물이 승리할지 마지막까지 가야 알 수 있도록 조정했다.

 

 

 

 

 

 

---

 

 

 

 

 

3. 실제 동작 장면

 

 

 

홈 화면

 

 

게임 화면

 

 

 

 

---

 

 

 

 

 

4. 깃허브

 

 

 

 

 

 

---

 

 

 

 

 

5. 작성 코드 보기_  홈화면_ HomeView.vue

<template>
  <div class="home-view">
    <img src="@/assets/winnerturtle.png" alt="이긴거북이" class="winner-turtle"/>
    <img src="@/assets/winnerrabbit.png" alt="이긴토끼" class="winner-rabbit"/>

    <div class="rabbit-container">
      <img src="../assets/speech1.png" alt="말풍선1" class="speech-bubble1"/>
      <p class="rabbit-text"> 제가 더 잘해욥! </p>
    </div>

    <div class="turtle-container">
      <img src="../assets/speech2.png" alt="말풍선2" class="speech-bubble2"/>
      <p class="turtle-text"> 나를 뽑아줘잉~ </p>
    </div>

    <div class="banner">
      <div class="banner1">
        <p class="banner-text1"> 토끼와 거북이 </p>
      </div>

      <div class="banner2">
        <img src="../assets/red.png" alt="리본" class="ribbon1"/>
        <p class="banner-text2"> 토끼와 거북이 국제대회에 오신걸 환영합니다.</p>
        <p class="banner-text3"> 이번 대회에서 토끼와 거북이 중 누가 이길지</p>
        <p class="banner-text4"> 친구들과 내기해보세요.</p>
      </div>
    </div>

    <div class="btn-container">
      <button class="main-button" @click="$router.push({ path:'/game' })"> 보러가기 </button>
    </div>

  </div>

</template>

특별한 코드는 없다. 이미지 배치만 하고, 버튼만 만든 화면이라 어려운 것도 없었다. 처음엔 요소들을 <div ></div>로 안감싸고, 가장 상위 클래스인 <div class="home-view></div>에 모든 요소들을 배치했다. 그러니 생기는 문제가, 화면의 비율이 달라질 때마다 배치해 둔 위치가 괴상하게 변경됐다는 것이다.

문제점을 찾느라, 하루종일 소비했다. 해답을 찾지 못하고 그동안 했던 프로젝트를 열었다. 다른 프로젝트 내에서도 어떤 화면은 화면 비율이 달라져도 배치가 크게 바뀌지 않았지만, 어떤 화면은 배치가 이상하게 변했다. 두 코드를 두고 차이를 찾았더니, 그제야 문제점이 보이기 시작했다.

비슷한 위치의 요소들 혹은 동떨어져 있는 요소들은 <div class></div>로 묶어줘야 위치가 다른 곳으로 가는 걸 막을 수 있었다. 또, 내가 했던 잘못된 점은 과하게 position을 사용했다는 것이다. 그래서 비슷한 위치에 있는 요소들을 상위 클래스로 묶어 상위 클래스에만 position에 "absolute"를 적용했다. 그렇게 코드를 바꾸니 화면 비율에 따라 위치가 완전히 다른 곳으로 바뀌는 것을 막을 수 있었다.

 

 

<style> 코드

.winner-rabbit {
  position: absolute;
  width: 28%;
  height: 60%;
  top: -5%;
  left: -2%;
  z-index: 10;
  transform: rotate(20deg);
  transition: transform 0.75s ease;
}
.winner-rabbit:hover {
  transform: rotate(10deg);
}

.winner-turtle {
  position: absolute;
  width: 55%;
  height: 80%;
  top: 18%;
  left: 60%;
  z-index: 10;
  transform: rotate(5deg);
  transition: transform 0.75s ease-in-out;
}
.winner-turtle:hover {
  transform: rotate(13deg);
}

토끼와 거북이 그림을 크게 배치했다. :hover로 커서를 대면 각도가 변경되는 귀여운 모션도 추가했다.

사실 대충 만들 생각이었는데, 하다 보니 욕심이... 생겼다. 3주 전에 본 가위손이 생각나서 색상도 비슷한 계열로 배치했고, 조금은 웃기고 싶기도 했고 조금은 귀여워 보이고 싶어서 나름 디자인에 신경을 썼다.(아무도 안 느낄지도)

이번 프로젝트를 하면서 또 하나 깨달은 사실은 transition의 위치이다. 나는 그동안 :hover가 붙은 클래스 내에 transition을 배치했다. 커서를 대면 움직임이 생기길 원하니, 당연히 그렇게 만들어야 하는 줄 알았다.

이렇게 만들면 커서를 댔을 때만 속도가 조절되어 움직임이 발생하고, 떼는 순간 transition은 :hover 안에 있으니 속도가 조절되지 않고 원래의 모습으로 돌아갔다. 양방향으로 속도 조절과 움직임이 발생되길 원하면, :hover가 붙은 클래스가 아닌 원래의 클래스에 transition을 배치해야 한다. 

직접 하나하나 찾아서 눌러서 하다 보니, 이렇게 넘겨짚는 부분이 생긴 것 같다. 이런 부분은 반성해야겠다. 좀 제대로 찾아보기로.

 

 

<style> 코드

.btn-container{
  position: absolute;
  width: 100%;
  height: 20%;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main-button {
  width: 20%;
  height: 38%;
  font-size: 1.7rem;
  font-weight:  bold;
  font-family: Danjo-bold-Regular;
  border:  white solid 4px;
  border-radius: 40px;
  color: #b1791c;
  background: #89f8b4;
  cursor: pointer;
  transition: background 0.4s ease, border 0.4s ease, color 0.4s ease;
}
.main-button:hover {
  background: #b1791c;
  color: #89f8b4;
  border:  white solid 7px;
}

.btn-container로 버튼을 감싼 뒤, 버튼을 만들었다. 화면 비율이 달라지면 버튼이 위로 튀어버리는 현상이 발생했는데, 이렇게 만드니 적어도 말도 안되는 곳에 버튼이 있진 않게 됐다. 

 

 

 

 

 

---

 

 

 

 

 

5. 작성 코드 보기_  홈화면_ MainView.vue

<template>
  <div class="main-view">

    <button class="game-return" @click="reload"> 다시하기 </button>
    <button class="main-return" @click="$router.push('/home')"> 메인화면 </button>
    <button class="game-start" @click="gameStart"> 시작 </button>

    <div class="rabbit-ground">
      <div class="rabbit-content">
        <img src="../assets/runrabbit.png" alt="달리는토끼" class="running-rabbit"
             :class="{run: rabbitRunning, stop: rabbitStopping}"/>
        <div class="rabbit-goalline"/>
        <img src="../assets/biggreen.png" alt="풀밭" class="rabbit-green01" />
        <img src="../assets/biggreen.png" alt="풀밭" class="rabbit-green02" />
        <img src="../assets/biggreen.png" alt="풀밭" class="rabbit-green03" />
      </div>
    </div>

    <div class="turtle-ground">
      <div class="turtle-content">
        <img src="../assets/runturtle.png" alt="달리는 거북이" class="running-turtle" :class="{run: turtleRunning}"/>
        <div class="turtle-goalline"/>
        <img src="../assets/sea.png" alt="파도"  class="turtle-sea01"/>
        <img src="../assets/sea.png" alt="파도"  class="turtle-sea02"/>
        <img src="../assets/sea.png" alt="파도"  class="turtle-sea03"/>
      </div>
    </div>

  </div>

</template>

코드를 전반적으로 설명 후, 로직이 어떻게 진행되는지 더 자세한 설명은 다음 블로그에 적어보겠다.

spring에서는 버튼을 현재 페이지 경로로 연결하면 새로고침이 됐다. 당연히 Vue에서도 그렇게 될 줄 알고 처음엔 다시하기 버튼에 @click="$router.push('/game')을 넣었다. 그런데 그냥 버튼 만들고 누른 사람 됐다. 새로고침이 안되는 걸 처음 알았다. 그래서 reload를 해줬다. methods에 window.location.reload();를 해주면 됐다.

rabbit-content를 보면 img가 있고 runnig-rabbit 클래스가 있다. 이 토끼 그림이 열심히 움직여서 결승선까지 갈 것이다. 이 토끼에게 두가지 조건이 주워진다. 현재 시간을 받아와서, 짝수이면 토끼가 결승선에 먼저 도착한다. 만약 홀수이면 토끼가 나무 아래서 너무 오래 쉬어 결승선에 늦게 도착하게 된다.

그래서 run은 덜 쉬는 로직이 들어가고, stop은 오래 쉬는 로직이 들어간다. 그리고 게임 스타트 버튼이 눌리면 현재 시각을 받아 짝수면 runningRabbit이 true가 되고, 홀수면 stoppingRabbit이 true가 된다. 

거북이는 언제나 같은 속도로 열심히 걸어간다. 🐢🐢🐢

 

 

<style> 코드

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

.running-rabbit{
  position: fixed;
  top: 9%;
  left: -10px;
  width:20%;
  z-index: 7;
}
.running-rabbit.run{
  animation: rabbit-run 5s linear forwards;
}
.running-rabbit.stop {
  animation: rabbit-run 7s ease-in-out forwards;
}


@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;
}

 

 

animation

: 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 떄문에 더 정밀한 효과를 구현 가능하다.

 

@keyframs

: animation의 속성과 중간 상태를 정의할 수 있다.

 

처음에는 transition으로 구상할 생각이었다. 처음부터 transition 공부하다 만들어보고 싶어진 프로젝트였다. 그런데 transition을 사용하니, 움직임이 끝나면 다시 원래 자리로 돌아갔다. 전에 vue 공식 문서에 animation을 봤던게 기억나 animation을 이용하여 코드를 작성했다.

@keyframs로 rabbit이 움직일 거리를 설정했다. 토끼가 결승전에 먼저 골인하는 시간은 5초로 잡았고, 골인하지 못하는 시간은 7초로 잡았다. @keyframs의 진행률은 설정한 시간을 비율로 맞춰지는 듯 하다. 애니메이션 위치가 마지막 위치에 유지되도록 forwards를 붙였다.

 

 

<script>
import {ref} from "vue";

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

export default {
  name: 'MainView',
  data() {
    return {
      rabbitRunning: false,
      rabbitStopping: false,
      turtleRunning: false,
    }
  },
  methods: {
    gameStart() {
      if(currentSeconds.value % 2 === 0) {
        this.rabbitRunning = true;
      } else  {
        this.rabbitStopping = true;
      }
      this.turtleRunning = true;
    },
    reload() {
      window.location.reload();
    }
  }
}

</script>

초를 가져온 후 methods에서 해당 초가 짝수이면 rabbitRunning이 true가 되도록 했다. 그리고 0으로 떨어지지 않은 나머지 값은 rabbitStopping이 true가 되도록 했다. 거북이는 언제나 gameStrat가 눌리면 달리도록 했다.

 

 

 

 

---