javaScript蓝桥杯----收集帛书碎⽚

目录

  • 一、介绍
  • 二、准备
  • 三、目标
  • 四、代码
  • 五、完成


一、介绍

三叔在外出考古途中⽆意发现了⼀份战国帛书,帛书边缘有被明显裁剪过的痕迹,单从帛书⽚段,提到记录了神秘⽂物的地点,⽆奈帛书不完整,为了早⽇将⽂物带回博物馆,三叔号召当地村⺠闷油瓶、王胖⼦、潘⼦共同寻找剩余帛书碎⽚,相约⼀炷⾹后再聚。
本题需要在已提供的基础项⽬中使⽤ JS 知识封装⼀个函数,达到收集帛书碎⽚的要求。

二、准备

开始答题前,需要先打开本题的项⽬代码⽂件夹,⽬录结构如下:

├── js
│ └── collect-puzzle.js
├── css
│ └── style.css
├── images
└── index.html

其中:

  • index.html 是主⻚⾯。
  • css/style.css 是样式⽂件。
  • images 是图⽚⽂件夹。
  • js/collect-puzzle.js 是需要补充代码的 js ⽂件。

在浏览器中预览 index.html ⻚⾯,显示如下所示:
javaScript蓝桥杯----收集帛书碎⽚_第1张图片

三、目标

请在 collect-puzzle.js ⽂件中补全函数 collectPuzzle 中的代码,返回包含不同帛书碎⽚的数组,最终拼出完整的战国帛书,需要注意:

  • 同⼀个⼈收集的帛书碎⽚可能是有重复的。
  • 同⼀组内不同的⼈收集的帛书碎⽚也可能是有重复的。
  • ⼯具函数需要统计所有⼈获取的不同帛书碎⽚,⽽不是帛书碎⽚数量。

例如:

// 不同组内的帛书碎⽚不能重复计算
var arr1 = ["灾变", "四时运转", "天象"];
var arr2 = ["四时运转"];
var result1 = collectPuzzle(arr1, arr2);
console.log(result1); // 输出:["灾变","四时运转","天象"]
// 同⼀组内的帛书碎⽚不能重复计算
var arr3 = ["灾变", "灾变", "天象"];
var arr4 = ["灾变", "⽉令禁忌", "天象"];
var result2 = collectPuzzle(arr3, arr4);
console.log(result2); // 输出:["灾变", "天象","⽉令禁忌"]

上述仅为示例代码,判题时会随机提供数组对该函数功能进⾏检测

在题⽬所提供的数据的情况下,点击合成按钮,完成后的效果如下:
javaScript蓝桥杯----收集帛书碎⽚_第2张图片

四、代码

index.html

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>收集帛书碎片title>
    <link rel="stylesheet" href="css/style.css" />
  head>

  <body>
    <div class="grid">
      <div class="card"><img src="images/01.jpg" />div>
      <div class="card"><img src="images/02.jpg" />div>
      <div class="card"><img src="images/03.jpg" />div>
      <div class="card"><img src="images/04.jpg" />div>
      <div class="card"><img src="images/05.jpg" />div>
      <div class="card">div>
      <div class="card"><img src="images/07.jpg" />div>
      <div class="card">div>
      <div class="card">div>
    div>
    <div class="message">
      <div class="tip">帛书碎片集结成功div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">闷油瓶div>
        <div class="chat-box" id="user1">div>
      div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">王胖子div>
        <div class="chat-box" id="user2">div>
      div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">潘子div>
        <div class="chat-box" id="user3">div>
      div>
      <div class="button" id="btnmix">点击合成div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">结果div>
        <div class="chat-box" id="result">等待合成div>
      div>
    div>

    <script src="./js/collect-puzzle.js">script>
    <script>
      const user1Puzzles = ["四时运转", "灾变", "四时运转", "天象"];
      const user2Puzzles = ["四时运转", "月令禁忌", "天象"];
      const user3Puzzles = ["月令禁忌", "天象", "四时运转", "天象"];
      const resultPuzzles = collectPuzzle(
        user1Puzzles,
        user2Puzzles,
        user3Puzzles
      );

      document.getElementById("user1").innerText += JSON.stringify(user1Puzzles);
      document.getElementById("user2").innerText += JSON.stringify(user2Puzzles);
      document.getElementById("user3").innerText +=
        JSON.stringify(user3Puzzles);
      document.getElementById("btnmix").onclick = function () {
        document.getElementById("result").innerText =
          JSON.stringify(resultPuzzles);
        //当碎片集结成功时效果
        let arr = ["四时运转", "灾变", "月令禁忌", "天象"];
        if (
          resultPuzzles.length === arr.length &&
          resultPuzzles.filter((t) => !arr.includes(t))
        ) {
          document.querySelector(
            ".card:nth-child(6)"
          ).innerHTML = ``;
          document.querySelector(
            ".card:nth-child(8)"
          ).innerHTML = ``;
          document.querySelector(
            ".card:nth-child(9)"
          ).innerHTML = ``;
          document.getElementsByClassName("tip")[0].style.display = "block";
        }
      };
    script>
  body>
html>

js/collect-puzzle.js

function collectPuzzle(...puzzles) {
  // TODO: 在这里写入具体的实现逻辑
}

// 检测需要,请勿删除
module.exports = collectPuzzle;

五、完成

function collectPuzzle(...puzzles) {
  // TODO: 在这里写入具体的实现逻辑
  let set = new Set()
  for (key of puzzles) {
    for (value of key) {
      set.add(value)
    }
  }
  return Array.from([...set])
}

// 检测需要,请勿删除
module.exports = collectPuzzle;

你可能感兴趣的:(javaScript,javascript,蓝桥杯,开发语言)