贺中秋，前端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，里面放选择题的题目和答案以及是第几题，给4个选项都加上点击事件，主要是判断选项和答案是否一致，回答错误就会跳出提示回答错误，并且选项变成红色字体；如果回答正确就会跳出回答正确，选项变成绿色字体；不论对错，选择完后都会有一个下一题的按钮来选择跳到下一题。至此为html部分的全部思路，下面的js部分

    <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>