一、介绍

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

二、准备

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

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

其中：

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

在浏览器中预览 index.html ⻚⾯，显示如下所示：
在这里插入图片描述

三、目标

请在 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); // 输出：["灾变", "天象","⽉令禁忌"]

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

在题⽬所提供的数据的情况下，点击合成按钮，完成后的效果如下：
在这里插入图片描述

四、代码

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 = `<img src='images/06.jpg' />`;
          document.querySelector(
            ".card:nth-child(8)"
          ).innerHTML = `<img src='images/08.jpg' />`;
          document.querySelector(
            ".card:nth-child(9)"
          ).innerHTML = `<img src='images/09.jpg' />`;
          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;