快捷導(dǎo)航

使用vue實(shí)現(xiàn)猜謎卡片游戲

更新時(shí)間：2023年09月14日 11:22:14 作者：意會(huì)

這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)簡(jiǎn)單的猜謎卡片游戲,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下

先提前祝jym ，心有嫦娥月，祝福滿滿中秋！

猜題卡片靈感來自于王者榮耀的夫子的試煉，收集了一些關(guān)于中秋節(jié)的題目做成了卡片，以選擇題的形式答題。效果圖：

第一步先畫一個(gè)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">答對(duì){{ 0 }}題</p>
      </div>
  </div>

先畫一個(gè)div里面放一張圖片，下面顯示答對(duì)題目數(shù)量

 <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">答對(duì){{ 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;">{{ "題目?jī)?nèi)容" }}</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>

再加上一個(gè)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">答對(duì){{ 0 }}題</p>
        <p class="text1">累計(jì)獎(jiǎng)勵(lì)</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;">{{ "題目?jī)?nèi)容" }}</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">回答錯(cuò)誤！</p>
    </div>
    <p class="text1" @click="xyt"> {{ "下一題" }}</p>
  </div>

最后加上一個(gè)回答正確和錯(cuò)誤的提示，以及一個(gè)按鈕，按鈕名稱為下一題，用來跳到下一題。以上為所有頁(yè)面部分

第二步寫js 我們先給每一個(gè)選項(xiàng)設(shè)置一個(gè)點(diǎn)擊事件，點(diǎn)擊時(shí)切換class的樣式，答對(duì)渲染成綠色，答錯(cuò)渲染成紅色，未答題則全是白色字體。判斷用戶選擇的答案是否為正確答案，來渲染答錯(cuò)和答對(duì)

// 0未選，1選對(duì)，2選錯(cuò)
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' // 正確答案（假設(shè)正確答案為 A）
let selectedAnswer = '' // 用戶選擇的答案（假設(shè)用戶選擇的答案為空）
let timusl=ref(1)
let onclickA = () => {
  selectedAnswer='A'
  isAnswered.value = true; // 設(shè)置已回答狀態(tài)
  if (selectedAnswer === correctAnswer) {
        isCorrectA.value = true; // 答案正確
      } else {
        isCorrectA.value = false; // 答案錯(cuò)誤
      }
  if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
    aaa.value = 1
  }
}
let onclickB = () => {
  selectedAnswer='B'
  isAnswered.value = true; // 設(shè)置已回答狀態(tài)
  if (selectedAnswer === correctAnswer) {
        isCorrectB.value = true; // 答案正確
      } else {
        isCorrectB.value = false; // 答案錯(cuò)誤
      }
  if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
    bbb.value = 1
  } 
}
let onclickC = () => {
  selectedAnswer='C'
  isAnswered.value = true; // 設(shè)置已回答狀態(tài)
  if (selectedAnswer=== correctAnswer) {
        isCorrectC.value = true; // 答案正確
      } else {
        isCorrectC.value = false; // 答案錯(cuò)誤
      }
  if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
    ccc.value = 1
  }
}
let onclickD = () => {
  selectedAnswer='D'
  isAnswered.value = true; // 設(shè)置已回答狀態(tài)
  if (selectedAnswer === correctAnswer) {
        isCorrectD.value = true; // 答案正確
      } else {
        isCorrectD.value = false; // 答案錯(cuò)誤
      }
  if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
    ddd.value = 1
  }
}
let xyt=()=>{
if(  timusl.value<=10){
  timusl.value++
}
}

最后稍微加一點(diǎn)點(diǎn)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>

就可以達(dá)到一個(gè)卡片答題的效果了，但是代碼又重又呆，我們?cè)賰?yōu)化一點(diǎn)點(diǎn)代碼，把題目循環(huán)進(jìn)去

最后的代碼如下

<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">答對(duì){{ correctCount }}題</p>
        <p class="text1">累計(jì)獎(jiǎng)勵(lì)</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">回答錯(cuò)誤！</p>
    </div>
    <div v-if="currentQuestionIndex >= 10">
      <p class="text1">恭喜回答完所有題目，您一共答對(duì){{ 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: "中秋節(jié)是從哪個(gè)朝代開始成為固定的節(jié)日？",
    options: ["唐", "宋", "元", "明"],
    correctAnswer: "A"
  },
  {
    content: "月餅最初是用來做什么的？",
    options: ["祭奉月神的貢品", "饋贈(zèng)親友的禮物", "節(jié)日食品", "地方小吃"],
    correctAnswer: "A"
  },
  {
    content: "在古代月圓和月缺一般形容什么?",
    options: ["天氣好壞", "兇吉象征", "身體是否健康", "悲歡離合"],
    correctAnswer: "D"
  },
  {
    content: "傳說中嫦娥是誰(shuí)的妻子?",
    options: ["黃帝", "后裔", "大禹", "吳剛"],
    correctAnswer: "B"
  },
  {
    content: "嫦娥下凡(打一花名)?",
    options: ["月季", "玫瑰", "牡丹", "百合"],
    correctAnswer: "A"
  },
  {
    content: "中秋過后又重陽(yáng)(打一詩(shī)句)?",
    options: ["月上柳梢頭", "明月幾時(shí)有", "一節(jié)復(fù)一節(jié)", "抬頭望明月"],
    correctAnswer: "C"
  },
  {
    content: "“解落三秋葉，能開二月花”描寫的是哪一種自然現(xiàn)象?",
    options: ["雪", "月", "風(fēng)", "霜"],
    correctAnswer: "C"
  },
  {
    content: "以下哪個(gè)不是跟中秋節(jié)有關(guān)的傳說?",
    options: ["精衛(wèi)填海", "吳剛伐桂", "玉兔搗藥", "嫦娥奔月"],
    correctAnswer: "A"
  },
  {
    content: "八月十五又稱什么節(jié)?",
    options: ["月餅節(jié)", "團(tuán)圓節(jié)", "故鄉(xiāng)節(jié)", "詩(shī)人節(jié)"],
    correctAnswer: "B"
  },
  {
    content: "在傳說中，哪位皇帝曾在中秋夢(mèng)游月宮?",
    options: ["秦始皇嬴政", "唐玄宗李隆基", "宋徽宗趙佶", "明成祖朱棣"],
    correctAnswer: "B"
  },
  // 其他題目...
];
let currentQuestionIndex = ref(1); // 當(dāng)前題目的索引
let currentQuestion = ref(questions[currentQuestionIndex.value - 1]); // 當(dāng)前題目的內(nèi)容
let selectedAnswer = ref(''); // 用戶選擇的答案
let isAnswered = ref(false); // 是否已回答
let correctCount = ref(0); // 答對(duì)的題目數(shù)量
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>

到此這篇關(guān)于使用vue實(shí)現(xiàn)猜謎卡片游戲的文章就介紹到這了,更多相關(guān)vue游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: