请用uniapp代码写一个文字小游戏
时间: 2023-08-12 21:05:06 浏览: 80
好的,以下是一个简单的文字小游戏,使用 Uniapp 实现。
1. 在 pages 目录下创建一个名为 game 的页面,包含一个文本输入框和一个按钮。
```
<template>
<view class="container">
<input class="input" v-model="inputText" placeholder="请输入一个单词">
<button class="button" @click="checkWord">检查</button>
<view class="result">{{ resultText }}</view>
</view>
</template>
<script>
export default {
data() {
return {
inputText: '',
resultText: ''
}
},
methods: {
checkWord() {
const word = this.inputText.toLowerCase();
if (word === 'hello') {
this.resultText = '恭喜你,答对了!';
} else {
this.resultText = '很抱歉,答错了,请再试一次。';
}
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input {
width: 80%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.button {
background-color: #409EFF;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #f00;
}
</style>
```
2. 在 pages.json 文件中添加游戏页面的配置:
```
{
"pages": [
{
"path": "pages/game/game",
"style": {
"navigationBarTitleText": "文字小游戏"
}
}
],
"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Uniapp 文字小游戏",
"navigationBarTextStyle": "black"
}
}
```
3. 运行项目,在首页添加一个按钮,点击跳转到游戏页面:
```
<template>
<view class="container">
<button class="button" @click="gotoGame">开始游戏</button>
</view>
</template>
<script>
export default {
methods: {
gotoGame() {
uni.navigateTo({
url: '/pages/game/game'
});
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
background-color: #409EFF;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
}
</style>
```
以上就是一个简单的文字小游戏的 Uniapp 实现,希望对你有帮助!