使用vue实现猜谜卡片游戏
更新时间：2023年09月14日 11:22:14 作者：意会
这篇文章主要为大家详细介绍了如何使用vue实现简单的猜谜卡片游戏,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
先提前祝jym ，心有嫦娥月，祝福满满中秋！
猜题卡片灵感来自于王者荣耀的夫子的试炼，收集了一些关于中秋节的题目做成了卡片，以选择题的形式答题。 效果图：
第一步先画一个div
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
</div>
</div>先画一个div里面放一张图片，下面显示答对题目数量
<div class="container">
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
</div>
</div>
<div class="">
<p class="text2 timu2" style="margin-top: 30px;">第{{ timusl }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ "题目内容" }}</p>
<div class="timu">
<div :class="[isCorrectA?'text4':aaa? 'text5' :'text1', 'timu1']" @click="onclickA">A:{{ "木兰辞" }}</div>
<div :class="[isCorrectB?'text4':bbb? 'text5' :'text1', 'timu1']" @click="onclickB">B:{{ "九歌" }}</div>
</div>
<div class="timu">
<div :class="[isCorrectC?'text4':ccc? 'text5' :'text1', 'timu1']" @click="onclickC">C:{{ "八阵图" }}</div>
<div :class="[isCorrectD?'text4':ddd? 'text5' :'text1', 'timu1']" @click="onclickD">D:{{ "兰陵王破阵曲" }}</div>
</div>再加上一个div，里面放选择题的题目和答案以及是第几题
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
<p class="text1">累计奖励</p>
</div>
<div class="">
<p class="text2 timu2" style="margin-top: 30px;">第{{ timusl }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ "题目内容" }}</p>
<div class="timu">
<div :class="[isCorrectA?'text4':aaa? 'text5' :'text1', 'timu1']" @click="onclickA">A:{{ "木兰辞" }}</div>
<div :class="[isCorrectB?'text4':bbb? 'text5' :'text1', 'timu1']" @click="onclickB">B:{{ "九歌" }}</div>
</div>
<div class="timu">
<div :class="[isCorrectC?'text4':ccc? 'text5' :'text1', 'timu1']" @click="onclickC">C:{{ "八阵图" }}</div>
<div :class="[isCorrectD?'text4':ddd? 'text5' :'text1', 'timu1']" @click="onclickD">D:{{ "兰陵王破阵曲" }}</div>
</div>
</div>
</header>
<div class="result">
<p v-if="isAnswered && isCorrectA||isCorrectB||isCorrectC||isCorrectD" class="text1">回答正确！</p>
<p v-if="isAnswered && !isCorrectA&!isCorrectB&!isCorrectC&!isCorrectD" class="text1">回答错误！</p>
</div>
<p class="text1" @click="xyt"> {{ "下一题" }}</p>
</div>最后加上一个回答正确和错误的提示，以及一个按钮，按钮名称为下一题，用来跳到下一题。以上为所有页面部分
第二步写js 我们先给每一个选项设置一个点击事件，点击时切换class的样式，答对渲染成绿色，答错渲染成红色，未答题则全是白色字体。 判断用户选择的答案是否为正确答案，来渲染答错和答对
// 0未选，1选对，2选错
let aaa = ref(0)
let bbb = ref(0)
let ccc = ref(0)
let ddd = ref(0)
let isAnswered = ref(false)// 是否已回答
let isCorrectA = ref(false) // 是否回答正确
let isCorrectB = ref(false) // 是否回答正确
let isCorrectC = ref(false) // 是否回答正确
let isCorrectD = ref(false) // 是否回答正确
let correctAnswer = 'A' // 正确答案（假设正确答案为 A）
let selectedAnswer = '' // 用户选择的答案（假设用户选择的答案为空）
let timusl=ref(1)
let onclickA = () => {
selectedAnswer='A'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectA.value = true; // 答案正确
} else {
isCorrectA.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
aaa.value = 1
}
}
let onclickB = () => {
selectedAnswer='B'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectB.value = true; // 答案正确
} else {
isCorrectB.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
bbb.value = 1
}
}
let onclickC = () => {
selectedAnswer='C'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer=== correctAnswer) {
isCorrectC.value = true; // 答案正确
} else {
isCorrectC.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
ccc.value = 1
}
}
let onclickD = () => {
selectedAnswer='D'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectD.value = true; // 答案正确
} else {
isCorrectD.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
ddd.value = 1
}
}
let xyt=()=>{
if( timusl.value<=10){
timusl.value++
}
}最后稍微加一点点css
.container {
width: 700px;
height: 350px;
background-color: #21314A;
}
.text1 {
color: #fff;
font-size: small;
text-align: center;
cursor: pointer;
}
.text3 {
color: #000;
font-size: small;
text-align: center;
cursor: pointer;
}
.text4 {
color: green;
font-size: small;
text-align: center;
cursor: pointer;
}
.text5 {
color: red;
font-size: small;
text-align: center;
cursor: pointer;
}
.text2 {
color: #fff;
font-size: small;
/* text-align: center; */
}
.header {
display: flex;
margin-left: 80px;
margin-top: 20px;
}
.timu {
display: flex;
width: 300px;
text-align: center;
}
.timu1 {
width: 150px;
margin: 10px;
padding: 10px;
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color: #000000;
}
.timu2 {
margin-left: 10px;
}
</style>就可以达到一个卡片答题的效果了，但是代码又重又呆，我们再优化一点点代码，把题目循环进去
最后的代码如下
<template>
<div class="container">
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ correctCount }}题</p>
<p class="text1">累计奖励</p>
</div>
<div>
<p class="text2 timu2" style="margin-top: 30px;">第{{ currentQuestionIndex }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ currentQuestion.content }}</p>
<div class="timu">
<div :class="[isCorrect('A') ? 'text4' : selectedAnswer === 'A' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('A')">A:{{ currentQuestion.options[0] }}</div>
<div :class="[isCorrect('B') ? 'text4' : selectedAnswer === 'B' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('B')">B:{{ currentQuestion.options[1] }}</div>
</div>
<div class="timu">
<div :class="[isCorrect('C') ? 'text4' : selectedAnswer === 'C' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('C')">C:{{ currentQuestion.options[2] }}</div>
<div :class="[isCorrect('D') ? 'text4' : selectedAnswer === 'D' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('D')">D:{{ currentQuestion.options[3] }}</div>
</div>
</div>
</header>
<div class="result">
<p v-if="isAnswered && isCorrect(selectedAnswer)" class="text1">回答正确！</p>
<p v-else-if="isAnswered" class="text1">回答错误！</p>
</div>
<div v-if="currentQuestionIndex >= 10">
<p class="text1">恭喜回答完所有题目，您一共答对{{ correctCount }}题！</p>
</div>
<p class="text1" @click="nextQuestion" v-if="isAnswered && currentQuestionIndex < 10">下一题</p>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const questions = [
{
content: "中秋节是从哪个朝代开始成为固定的节日？",
options: ["唐", "宋", "元", "明"],
correctAnswer: "A"
},
{
content: "月饼最初是用来做什么的？",
options: ["祭奉月神的贡品", "馈赠亲友的礼物", "节日食品", "地方小吃"],
correctAnswer: "A"
},
{
content: "在古代月圆和月缺一般形容什么?",
options: ["天气好坏", "凶吉象征", "身体是否健康", "悲欢离合"],
correctAnswer: "D"
},
{
content: "传说中嫦娥是谁的妻子?",
options: ["黄帝", "后裔", "大禹", "吴刚"],
correctAnswer: "B"
},
{
content: "嫦娥下凡(打一花名)?",
options: ["月季", "玫瑰", "牡丹", "百合"],
correctAnswer: "A"
},
{
content: "中秋过后又重阳(打一诗句)?",
options: ["月上柳梢头", "明月几时有", "一节复一节", "抬头望明月"],
correctAnswer: "C"
},
{
content: "“解落三秋叶，能开二月花”描写的是哪一种自然现象?",
options: ["雪", "月", "风", "霜"],
correctAnswer: "C"
},
{
content: "以下哪个不是跟中秋节有关的传说?",
options: ["精卫填海", "吴刚伐桂", "玉兔捣药", "嫦娥奔月"],
correctAnswer: "A"
},
{
content: "八月十五又称什么节?",
options: ["月饼节", "团圆节", "故乡节", "诗人节"],
correctAnswer: "B"
},
{
content: "在传说中，哪位皇帝曾在中秋梦游月宫?",
options: ["秦始皇嬴政", "唐玄宗李隆基", "宋徽宗赵佶", "明成祖朱棣"],
correctAnswer: "B"
},
// 其他题目...
];
let currentQuestionIndex = ref(1); // 当前题目的索引
let currentQuestion = ref(questions[currentQuestionIndex.value - 1]); // 当前题目的内容
let selectedAnswer = ref(''); // 用户选择的答案
let isAnswered = ref(false); // 是否已回答
let correctCount = ref(0); // 答对的题目数量
const isCorrect = (option) => {
return isAnswered.value && selectedAnswer.value === option && selectedAnswer.value === currentQuestion.value.correctAnswer;
};
const selectAnswer = (option) => {
selectedAnswer.value = option;
isAnswered.value = true;
if (isCorrect(option)) {
correctCount.value++;
}
};
const nextQuestion = () => {
if (currentQuestionIndex.value < 10) {
currentQuestionIndex.value++;
currentQuestion.value = questions[currentQuestionIndex.value - 1];
selectedAnswer.value = '';
isAnswered.value = false;
}
};
</script>
<style scoped>
.container {
width: 700px;
height: 350px;
background-color: #21314A;
}
.text1 {
color: #fff;
font-size: small;
text-align: center;
cursor: pointer;
}
.text3 {
color: #000;
font-size: small;
text-align: center;
cursor: pointer;
}
.text4 {
color: green;
font-size: small;
text-align: center;
cursor: pointer;
}
.text5 {
color: red;
font-size: small;
text-align: center;
cursor: pointer;
}
.text2 {
color: #fff;
font-size: small;
/* text-align: center; */
}
.header {
display: flex;
margin-left: 80px;
margin-top: 20px;
}
.timu {
display: flex;
width: 300px;
text-align: center;
}
.timu1 {
width: 150px;
margin: 10px;
padding: 10px;
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color: #000000;
}
.timu2 {
margin-left: 10px;
}
</style>到此这篇关于使用vue实现猜谜卡片游戏的文章就介绍到这了,更多相关vue游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在用Vue开发的这几年里,我学到了很多有用的技巧,所以这篇文章主要给大家分享介绍了八个一看就觉得很棒的Vue开发技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue组件如何被其他项目引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Vue3中的setup一种是setup函数,一种是script setup,这篇文章主要给大家介绍了关于Vue3 - setup script使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解
这篇文章主要介绍了vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法,结合实例形式详细描述了中文乱码问题的原因、解决方法与相关注意事项,需要的朋友可以参考下2023-06-06
vue+vant使用图片预览功能ImagePreview的问题解决
这篇文章主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，现在在组件listcate.vue需要获取json数据，如何实现呢，下面小编给大家带来了Vue中如何获取json文件中的数据，感兴趣的朋友一起看看吧2022-09-09
本文主要介绍了Vue 项目的成功发布和部署的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了vue+canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论