Vue.js를 이용한 '몬스터 슬레이어' 게임 만들기 후기

2024. 6. 19. 16:59·Front end/Vue.js

이번 단원에서는 그동안 배웠던 주요 기능들을 이용해서 프로젝트를 진행했다. 주요 로직이 예전에 인턴생활을 하며 Java로 만들었던 RPG 게임과 유사해서 쉽게 만들 수 있었다.

 

게임의 내용은 닌텐도 포켓몬스터 게임처럼 턴제 게임이며 공격, 스킬, 힐 등 다양한 기능을 사용할 수 있게 제작되었다.


주요 기능은 다음과 같고, 스킬은 3턴에 한 번만 사용 가능하다. 

 

객체의 속성 부분에는 Data 를 이용해 체력, 턴, 우승자 등을 선언했고, computed에서는 스타일이나 html에 들어가 있을법한 연산을 넣었다. 

 

나머지 기능은 메서드에서 구현했으며, watch를 이용해 현재 체력을 감시해 0이 되었을 때 승자를 반환하는 코드도 작성했다. 

 

게임의 전체적인 흐름은 몬스터와 플레이어가 한 턴씩 공격하고, 그로 인한 승패를 결정하는 구조이다.

느낀 점

코드를 작성하며 크게 어려운 점은 없었고, methods와 computed의 차이점을 이론적으로는 알고 있었지만 실제로 어떨 때 사용하는지는 헷갈렸었다.

 

이 부분에 대해서는 다시 한 번 실습을 통해 정확히 짚고 넘어갈 수 있었다. 또한, watch의 사용에 대해서도 이전보다 확실히 이해할 수 있었던 것 같다. 

반응형
저작자표시 (새창열림)

'Front end > Vue.js' 카테고리의 다른 글

v-if와 v-for  (2) 2024.06.15
computed와 watch  (0) 2024.06.15
Vue를 이용한 DOM 상호작용  (0) 2024.05.18
Vue 시작하기  (0) 2024.05.18
'Front end/Vue.js' 카테고리의 다른 글
  • v-if와 v-for
  • computed와 watch
  • Vue를 이용한 DOM 상호작용
  • Vue 시작하기
re-hwi
re-hwi
재휘의 개발일기
    반응형
  • re-hwi
    Dvelopment blog
    re-hwi
  • 전체
    오늘
    어제
    • 재휘의 개발일기 (167)
      • 개발 (25)
        • 소프트웨어 공학 (25)
      • Python (18)
        • numpy (8)
      • OS (23)
        • 쉽게 배우는 운영체제 (23)
      • Front end (1)
        • HTML (6)
        • CSS (9)
        • JavaScript (18)
        • React (2)
        • Vue.js (5)
        • TypeScript (5)
        • Sass (3)
      • Algorithm (1)
        • 파이썬 알고리즘 인터뷰 (2)
        • 자료구조와 함께 배우는 알고리즘 (20)
      • Android (2)
        • 안드로이드 앱 프로그래밍 with 코틀린 (2)
      • Project (15)
      • Network (0)
      • etc (12)
        • 이것저것 (10)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    컴포넌트
    numpy
    개발
    vue
    타입스크립트
    정처기
    티스토리챌린지
    자료흐름도
    뷰
    파이썬
    자료구조
    표
    플레이리스트
    알고리즘
    프론트엔드
    sass
    CSS
    TS
    오블완
    연결리스트
    HTML
    FE
    pwa
    JavaScript
    scss
    REACT
    정보처리기사
    typeScript
    리액트
    js
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
re-hwi
Vue.js를 이용한 '몬스터 슬레이어' 게임 만들기 후기
상단으로

티스토리툴바