使用vue3写一个小游戏
时间: 2024-05-04 12:17:22 浏览: 12
好的,我可以给你提供一个简单的示例:猜数字小游戏。
1. 在Vue3中创建一个新的组件,名为`GuessNumberGame`。
2. 在组件中定义一个响应式数据`guessNumber`,用于存储玩家猜的数字。
```
<template>
<div>
<h1>猜数字小游戏</h1>
<p>猜一个1到100的数字:</p>
<input v-model="guessNumber" type="number" />
<button @click="checkGuess">猜!</button>
<p v-if="message">{{message}}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const guessNumber = ref(null);
const message = ref('');
const checkGuess = () => {
// 随机生成一个1到100的整数
const randomNumber = Math.floor(Math.random() * 100) + 1;
if (guessNumber.value === randomNumber) {
message.value = '恭喜你,猜对了!';
} else if (guessNumber.value < randomNumber) {
message.value = '你猜小了,请再试一次。';
} else {
message.value = '你猜大了,请再试一次。';
}
};
return {
guessNumber,
message,
checkGuess
};
}
};
</script>
```
3. 在模板中添加一个输入框和一个按钮,用于让玩家输入猜测的数字,并调用`checkGuess`方法进行验证。
4. 在`checkGuess`方法中,先生成一个1到100的随机整数作为答案,然后与玩家猜测的数字进行比较,根据比较结果更新`message`的值,提示玩家猜对了还是猜错了。
5. 最后,将`guessNumber`和`message`添加到`setup`函数的返回值中,以便在模板中使用。
这是一个简单的Vue3小游戏示例,你可以根据自己的需求进行修改和扩展。