使用vue实现猜谜卡片游戏
作者：意会
这篇文章主要为大家详细介绍了如何使用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游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！