基于vue2写一个简单的游戏代码
时间: 2024-05-04 18:20:01 浏览: 100
好的,我可以给你提供一个简单的“猜数字”游戏代码,基于Vue2实现。
首先,你需要一个Vue实例:
```html
<div id="app">
<h1>猜数字游戏</h1>
<div v-if="!gameOver">
<label>请输入一个数字(1-100):</label>
<input v-model="guess" type="number" min="1" max="100">
<button @click="checkGuess">猜!</button>
<p v-if="message">{{ message }}</p>
</div>
<div v-else>
<p>恭喜你猜对了!</p>
<button @click="resetGame">再玩一次?</button>
</div>
</div>
```
然后,你需要在Vue实例中定义data、methods等属性和方法:
```javascript
new Vue({
el: '#app',
data: {
answer: Math.floor(Math.random() * 100) + 1,
guess: null,
message: '',
gameOver: false
},
methods: {
checkGuess: function() {
if (this.guess === this.answer) {
this.message = '恭喜你猜对了!';
this.gameOver = true;
} else if (this.guess < this.answer) {
this.message = '你猜小了,请再试一次。';
} else {
this.message = '你猜大了,请再试一次。';
}
},
resetGame: function() {
this.answer = Math.floor(Math.random() * 100) + 1;
this.guess = null;
this.message = '';
this.gameOver = false;
}
}
})
```
这个代码实现了一个简单的“猜数字”游戏,当你猜对数字时,会显示一个恭喜信息,并提供一个“再玩一次”的按钮来重新开始游戏。当你猜错时,会显示一个提示信息,告诉你你猜的数字是大了还是小了。
阅读全文