uniapp口语小游戏demo
时间: 2025-01-16 18:52:01 浏览: 37
### UniApp 开发的口语小游戏示例
#### 创建一个简单的单词猜谜游戏
在这个游戏中,玩家会看到一系列英文单词并尝试说出对应的中文意思。程序将判断回答是否正确,并给出相应的反馈。
```html
<template>
<view class="content">
<text>{{ currentWord.en }}</text>
<input v-model="answer" placeholder="请输入中文解释"/>
<button @click="checkAnswer">提交</button>
<!-- 显示结果 -->
<text v-if="isCorrect !== null">{{ isCorrect ? "正确!" : "错误, 正确答案是:" + currentWord.cn }}</text>
<!-- 动态样式绑定 [^2]-->
<navigator url="/pages/index/index" :class="navIndex == index ? 'active' : ''">返回首页</navigator>
</view>
</template>
<script>
export default {
data() {
return {
words: [
{ en: 'apple', cn: '苹果' },
{ en: 'banana', cn: '香蕉' }
],
currentIndex: Math.floor(Math.random() * this.words.length),
answer: '',
isCorrect: null,
navIndex: 0 // 假设这是导航索引用于动态类名绑定
};
},
computed: {
currentWord() {
return this.words[this.currentIndex];
}
},
methods: {
checkAnswer() {
const correct = this.answer.trim().toLowerCase() === this.currentWord.cn;
this.isCorrect = correct;
if (correct) {
setTimeout(() => {
this.nextQuestion();
}, 1000);
} else {
console.log('回答不正确');
}
},
nextQuestion() {
do {
this.currentIndex = Math.floor(Math.random() * this.words.length);
} while (this.currentIndex === this.currentIndex);
this.answer = '';
this.isCorrect = null;
}
}
};
</script>
<style scoped>
.active {
color: red;
}
.content {
padding: 20px;
}
/* 引入扩展库中的按钮样式 [^1] */
@import "/static/uni.css";
</style>
```
此代码片段展示了如何创建一个基本的单词猜测游戏界面以及逻辑处理方法。通过`v-model`指令实现了输入框的内容双向数据绑定;利用条件渲染特性来显示答题后的提示信息;还运用了`:class`属性实现基于状态变化而改变样式的功能。
阅读全文
相关推荐
















