vue随机猜数字1到100
时间: 2023-10-11 17:07:26 浏览: 54
好的,我来帮你实现一个 Vue.js 的随机猜数字游戏。首先,你需要创建一个 Vue 实例,并在模板中定义游戏的界面。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机猜数字游戏</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>随机猜数字游戏</h1>
<div v-if="!gameOver">
<p>猜一个1到100之间的数字:</p>
<input type="number" v-model.number="guess" min="1" max="100">
<button @click="checkGuess">提交</button>
<p>{{ result }}</p>
</div>
<div v-else>
<p>游戏结束!答案是{{ answer }}。</p>
<button @click="restartGame">重新开始</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
answer: Math.floor(Math.random() * 100) + 1,
guess: null,
result: '',
gameOver: false
},
methods: {
checkGuess: function() {
if (this.guess === this.answer) {
this.result = '恭喜你,猜对了!';
this.gameOver = true;
} else if (this.guess < this.answer) {
this.result = '太小了,再试试!';
} else {
this.result = '太大了,再试试!';
}
},
restartGame: function() {
this.answer = Math.floor(Math.random() * 100) + 1;
this.guess = null; this.result = '';
this.gameOver = false;
}
}
})
</script>
</body>
</html>
```
这是一个简单的随机猜数字游戏。当你输入一个数字并点击提交按钮时,程序会告诉你是猜大了、猜小了还是猜对了。当你猜对了之后,游戏结束,你可以选择重新开始游戏。
请将以上代码保存为一个 HTML 文件,并在浏览器中打开该文件,即可开始游戏。祝你玩得愉快!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)