이번 단원에서는 그동안 배웠던 주요 기능들을 이용해서 프로젝트를 진행했다. 주요 로직이 예전에 인턴생활을 하며 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 |
댓글