const scene=({
      isCover: false, // 默認(rèn)都是沒(méi)有被覆蓋的
      status: 0,// 是否被選中的狀態(tài)
      icon,// 圖標(biāo)
      id: randomString(4), // 生成隨機(jī)id
      x: column * 100 + offset, //x 坐標(biāo)
      y: row * 100 + offset,// y坐標(biāo)
    }

// 以下感謝大佬們提供的算法
const makeScene = (level) => {
  // 獲取當(dāng)前關(guān)卡
  const curLevel = Math.min(maxLevel, level);
  // 獲取當(dāng)前關(guān)卡應(yīng)該擁有的icon數(shù)量
  const iconPool = icons.slice(0, 2 * curLevel);
  // 算出偏移量范圍具體細(xì)節(jié)范圍
  const offsetPool = [0, 25, -25, 50, -50].slice(0, 1 + curLevel);
  //  最終的元數(shù)據(jù)數(shù)組
  const scene = [];
  // 確定范圍
  //在一般情下 translate 的偏移量，如果是百分比的話，是按照自身的寬度或者高度去計(jì)算的，所以最大的偏移范圍是百分800%
  // 然后通過(guò)Math.random 會(huì)小于百分之八百
  // 所以就會(huì)形成當(dāng)前區(qū)間的隨機(jī)數(shù)
  const range = [
    [2, 6],
    [1, 6],
    [1, 7],
    [0, 7],
    [0, 8],
  ][Math.min(4, curLevel - 1)];
  const randomSet = (icon: string) => {
    // 求偏移量
    const offset = offsetPool[Math.floor(offsetPool.length * Math.random())];
    // 偏移求列數(shù)
    const row = range[0] + Math.floor((range[1] - range[0]) * Math.random());
    // 求偏移行數(shù)
    const column = range[0] + Math.floor((range[1] - range[0]) * Math.random());
    console.log(offset, row, column);
    // 生成元數(shù)據(jù)對(duì)象
    scene.push({
      isCover: false, // 默認(rèn)都是沒(méi)有被覆蓋的
      status: 0,// 是否被選中的狀態(tài)
      icon,// 圖標(biāo)
      id: randomString(4), // 生成隨機(jī)id
      x: column * 100 + offset, //x 坐標(biāo)
      y: row * 100 + offset,// y坐標(biāo)
    });
  };

  // 如果級(jí)別高了就加點(diǎn)icon 花哨一點(diǎn)
  let compareLevel = curLevel;
  while (compareLevel > 0) {
    iconPool.push(...iconPool.slice(0, Math.min(10, 2 * (compareLevel - 5))));
    compareLevel -= 5;
  }
  // 生成元數(shù)據(jù)，初始狀態(tài)下 iconPool的內(nèi)容少生 隨著增加，就會(huì)越來(lái)越難
  for (const icon of iconPool) {
    for (let i = 0; i < 6; i++) {
      randomSet(icon);
    }
  }
  // 返回元數(shù)據(jù)
  return scene;
};

  const range = [
    [2, 6],
    [1, 6],
    [1, 7],
    [0, 7],
    [0, 8],
  ][Math.min(4, curLevel - 1)];

  const randomSet = (icon: string) => {
    // 求偏移量
    const offset = offsetPool[Math.floor(offsetPool.length * Math.random())];
    // 偏移求列數(shù)
    const row = range[0] + Math.floor((range[1] - range[0]) * Math.random());
    // 求偏移行數(shù)
    const column = range[0] + Math.floor((range[1] - range[0]) * Math.random());
    console.log(offset, row, column);
    // 生成元數(shù)據(jù)對(duì)象
    scene.push({
      isCover: false, // 默認(rèn)都是沒(méi)有被覆蓋的
      status: 0,// 是否被選中的狀態(tài)
      icon,// 圖標(biāo)
      id: randomString(4), // 生成隨機(jī)id
      x: column * 100 + offset, //x 坐標(biāo)
      y: row * 100 + offset,// y坐標(biāo)
    });
  };

// 檢查是否被覆蓋
const checkCover = (value) => {
  // 深拷貝一份
  const updateScene = value.slice();
  // 是否覆蓋算法
  // 遍歷所有的元數(shù)據(jù)
  // 雙重for循環(huán)來(lái)找到每個(gè)元素的覆蓋情況
  for (let i = 0; i < updateScene.length; i++) {
    // 當(dāng)前item對(duì)角坐標(biāo)
    const cur = updateScene[i];
    // 先假設(shè)他都不是覆蓋的
    cur.isCover = false;
    // 如果status 不為0 說(shuō)明已經(jīng)被選中了，不用再判斷了
    if (cur.status !== 0) continue;
    // 拿到坐標(biāo)
    const { x: x1, y: y1 } = cur;
    // 為了拿到他們的對(duì)角坐標(biāo)，所以要加上100
    //之所以要加上100 是由于 他的總體是800% 也就是一個(gè)格子的換算寬度是100
    const x2 = x1 + 100,
      y2 = y1 + 100;
    // 第二個(gè)來(lái)循環(huán)來(lái)判斷他的覆蓋情況
    for (let j = i + 1; j < updateScene.length; j++) {
      const compare = updateScene[j];
      if (compare.status !== 0) continue;


      const { x, y } = compare;
      // 處理交集也就是選中情況
      // 兩區(qū)域有交集視為選中
      // 兩區(qū)域不重疊情況取反即為交集
      if (!(y + 100 <= y1 || y >= y2 || x + 100 <= x1 || x >= x2)) {
        // 由于后方出現(xiàn)的元素會(huì)覆蓋前方的元素，所以只要后方的元素被選中了，前方的元素就不用再判斷了
        // 又由于雙層循環(huán)第二層從j 開始，所以不用擔(dān)心會(huì)重復(fù)判斷
        cur.isCover = true;
        break;
      }
    }
  }
  scene.value = updateScene;
};

 　　function isButt(obj1,obj2){
         var l1=obj1.offsetLeft;
         var t1=obj1.offsetTop;
         var r1=l1+obj1.offsetWidth;
         var b1=t1+obj1.offsetHeight;
         var l2=obj2.offsetLeft;
         var t2=obj2.offsetTop;
         var r2=l2+obj2.offsetWidth;
         var b2=t2+obj2.offsetHeight;
       return!(r1<l2||b1<t2||r2<l1||b2<t1)
    }

 for (let i = 0; i < updateScene.length; i++) {
    // 第二個(gè)來(lái)循環(huán)來(lái)判斷他的覆蓋情況
    for (let j = i + 1; j < updateScene.length; j++) {
      // 執(zhí)行碰撞檢測(cè)
    }
  }

// 點(diǎn)擊item
const clickSymbol = async (idx: number) => {
  // 如果已經(jīng)完成了，就不處理
  if (finished.value || animating.value) return;
  // 拷貝一份Scene
  const symbol = scene.value[idx];
  // 覆蓋了和已經(jīng)在隊(duì)列里的也不處理
  if (symbol.isCover || symbol.status !== 0) return;
  //置為可以選中狀態(tài)
  symbol.status = 1;
  queue.value.push(symbol);
  // 制造動(dòng)畫效果中防止點(diǎn)擊
  animating.value = true;
  //三百毫秒的延遲
  await waitTimeout(300);
  // 拿到與他匹配的所有icon
  const filterSame = queue.value.filter((sb) => sb.icon === symbol.icon);

  // 選中的三個(gè)配對(duì)成功表示已經(jīng)是三連了
  if (filterSame.length === 3) {
    // 由于icon的類型一樣，留下隊(duì)列中的不一樣的剩余內(nèi)容重新賦值
    queue.value = queue.value.filter((sb) => sb.icon !== symbol.icon);
    // 隱藏iocn，dom
    for (const sb of filterSame) {
      const find = scene.value.find((i) => i.id === sb.id);
      // 將他們的狀態(tài)變?yōu)? 通過(guò)opacity 屬性 來(lái)隱藏icon
      if (find) find.status = 2;
    }
  }

  // 當(dāng)格子沾滿了，那么久表示已經(jīng)失敗了
  if (queue.value.length === 7) {
    tipText.value = '失敗了'
    finished.value = true;
  }

  if (!scene.value.find((s) => s.status !== 2)) {
    // 如果完成所有關(guān)卡，那就過(guò)了所有關(guān)了
    if (level.value === maxLevel) {
      tipText.value = '完成挑戰(zhàn)';
      finished.value = true
      return;
    }
    //否則加一關(guān)
    level.value = level.value + 1;
    queue.value = []
    // 重新初始化
    checkCover(makeScene(level.value + 1));
  } else {
    // 處理覆蓋情況
    checkCover(scene.value);
  }
  // 動(dòng)畫結(jié)束
  animating.value = false;
};

// 隊(duì)列區(qū)排序
watchEffect(() => {
  const cache = {};
  // 通過(guò)當(dāng)前的icon的標(biāo)識(shí)，將相同的icon歸納到一塊
  // 方便后續(xù)排序
  for (const symbol of queue.value) {
    if (cache[symbol.icon]) {
      cache[symbol.icon].push(symbol);
    } else {
      cache[symbol.icon] = [symbol];
    }
  }
  const temp = [];
  for (const symbols of Object.values(cache)) {
    temp.push(...(symbols as any));
  }
  const updateSortedQueue = {};
  let x = 50;
  // 拿到更新后的隊(duì)列區(qū)數(shù)據(jù)，計(jì)算權(quán)重
  for (const symbol of temp) {
    updateSortedQueue[symbol.id] = x;
    x += 100;
  }
  //賦值 ，這個(gè)是為了將選中的排序后的內(nèi)容移動(dòng)到隊(duì)列區(qū)
  sortedQueue.value = updateSortedQueue
  // 檢查覆蓋情況
  checkCover(scene.value);
})