### 1. 프로젝트 설정
Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성하세요. 터미널에서 다음 명령어를 실행하여 보일러플레이트 코드를 생성합니다.
```bash
vue create mini-game
```
디렉토리로 이동한 후, 프로젝트를 시작합니다.
```bash
cd mini-game
npm run serve
```
### 2. 기본 구조 설정
`App.vue` 파일을 열고 기본 구조를 설정합니다.
```html
<template>
<div id="app">
<h1>Vue.js 타이핑 게임</h1>
<button @click="incrementScore">클릭하여 점수 얻기</button>
<p>점수: {{ score }}</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 0
};
},
methods: {
incrementScore() {
this.score++;
}
}
}
</script>
<style>
#app {
text-align: center;
margin-top: 60px;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #369973;
}
</style>
```
### 3. 점수 제한 및 초기화
임의로 일정 점수에 도달하면 점수를 초기화하는 기능을 추가합니다. 예를 들어, 10점에 도달할 때마다 점수를 초기화하겠습니다.
```javascript
methods: {
incrementScore() {
this.score++;
if (this.score >= 10) {
alert('축하합니다! 10점에 도달했습니다.');
this.score = 0;
}
}
}
```
### 4. 게임 더 풍성하게 만들기
게임에 시간 제한을 두어 더욱 긴장감을 주어 보겠습니다. 30초 타이머를 추가하여 시간이 종료되면 경고 메시지를 띄우고 점수를 초기화합니다.
```html
<p>남은 시간: {{ timeLeft }} 초</p>
```
```javascript
data() {
return {
score: 0,
timeLeft: 30
};
},
created() {
this.startTimer();
},
methods: {
startTimer() {
this.timer = setInterval(() => {
if (this.timeLeft > 0) {
this.timeLeft--;
} else {
alert('시간 종료! 게임이 끝났습니다.');
clearInterval(this.timer);
this.score = 0;
this.timeLeft = 30; // 타이머 초기화
}
}, 1000);
}
}
```
### 마무리
이제 간단한 Vue.js 타이핑 게임이 완성되었습니다. 이 게임은 기본적인 Vue.js의 기능을 활용하여 만들어졌으며, 더 복잡한 기능을 추가하여 개발할 수도 있습니다. Vue의 강력한 반응성 시스템을 활용하여 게임의 다양한 요소들을 유동적으로 조절해 보세요.