第十六届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组

持续更新中......

第一题：元素周期表

/* TODO 待补充代码 Start*/

.container .table {
  /* 请使用 flex布局，使元素周期表中的 18 列元素横向排列。 */
  display: flex;
}

.container .table .interval1 {
  /* 请使用 var、calc 函数设置第2、13～17列元素（class=interval1）的 margin-top 为 1 个元素的高度 */
  margin-top: var(--interval);
}

.container .table .interval3 {
  /* 设置第3～12列元素（class=interval3）的 margin-top 为 3 个元素的高度。 */
  margin-top: calc(var(--interval) * 3);
}

/* TODO End */

第二题：每日签到

// TODO:请补充代码
// 为每日签到按钮（id="sign_in_btn"）绑定一个点击事件
signInBtn.addEventListener("click", () => {
  //   let currentAllDate = new Date().toISOString().split("T")[0];  2024-11-23
  let currentDate = new Date().getDate();
  let paragraphs = daysBox.querySelectorAll("p");
  let foundFlag = false;
  //   实现在天数元素（id="days"）下，为当前系统时间的日期相同的 p 标签添加一个 active 类，表示签到成功
  for (let i = 0; i < paragraphs.length; i++) {
    if (paragraphs[i].textContent == currentDate) {
      paragraphs[i].classList.add("active");
      foundFlag = true;
      break;
    }
  }
  //   为每日签到按钮（id="sign_in_btn"）添加一个 no-active 类，表示按钮不可用，并将提示文字改为：明天也要记得来哦
  if (foundFlag) {
    signInBtn.classList.add("no-active");
    signInBtn.innerHTML = "明天也要记得来哦";
  }
});

第三题：你还在等我吗

class Storage {
  constructor() {
    this.storage = window.localStorage;
  }
 
  setItem(key, value, expired) {
    // TODO 待补充代码
    window.localStorage.setItem(key, value);
    setTimeout(() => {
      delete window.localStorage[key];
    }, expired);
  }
 
  getItem(key) {
    // TODO 待补充代码
    return window.localStorage[key] || null;
  }
 
  removeItem(key) {
    // TODO  待补充代码
   setbox.textContent = "";
   getbox.textContent = "";
   delete window.localStorage[key];
 }
}
 
const storage = new Storage();
 
// 为了检测时使用，请勿删除
if (window) {
  window.storage = storage;
}

第四题：地址识别

function parseContactInfo(text) {
  // TODO: 请补充代码

  // 定义正则表达式
  let nameRegex = /[\u4e00-\u9fa5]{2,4}/;
  let phoneRegex = /\d{11}/;
  let addressRegex = /^[\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9]{3,}$/;
  // 分割输入文本
  let parts = text.split(" ");
  // 初始化结果对象
  const result = {
    name: "",
    phone: "",
    address: "",
  };
  // 遍历每个部分，尝试匹配
  parts.forEach((part) => {
    if (part.length >= 2 && part.length < 4 && nameRegex.test(part)) {
      result.name = part;
    } else if (part.length == 11 && phoneRegex.test(part)) {
      result.phone = part;
    } else if (part.length >= 4 && addressRegex.test(part)) {
      result.address = part;
    }
  });
  return result;
}

第五题：文本自动生成器

/**
 * 组合多个中间件函数，形成一个新的中间件函数。
 * @param {...Function} middlewares - 要组合的中间件函数。
 * @return {Function} - 组合后的中间件函数。
 */
function compose(...middlewares) {
  // TODO : 待补充代码

  // 返回一个新的中间件函数
  return function (initialValue, callback) {
    // 定义一个递归函数来依次执行中间件
    const dispatch = (index, value) => {
      // 如果已经到达最后一个中间件，则执行 callback
      if (index === middlewares.length) {
        return callback(value);
      }
      // 获取当前中间件函数
      const middleware = middlewares[index];
      // 调用当前中间件函数，并传递当前值和下一个中间件函数
      middleware(value, (nextValue) => {
        dispatch(index + 1, nextValue);
      });
    };
    // 开始执行第一个中间件函数
    dispatch(0, initialValue);
  };
}

第六题：静态文件服务

const fs = require("fs");
const path = require("path");

// 根据文件扩展名返回相应的 MIME 类型
function getContentType(filePath) {
  const ext = path.extname(filePath).toLowerCase();
  const contentTypeMap = {
    ".html": "text/html",
    ".css": "text/css",
    ".js": "application/javascript",
    ".png": "image/png",
    // 在这里添加其他文件类型及其对应的 MIME 类型
  };
  return contentTypeMap[ext] || "application/octet-stream";
}

// 递归遍历目录并生成文件映射表
function generateStaticFilesMap(dir) {
  // 初始化文件映射表
  const fileMap = {};

  // 定义一个辅助函数来遍历目录
  function traverseDir(currentDirPath) {
    // 读取当前目录中的所有文件和子目录
    const entries = fs.readdirSync(currentDirPath);
    // 遍历每个条目
    entries.forEach((entryName) => {
      // 获取当前条目的完整路径
      const fullPath = path.join(currentDirPath, entryName);
      // 获取当前条目的状态（是文件还是目录）
      const entryStat = fs.statSync(fullPath);
      if (entryStat.isFile()) {
        // 如果是文件，添加到映射表
        // 获取相对于根目录的路径
        const relativePath = path.relative(dir, fullPath);
        // 将相对路径转换为以斜杠开头的 URL 路径
        const urlPath = `/${relativePath}`;
        // 添加文件信息到映射表
        fileMap[urlPath] = {
          filePath: fullPath, // 文件的完整路径
          contentType: getContentType(fullPath), // 文件的内容类型
        };
      } else if (entryStat.isDirectory()) {
        // 如果是目录，则递归遍历
        traverseDir(fullPath);
      }
    });
  }

  // 从给定的根目录开始遍历
  traverseDir(dir);
  // 返回生成的文件映射表
  return fileMap;
}

// 使该函数可以被其他模块引用
module.exports = generateStaticFilesMap;

第七题：企业微信会议助手

目标一：

const fetchMeetingData = async () => {
      // TODO: 待补充代码
      return await fetch("js/meetings.json")
        .then((response) => {
          if (!response.ok) {
            throw new Error("网络响应错误");
          }
          return response.json();
        })
        .then((data) => {
          meeting.value = {
            title: data.title,
            time: data.time,
            location: data.location,
          };
          participants.value = data.participants;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    };

    const formatDate = (dateStr) => {
      // TODO: 待补充代码
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    };

目标二 ：

const statusClass = (status) => {
      // TODO: 待补充代码
      switch (status) {
        case "待确认":
          return "status-pending";
        case "已接受":
          return "status-ready";
        case "已拒绝":
          return "status-declined";
        default:
          return "unknown";
      }
    };

目标三：

function myAllSettled(promises) {
  // TODO: 待补充代码
  // 不能使用 Promise.allSettled, Promise.all，Promise.race 等方法
  const results = [];
  let completed = 0;
  return new Promise((resolve) => {
    promises.forEach((promise, index) => {
      promise
        .then(
          (value) => {
            results[index] = { status: "fulfilled", value };
          },
          (reason) => {
            results[index] = { status: "rejected", reason };
          }
        )
        .finally(() => {
          completed++;
          if (completed === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

第八题：知识点统计图

import { ref, onMounted, computed, reactive } from "vue";

export default {
  setup() {
    const mockUrl = "./mock/question_bank.json";
    let knowledgePoints = [];
    const chartContainer = ref(),
      rawData = ref([]);
    const difficultyOptions = ["简单", "中等", "困难"];
    const progressOptions = [
      "选题待审核",
      "题目制作中",
      "题目待测试",
      "题目待修改",
      "题目完成",
    ];

    const filterObj = reactive({
      difficulty: "",
      progress: "",
    });
    //检测需要，请勿修改 Start
    window.setKnowledgePoints = function (data) {
      knowledgePoints = data;
      applyFilter();
    };
    window.getRawData = function () {
      return JSON.stringify(rawData.value);
    };
    window.setFilter = function (d, p) {
      filterObj.difficulty = d;
      filterObj.progress = p;
      applyFilter();
    };
    window.getExtractUniquePoints = function (data) {
      return extractUniquePoints(data);
    };
    //检测需要，请勿修改 End

    let chart;

    function applyFilter() {
      let data;
      // TODO 4 请在下面补充代码
      let filteredData = rawData.value.filter((item) => {
        return (
          (!filterObj.difficulty || item.difficulty === filterObj.difficulty) &&
          (!filterObj.progress || item.progress === filterObj.progress)
        );
      });
      // 初始化 data 数组，长度为 knowledgePoints 的长度，初始值为 0
      data = new Array(knowledgePoints.length).fill(0);

      // 遍历筛选后的数据，计算每个知识点的题目数量
      filteredData.forEach((item) => {
        if (item.points && Array.isArray(item.points)) {
          item.points.forEach((point) => {
            const index = knowledgePoints.indexOf(point);
            if (index !== -1) {
              data[index]++;
            }
          });
        }
      });
      window.filteredData = JSON.stringify(data);

      // TODO 4 END
      const option = {
        title: {
          text: "知识点统计图",
        },
        tooltip: {
          // TODO 6 请在下面补充代码
          trigger: "item",
          axisPointer: {
            type: "none",
          },
          valueFormatter: function (value, index) {
            return `${value} 个项目`;
          },
          // TODO 6 END
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
          },
          data: knowledgePoints,
        },
        yAxis: {
          type: "value",
        },
        series: [
          // TODO 5 请在下面补充代码
          { type: "bar", data: data },
          // TODO 5 END
        ],
      };
      window.chartData = JSON.stringify(option);
      // TODO 3 请在下面补充代码

      // 使用 chart 变量来设置图表选项并渲染图表
      chart.setOption(option);
      // TODO 3 END
    }
    function extractUniquePoints(data) {
      // TODO 2 请在下面补充代码
      const pointsSet = new Set();

      data.forEach((item) => {
        if (item.points && Array.isArray(item.points)) {
          item.points.forEach((point) => {
            pointsSet.add(point);
          });
        }
      });
      return Array.from(pointsSet);
      // TODO 2 END
    }

    onMounted(async function () {
      chart = echarts.init(chartContainer.value);
      // TODO 1 请在下面补充代码
      try {
        const response = await axios.get(mockUrl);
        rawData.value = response.data;
        knowledgePoints = extractUniquePoints(response.data);
        applyFilter();
      } catch (error) {
        console.error("获取数据失败:", error);
      }
      // TODO 1 END
    });

    return {
      chartContainer,
      difficultyOptions,
      progressOptions,
      filterObj,
      applyFilter,
    };
  },
  template: `<div class="window">
    <main ref="chartContainer"></main>
    <aside>
        <h2>筛选数据</h2>
        <el-form label-width="auto">
            <el-form-item label="题目难度">
                <el-select placeholder="选择要显示的题目难度" v-model="filterObj.difficulty">
                    <el-option v-for="(it, idx) in difficultyOptions" :key="idx" :value="it">{{ it }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目制作进度">
                <el-select placeholder="选择要显示的题目制作进度" v-model="filterObj.progress">
                    <el-option v-for="(it, idx) in progressOptions" :key="idx" :value="it">{{ it }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="applyFilter">应用筛选</el-button>
            </el-form-item>
        </el-form>
    </aside>
</div>`,
};

第九题：西游净霸

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>西游争霸</title>
    <link rel="stylesheet/less" href="./css/style.less" />
    <link rel="stylesheet" href="./lib/element-plus/index.css" />

    <script src="./lib/vue.min.js"></script>
    <script src="./lib/vueDemi.js"></script>
    <script src="./lib/element-plus/index.full.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/less.module.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <div class="initialization" v-if="showNewGame">
          <div class="init-card">
            <div class="init-title">新游戏</div>
            <div class="option">
              <div class="item">
                <div class="head">游戏难度</div>
                <div class="difficulty-list">
                  <button
                    :class="{active:difficulty == '简单'}"
                    @click="switchingDifficulty('简单')"
                  >
                    简单
                  </button>
                  <button
                    :class="{active:difficulty == '普通'}"
                    @click="switchingDifficulty('普通')"
                  >
                    普通
                  </button>
                  <button
                    :class="{active:difficulty == '困难'}"
                    @click="switchingDifficulty('困难')"
                  >
                    困难
                  </button>
                </div>
              </div>
              <div class="item">
                <div class="head">卡牌数量</div>
                <div class="card-list">
                  <button
                    :class="{active:cardNum == 3}"
                    @click="switchingCardNum(3)"
                  >
                    3 V 3
                  </button>
                  <button
                    :class="{active:cardNum == 5}"
                    @click="switchingCardNum(5)"
                  >
                    5 V 5
                  </button>
                </div>
              </div>
            </div>
            <div class="footer">
              <button @click="startTheGame" class="goGanme">开始游戏</button>
            </div>
          </div>
        </div>
        <div class="mainEventPast" v-else>
          <div class="left">
            <el-card class="rule">
              <!-- TODO 待补充代码 -->
              <div class="rule-item" v-for="item in ruleList">
                <img src="./images/warning.png" alt="" />
                <p>{{item}}</p>
              </div>
            </el-card>
          </div>
          <div class="center">
            <div
              :style="{width:cardBoxWidth,padding:goodGuys.length == 0 ? '0' : '0 5px'}"
              class="top"
            >
              <div class="card">
                <div
                  class="box bad"
                  :class="{active:i.active,flipped:i.isflipped}"
                  v-for="(i,index) in badGuys"
                >
                  <img src="./images/bgc.png" />
                  <div class="numerical">
                    <div class="head">
                      <img :src="i.imgUrl" alt="" />
                    </div>
                    <div class="name">{{i.name}}</div>
                    <div class="attackPower">战斗力：{{i.attackPower}}</div>
                    <div class="defensivePower">
                      防御力：{{i.defensivePower}}
                    </div>
                    <div class="attributeValue">
                      属性值：{{i.attributeValue}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              :style="{width:cardBoxWidth,padding:goodGuys.length == 0 ? '0' : '0 5px'}"
              class="bottom"
            >
              <div class="card">
                <div
                  class="box flipped good"
                  :class="{active:i.active}"
                  v-for="(i,index) in goodGuys"
                >
                  <div class="numerical" @click="playCards(i)">
                    <div class="head">
                      <img :src="i.imgUrl" alt="" />
                    </div>
                    <div class="name">{{i.name}}</div>
                    <div class="attackPower">战斗力：{{i.attackPower}}</div>
                    <div class="defensivePower">
                      防御力：{{i.defensivePower}}
                    </div>
                    <div class="attributeValue">
                      属性值：{{i.attributeValue}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <el-card class="newGame">
              <el-button type="primary" class="newName" @click="newGame"
                >新游戏</el-button
              >
              <el-button
                type="success"
                class="startOver"
                :disabled="!newGameBtn"
                @click="startOver"
                >重新开始</el-button
              >
            </el-card>
            <el-card class="scoreboard">
              <div class="title">记分板</div>
              <div class="socre">
                <div class="win">胜：{{win}}</div>
                <div class="negative">负：{{negative}}</div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script>
    const { createApp, ref, computed, onMounted, watch } = Vue;
    const { ElNotification, ElMessageBox } = ElementPlus;
    const app = createApp({
      setup() {
        const showNewGame = ref(true);
        const difficulty = ref("简单");
        const cardNum = ref(3);
        const num = ref(3);
        const win = ref(0);
        const negative = ref(0);
        const currentCardPlayed = ref(null);
        const currentCardsPlayedByHumansAndMachines = ref(null);
        const dataList = ref([]);
        const goodGuys = ref([]);
        const badGuys = ref([]);
        const ruleList = ref([]);
        const newGameBtn = ref(true);

        const getDataList = async () => {
          //TODO 待补充代码
          try {
            const response = await axios.get("./mock/data.json");
            const data = response.data;
            dataList.value = data;
            ruleList.value = response.data[2].content
              .split("。")
              .filter((item) => item !== "");
          } catch (error) {
            console.error("Error fetching data:", error);
          }
        };

        /**
         * 随机获取好人卡牌
         */
        const getRandomGoodGuysCards = () => {
          //TODO 待补充代码
          const goodPeople = dataList.value.find(
            (item) => item.name === "goodPeople"
          );
          if (goodPeople) {
            goodGuys.value = goodPeople.children
              .sort(() => 0.5 - Math.random())
              .slice(0, cardNum.value);
          }
        };

        /**
         * 随机获取坏人卡牌
         */
        const getRandomBadGuysCards = () => {
          //TODO 待补充代码
          const badPeople = dataList.value.find(
            (item) => item.name === "badPeople"
          );
          if (badPeople) {
            badGuys.value = badPeople.children
              .sort(() => 0.5 - Math.random())
              .slice(0, cardNum.value);
          }
        };

        // 根据难度获取当前人机需要出的牌
        const machinePlayCards = () => {
          let selectedCard = null;
          const attributeMap = {
            火: "木",
            木: "水",
            水: "土",
            土: "金",
            金: "火",
          };

          if (difficulty.value === "简单") {
            selectedCard = badGuys.value.find(
              (card) =>
                attributeMap[currentCardPlayed.value.attributeValue] ==
                card.attributeValue
            );
            if (selectedCard) {
              return selectedCard;
            } else {
              return badGuys.value.sort(
                (a, b) => a.attackPower - b.attackPower
              )[0];
            }
          } else if (difficulty.value === "普通") {
            return badGuys.value.sort(
              (a, b) => b.attackPower - a.attackPower
            )[0];
          } else if (difficulty.value === "困难") {
            selectedCard = badGuys.value.find(
              (card) =>
                attributeMap[card.attributeValue] ==
                currentCardPlayed.value.attributeValue
            );
            if (selectedCard) {
              return selectedCard;
            } else {
              return badGuys.value.sort(
                (a, b) => b.attackPower - a.attackPower
              )[0];
            }
          }
        };

        /**
         * 判断输赢的函数
         * @param {object} goodCard
         * @param {object} badCard
         * @returns {string} result 结果
         */
        const judgeWinnerOrLoss = (goodCard, badCard) => {
          //TODO 待补充代码
          let goodSum =
            Number(goodCard.attackPower) + Number(goodCard.defensivePower);
          let badSum =
            Number(badCard.attackPower) + Number(badCard.defensivePower);

          // 判断属性克制关系
          if (
            goodCard.attributeValue === "火" &&
            badCard.attributeValue === "木"
          ) {
            goodSum *= 1.5;
          } else if (
            goodCard.attributeValue === "木" &&
            badCard.attributeValue === "水"
          ) {
            goodSum *= 1.5;
          } else if (
            goodCard.attributeValue === "水" &&
            badCard.attributeValue === "土"
          ) {
            goodSum *= 1.5;
          } else if (
            goodCard.attributeValue === "土" &&
            badCard.attributeValue === "金"
          ) {
            goodSum *= 1.5;
          } else if (
            goodCard.attributeValue === "金" &&
            badCard.attributeValue === "火"
          ) {
            goodSum *= 1.5;
          } else if (
            badCard.attributeValue === "火" &&
            goodCard.attributeValue === "木"
          ) {
            badSum *= 1.5;
          } else if (
            badCard.attributeValue === "木" &&
            goodCard.attributeValue === "水"
          ) {
            badSum *= 1.5;
          } else if (
            badCard.attributeValue === "水" &&
            goodCard.attributeValue === "土"
          ) {
            badSum *= 1.5;
          } else if (
            badCard.attributeValue === "土" &&
            goodCard.attributeValue === "金"
          ) {
            badSum *= 1.5;
          } else if (
            badCard.attributeValue === "金" &&
            goodCard.attributeValue === "火"
          ) {
            badSum *= 1.5;
          }

          return goodSum > badSum ? "win" : "loss";
        };

        //切换难度
        const switchingDifficulty = (val) => {
          difficulty.value = val;
        };

        //切换卡牌数量
        const switchingCardNum = (val) => {
          cardNum.value = val;
          num.value = val;
        };
        //开始新游戏
        const startTheGame = () => {
          showNewGame.value = false;
        };
        //重新开始
        const startOver = () => {
          getDataList();
          setTimeout(() => {
            num.value = cardNum.value;
            win.value = 0;
            negative.value = 0;
            goodGuys.value = [];
            badGuys.value = [];
            getRandomGoodGuysCards();
            getRandomBadGuysCards();
          }, 10);
        };

        const cardBoxWidth = computed(() => {
          if (num.value > 0) {
            return 120 * num.value + 20 + "px";
          } else {
            return 0;
          }
        });
        const cardImgWidth = computed(() => {
          return (1 / num.value) * 100;
        });

        const debounce = (func, delay) => {
          let timeout;
          return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              func.apply(this, args);
            }, delay);
          };
        };
        //出牌
        const playCards = (val) => {
          if (currentCardPlayed.value) {
            return;
          }
          val.active = true;
          currentCardPlayed.value = val;
          newGameBtn.value = false;
          playCardsByComputer();
        };
        const debouncedPlayCards = debounce(playCards, 1000);

        //人机出牌
        const playCardsByComputer = () => {
          const res = machinePlayCards();
          res.active = true;
          currentCardsPlayedByHumansAndMachines.value = res;
          setTimeout(() => {
            res.isflipped = true;
            judge();
          }, 1000);
        };

        const judge = () => {
          //得到当前出牌的数据伤害
          setTimeout(() => {
            const result = judgeWinnerOrLoss(
              currentCardPlayed.value,
              currentCardsPlayedByHumansAndMachines.value
            );
            if (result === "win") {
              win.value += 1;
              ElNotification({
                title: "Success",
                message: "本轮你赢了",
                type: "success",
              });
            } else {
              negative.value += 1;
              ElNotification({
                title: "Warning",
                message: "很遗憾，本轮你输了",
                type: "warning",
              });
            }
            //清除当前出的牌
            goodGuys.value = goodGuys.value.filter((item) => !item.active);
            badGuys.value = badGuys.value.filter((item) => !item.active);
            currentCardPlayed.value = null;
            currentCardsPlayedByHumansAndMachines.value = null;
            num.value -= 1;
            newGameBtn.value = true;
          }, 1500);
        };

        onMounted(() => {
          getDataList();
          document.body.style.backgroundColor = "rgb(79,201,249)";
        });

        const newGame = () => {
          getDataList();
          setTimeout(() => {
            num.value = 3;
            cardNum.value = 3;
            goodGuys.value = [];
            badGuys.value = [];
            win.value = 0;
            negative.value = 0;
            difficulty.value = "简单";
            showNewGame.value = true;
          }, 10);
        };

        watch(showNewGame, (newValue) => {
          if (!newValue) {
            getRandomGoodGuysCards();
            getRandomBadGuysCards();
            document.body.style.backgroundColor = "#f5f5f5";
          } else {
            document.body.style.backgroundColor = "rgb(79,201,249)";
          }
        });

        watch(num, (newValue) => {
          if (newValue == 0) {
            //对比胜负总数
            if (win.value > negative.value) {
              ElMessageBox.alert("你赢了", "胜负总和", {
                confirmButtonText: "OK",
              });
            } else {
              ElMessageBox.alert("你输了", "胜负总和", {
                confirmButtonText: "OK",
              });
            }
          }
        });
        return {
          showNewGame,
          cardNum,
          cardBoxWidth,
          num,
          cardImgWidth,
          dataList,
          goodGuys,
          badGuys,
          difficulty,
          ruleList,
          negative,
          currentCardPlayed,
          currentCardsPlayedByHumansAndMachines,
          win,
          newGameBtn,
          switchingDifficulty,
          switchingCardNum,
          startTheGame,
          playCards: debouncedPlayCards,
          startOver,
          newGame,
          judgeWinnerOrLoss,
        };
      },
    });
    app.use(ElementPlus);
    let vm = app.mount("#app");
    window.vm = vm;
  </script>
</html>

目标 1 检测成功 得5分
目标 2 检测成功 得5分
目标 3 检测失败 得0分
目标 4 检测成功 得5分

第十题：消消乐

 // TODO 1 START 请在下面补充代码
    
    // 请求排行榜数据并显示消息的方法
    const fetchRanking = async () => {
      try {
        const response = await axios.get(mockUrl); // 发送 GET 请求
        const rankingData = response.data; // 获取响应数据
        // 使用 ElMessage 显示全服最高分信息
        ElMessage({
          message: `全服最高分为${rankingData.top.score}，由${rankingData.top.name}创造`,
          duration: 0, // 设置为一直显示
        });
      } catch (error) {
        console.error("请求排行榜数据时出错:", error);
        // 请求出错时，显示错误消息
        ElMessage({
          message: "无法获取排行榜数据",
          duration: 3000, // 显示 3 秒
        });
      }
    };
    // 调用 fetchRanking 方法获取排行榜数据并显示
    fetchRanking();
    // TODO 1 END