first init

2022-09-16 18:14:04 +08:00 · 2022-09-16 18:14:04 +08:00 · 9001cd7c25
commit 9001cd7c25
25 changed files with 3741 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+  },
+  plugins: ["vue", "@typescript-eslint", "prettier"],
+  rules: {
+    "prettier/prettier": "error",
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vercel
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
+被羊了个羊虐了后，我自己做了一个！
+
+
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>鱼了个鱼</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,36 @@
+{
+  "name": "yulegeyu",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ant-design-vue": "^3.2.11",
+    "lodash": "^4.17.21",
+    "pinia": "^2.0.19",
+    "pinia-plugin-persistedstate": "^2.1.1",
+    "vue": "^3.2.37",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.185",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "prettier": "^2.7.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7",
+    "vue-tsc": "^0.39.5"
+  }
+}
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <div class="content">
+      <router-view />
+    </div>
+    <div class="footer">
+      鱼了个鱼 ©2022 by
+      <a href="https://github.com/liyupi" target="_blank" style="color: #fff">
+        程序员鱼皮
+      </a>
+      |
+      <a
+        href="https://github.com/liyupi/yulegeyu"
+        target="_blank"
+        style="color: #fff"
+      >
+        代码开源
+      </a>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+#app {
+  padding: 16px 16px 50px;
+  background: url("assets/bg.jpeg");
+  height: 100vh;
+  background-size: 100% 100%;
+}
+
+.footer {
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  padding: 12px;
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>
--- a/src/assets/bg.jpeg
+++ b/src/assets/bg.jpeg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/configs/routes.ts
+++ b/src/configs/routes.ts
@ -0,0 +1,9 @@
+import { RouteRecordRaw } from "vue-router";
+import IndexPage from "../pages/IndexPage.vue";
+
+export default [
+  {
+    path: "/",
+    component: IndexPage,
+  },
+] as RouteRecordRaw[];
--- a/src/core/game.ts
+++ b/src/core/game.ts
@ -0,0 +1,368 @@
+/**
+ * 游戏逻辑 V2（不固定 level）
+ *
+ * @author yupi https://github.com/liyupi
+ */
+import { useGlobalStore } from "./globalStore";
+// @ts-ignore
+import _ from "lodash";
+import { nextTick, ref } from "vue";
+
+const useGame = () => {
+  const { gameConfig } = useGlobalStore();
+
+  // 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
+  const gameStatus = ref(0);
+
+  // 各层块
+  const levelBlocksVal = ref<BlockType[]>([]);
+  // 随机区块
+  const randomBlocksVal = ref<BlockType[][]>([]);
+  // 插槽区
+  const slotAreaVal = ref<BlockType[]>([]);
+  // 当前槽占用数
+  const currSlotNum = ref(0);
+
+  // 保存所有块（包括随机块）
+  const blockData: Record<number, BlockType> = {};
+
+  // 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
+  const boxWidthNum = 24;
+  const boxHeightNum = 24;
+
+  // 每个格子的宽高
+  const widthUnit = 14;
+  const heightUnit = 14;
+
+  // 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
+  let chessBoard: ChessBoardUnitType[][] = [];
+
+  /**
+   * 初始化指定大小的棋盘
+   * @param width
+   * @param height
+   */
+  const initChessBoard = (width: number, height: number) => {
+    chessBoard = new Array(width);
+    for (let i = 0; i < width; i++) {
+      chessBoard[i] = new Array(height);
+      for (let j = 0; j < height; j++) {
+        chessBoard[i][j] = {
+          blocks: [],
+        };
+      }
+    }
+  };
+
+  // 初始化棋盘
+  initChessBoard(boxWidthNum, boxHeightNum);
+
+  /**
+   * 游戏初始化
+   */
+  const initGame = () => {
+    console.log("initGame", gameConfig);
+
+    // 0. 设置父容器宽高
+    const levelBoardDom: any = document.getElementsByClassName("level-board");
+    levelBoardDom[0].style.width = widthUnit * boxWidthNum + "px";
+    levelBoardDom[0].style.height = heightUnit * boxHeightNum + "px";
+
+    // 1. 规划块数
+    // 块数单位（总块数必须是该值的倍数）
+    const blockNumUnit = gameConfig.composeNum * gameConfig.typeNum;
+    console.log("块数单位", blockNumUnit);
+
+    // 随机生成的总块数
+    const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
+      return pre + curr;
+    }, 0);
+    console.log("随机生成的总块数", totalRandomBlockNum);
+
+    // 需要的最小块数
+    const minBlockNum =
+      gameConfig.levelNum * gameConfig.levelBlockNum + totalRandomBlockNum;
+    console.log("需要的最小块数", minBlockNum);
+
+    // 补齐到 blockNumUnit 的倍数
+    // e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
+    let totalBlockNum = minBlockNum;
+    if (totalBlockNum % blockNumUnit !== 0) {
+      totalBlockNum =
+        (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
+    }
+    console.log("总块数", totalBlockNum);
+
+    // 2. 初始化块，随机生成块的内容
+    // 保存所有块的数组
+    const animalBlocks: string[] = [];
+    // 需要用到的动物数组
+    const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
+    // 依次把块塞到数组里
+    for (let i = 0; i < totalBlockNum; i++) {
+      animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
+    }
+    // 打乱数组
+    const randomAnimalBlocks = _.shuffle(animalBlocks);
+
+    // 初始化
+    const allBlocks: BlockType[] = [];
+    for (let i = 0; i < totalBlockNum; i++) {
+      const newBlock = {
+        id: i,
+        status: 0,
+        level: 0,
+        type: randomAnimalBlocks[i],
+        higherThanBlocks: [] as BlockType[],
+        lowerThanBlocks: [] as BlockType[],
+      } as BlockType;
+      allBlocks.push(newBlock);
+    }
+
+    // 下一个要塞入的块
+    let pos = 0;
+
+    // 3. 计算随机生成的块
+    const randomBlocks: BlockType[][] = [];
+    gameConfig.randomBlocks.forEach((randomBlock, idx) => {
+      randomBlocks[idx] = [];
+      for (let i = 0; i < randomBlock; i++) {
+        randomBlocks[idx].push(allBlocks[pos]);
+        blockData[pos] = allBlocks[pos];
+        pos++;
+      }
+    });
+
+    // 剩余块数
+    let leftBlockNum = totalBlockNum - totalRandomBlockNum;
+
+    // 4. 计算有层级关系的块
+    const levelBlocks: BlockType[] = [];
+    let minX = 0;
+    let maxX = 22;
+    let minY = 0;
+    let maxY = 22;
+    // 分为 gameConfig.levelNum 批，依次生成，每批的边界不同
+    for (let i = 0; i < gameConfig.levelNum; i++) {
+      let nextBlockNum = Math.min(gameConfig.levelBlockNum, leftBlockNum);
+      // 最后一批，分配所有 leftBlockNum
+      if (i == gameConfig.levelNum - 1) {
+        nextBlockNum = leftBlockNum;
+      }
+      // 边界收缩
+      if (gameConfig.borderStep > 0) {
+        const dir = i % 4;
+        if (i > 0) {
+          if (dir === 0) {
+            minX += gameConfig.borderStep;
+          } else if (dir === 1) {
+            maxY -= gameConfig.borderStep;
+          } else if (dir === 2) {
+            minY += gameConfig.borderStep;
+          } else {
+            maxX -= gameConfig.borderStep;
+          }
+        }
+      }
+      const nextGenBlocks = allBlocks.slice(pos, pos + nextBlockNum);
+      levelBlocks.push(...nextGenBlocks);
+      pos = pos + nextBlockNum;
+      // 生成块的坐标
+      genLevelBlockPos(nextGenBlocks, minX, minY, maxX, maxY);
+      leftBlockNum -= nextBlockNum;
+      if (leftBlockNum <= 0) {
+        break;
+      }
+    }
+    console.log("最终剩余块数", leftBlockNum);
+
+    // 4. 初始化空插槽
+    const slotArea: BlockType[] = new Array(gameConfig.slotNum).fill(null);
+    console.log("随机块情况", randomBlocks);
+
+    return {
+      levelBlocks,
+      randomBlocks,
+      slotArea,
+    };
+  };
+
+  /**
+   * 生成一批层级块（坐标、层级关系）
+   * @param blocks
+   * @param minX
+   * @param minY
+   * @param maxX
+   * @param maxY
+   */
+  const genLevelBlockPos = (
+    blocks: BlockType[],
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number
+  ) => {
+    // 记录这批块的坐标，用于保证同批次元素不能完全重叠
+    const currentPosSet = new Set<string>();
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      // 随机生成坐标
+      let newPosX;
+      let newPosY;
+      let key;
+      while (true) {
+        newPosX = Math.floor(Math.random() * maxX + minX);
+        newPosY = Math.floor(Math.random() * maxY + minY);
+        key = newPosX + "," + newPosY;
+        // 同批次元素不能完全重叠
+        if (!currentPosSet.has(key)) {
+          break;
+        }
+      }
+      chessBoard[newPosX][newPosY].blocks.push(block);
+      currentPosSet.add(key);
+      block.x = newPosX;
+      block.y = newPosY;
+      // 填充层级关系
+      genLevelRelation(block);
+    }
+  };
+
+  /**
+   * 给块绑定层级关系（用于确认哪些元素是当前可点击的）
+   * 核心逻辑：每个块压住和其坐标有交集棋盘格内所有 level 大于它的点，双向建立联系
+   * @param block
+   */
+  const genLevelRelation = (block: BlockType) => {
+    // 确定该块附近的格子坐标范围
+    const minX = Math.max(block.x - 2, 0);
+    const minY = Math.max(block.y - 2, 0);
+    const maxX = Math.min(block.x + 3, boxWidthNum - 2);
+    const maxY = Math.min(block.y + 3, boxWidthNum - 2);
+    // 遍历该块附近的格子
+    let maxLevel = 0;
+    for (let i = minX; i < maxX; i++) {
+      for (let j = minY; j < maxY; j++) {
+        const relationBlocks = chessBoard[i][j].blocks;
+        if (relationBlocks.length > 0) {
+          // 取当前位置最高层的块
+          const maxLevelRelationBlock =
+            relationBlocks[relationBlocks.length - 1];
+          // 排除自己
+          if (maxLevelRelationBlock.id === block.id) {
+            continue;
+          }
+          maxLevel = Math.max(maxLevel, maxLevelRelationBlock.level);
+          block.higherThanBlocks.push(maxLevelRelationBlock);
+          maxLevelRelationBlock.lowerThanBlocks.push(block);
+        }
+      }
+    }
+    // 比最高层的块再高一层（初始为 1）
+    block.level = maxLevel + 1;
+  };
+
+  /**
+   * 点击块事件
+   * @param block
+   * @param e
+   * @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
+   */
+  const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
+    // 已经输了 / 已经被点击 / 有上层块，不能再点击
+    if (
+      currSlotNum.value >= gameConfig.slotNum ||
+      block.status !== 0 ||
+      block.lowerThanBlocks.length > 0
+    ) {
+      return;
+    }
+    // 修改元素状态为已点击
+    block.status = 1;
+    // 移除当前元素
+    if (randomIdx >= 0) {
+      // 移除所点击的随机区域的第一个元素
+      randomBlocksVal.value[randomIdx] = randomBlocksVal.value[randomIdx].slice(
+        1,
+        randomBlocksVal.value[randomIdx].length
+      );
+    } else {
+      // 删除节点
+      // @ts-ignore
+      e.target.remove();
+      // 移除覆盖关系
+      block.higherThanBlocks.forEach((higherThanBlock) => {
+        _.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
+          return lowerThanBlock.id === block.id;
+        });
+      });
+    }
+    // 新元素加入插槽
+    let tempSlotNum = currSlotNum.value;
+    slotAreaVal.value[tempSlotNum] = block;
+    // 检查是否有可消除的
+    // block => 出现次数
+    const map: Record<string, number> = {};
+    // 去除空槽
+    const tempSlotAreaVal = slotAreaVal.value.filter(
+      (slotBlock) => !!slotBlock
+    );
+    tempSlotAreaVal.forEach((slotBlock) => {
+      const type = slotBlock.type;
+      if (!map[type]) {
+        map[type] = 1;
+      } else {
+        map[type]++;
+      }
+    });
+    console.log("tempSlotAreaVal", tempSlotAreaVal);
+    console.log("map", map);
+    // 得到新数组
+    const newSlotAreaVal = new Array(gameConfig.slotNum).fill(null);
+    tempSlotNum = 0;
+    tempSlotAreaVal.forEach((slotBlock) => {
+      // 成功消除（不添加到新数组中）
+      if (map[slotBlock.type] >= gameConfig.composeNum) {
+        // 块状态改为已消除
+        slotBlock.status = 2;
+        return;
+      }
+      newSlotAreaVal[tempSlotNum++] = slotBlock;
+    });
+    slotAreaVal.value = newSlotAreaVal;
+    currSlotNum.value = tempSlotNum;
+    // 游戏结束
+    if (tempSlotNum >= gameConfig.slotNum) {
+      gameStatus.value = 2;
+      setTimeout(() => {
+        alert("你输了");
+      }, 2000);
+    }
+  };
+
+  /**
+   * 开始游戏
+   */
+  const doStart = () => {
+    gameStatus.value = 0;
+    const { levelBlocks, randomBlocks, slotArea } = initGame();
+    console.log(levelBlocks, randomBlocks, slotArea);
+    levelBlocksVal.value = levelBlocks;
+    randomBlocksVal.value = randomBlocks;
+    slotAreaVal.value = slotArea;
+    gameStatus.value = 1;
+  };
+
+  return {
+    gameStatus,
+    levelBlocksVal,
+    randomBlocksVal,
+    slotAreaVal,
+    widthUnit,
+    heightUnit,
+    doClickBlock,
+    doStart,
+  };
+};
+
+export default useGame;
--- a/src/core/gameV1.ts
+++ b/src/core/gameV1.ts
@ -0,0 +1,395 @@
+/**
+ * 游戏逻辑 V1（划分层级生成，可能出现同层级互相覆盖的情况，故废弃）
+ *
+ * @author yupi https://github.com/liyupi
+ */
+import { useGlobalStore } from "./globalStore";
+// @ts-ignore
+import _ from "lodash";
+import { nextTick, ref } from "vue";
+
+const useGameV1 = () => {
+  const { gameConfig } = useGlobalStore();
+
+  // 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
+  const gameStatus = ref(0);
+
+  // 各层块
+  const levelBlocksVal = ref<BlockType[][]>([]);
+  // 随机区块
+  const randomBlocksVal = ref<BlockType[][]>([]);
+  // 插槽区
+  const slotAreaVal = ref<BlockType[]>([]);
+  // 当前槽占用数
+  const currSlotNum = ref(0);
+
+  // 保存所有块（包括随机块）
+  const blockData: Record<number, BlockType> = {};
+
+  // 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
+  const boxWidthNum = 24;
+  const boxHeightNum = 24;
+
+  // 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
+  let chessBoard: ChessBoardUnitType[][] = [];
+
+  /**
+   * 初始化指定大小的棋盘
+   * @param width
+   * @param height
+   */
+  const initChessBoard = (width: number, height: number) => {
+    chessBoard = new Array(width);
+    for (let i = 0; i < width; i++) {
+      chessBoard[i] = new Array(height);
+      for (let j = 0; j < height; j++) {
+        chessBoard[i][j] = {
+          blocks: [],
+        };
+      }
+    }
+  };
+
+  // 初始化棋盘
+  initChessBoard(boxWidthNum, boxHeightNum);
+
+  /**
+   * 游戏初始化
+   */
+  const initGame = () => {
+    console.log("initGame", gameConfig);
+
+    // 1. 规划块数
+    // 块数单位（总块数必须是该值的倍数）
+    const blockNumUnit = gameConfig.composeNum * gameConfig.typeNum;
+    console.log("块数单位", blockNumUnit);
+
+    // 随机生成的总块数
+    const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
+      return pre + curr;
+    }, 0);
+    console.log("随机生成的总块数", totalRandomBlockNum);
+
+    // 需要的最小块数
+    const minBlockNum = Math.ceil(
+      (gameConfig.levelNum *
+        (gameConfig.topBlockNum + gameConfig.minBottomBlockNum)) /
+        2 +
+        totalRandomBlockNum
+    );
+    console.log("需要的最小块数", minBlockNum);
+
+    // 补齐到 blockNumUnit 的倍数
+    // e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
+    let totalBlockNum = minBlockNum;
+    if (totalBlockNum % blockNumUnit !== 0) {
+      totalBlockNum =
+        (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
+    }
+    console.log("总块数", totalBlockNum);
+
+    // 2. 随机生成块
+    // 保存所有块的数组
+    const animalBlocks: string[] = [];
+    // 需要用到的动物数组
+    const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
+    // 依次把块塞到数组里
+    for (let i = 0; i < totalBlockNum; i++) {
+      animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
+    }
+    // 打乱数组
+    const randomAnimalBlocks = _.shuffle(animalBlocks);
+    // 下一个要塞入的块
+    let pos = 0;
+
+    // 3. 填充结果
+    // 计算随机生成的块
+    const randomBlocks: BlockType[][] = [];
+    gameConfig.randomBlocks.forEach((randomBlock, idx) => {
+      randomBlocks[idx] = [];
+      for (let i = 0; i < randomBlock; i++) {
+        const newBlock = {
+          id: pos,
+          level: i,
+          status: 0,
+          type: randomAnimalBlocks[pos],
+          higherThanBlocks: [] as BlockType[],
+          lowerThanBlocks: [] as BlockType[],
+        } as BlockType;
+        randomBlocks[idx].push(newBlock);
+        blockData[pos] = newBlock;
+        pos++;
+      }
+    });
+    // 剩余块数
+    let leftBlockNum = totalBlockNum - totalRandomBlockNum;
+
+    // 计算每层生成的块数
+    // 每层递减块数
+    // e.g. 最上层 38 块，最下层不小于 20 块，共 10 层，则每层递减块数为 18 / 9 = 2
+    const stepNum = Math.floor(
+      (gameConfig.topBlockNum - gameConfig.minBottomBlockNum) /
+        (gameConfig.levelNum - 1)
+    );
+    console.log("每层递减块数", stepNum);
+
+    // 下一层要分配的块数
+    let nextBlockNum = gameConfig.topBlockNum;
+    // 各层的块
+    const levelBlocks: BlockType[][] = [];
+    for (let i = 0; i < gameConfig.levelNum; i++) {
+      // 最后一层，所有的块都分配出去
+      if (i == gameConfig.levelNum - 1) {
+        nextBlockNum = leftBlockNum;
+      }
+      levelBlocks[i] = [];
+      // 添加新块
+      for (let j = 0; j < nextBlockNum; j++) {
+        if (pos >= totalBlockNum) {
+          break;
+        }
+        const newBlock = {
+          id: pos,
+          level: i,
+          status: 0,
+          type: randomAnimalBlocks[pos],
+          higherThanBlocks: [] as BlockType[],
+          lowerThanBlocks: [] as BlockType[],
+        } as BlockType;
+        levelBlocks[i].push(newBlock);
+        blockData[pos] = newBlock;
+        pos++;
+      }
+      leftBlockNum -= nextBlockNum;
+      nextBlockNum -= stepNum;
+    }
+    console.log("剩余块数", leftBlockNum);
+
+    // 4. 初始化空插槽
+    const slotArea: BlockType[] = new Array(gameConfig.slotNum).fill(null);
+
+    console.log(
+      "各层数量",
+      levelBlocks
+        .map((levelBlock, idx) => `第${idx}层：${levelBlock.length} 块`)
+        .join("\n")
+    );
+    console.log("随机块情况", randomBlocks);
+
+    return {
+      levelBlocks,
+      randomBlocks,
+      slotArea,
+    };
+  };
+
+  /**
+   * 随机生成块坐标
+   */
+  const randomPos = () => {
+    const levelBoardDom: any = document.getElementsByClassName("level-board");
+    // 为方便给格子设置固定宽高，不动态计算了
+    // const totalWidth = levelBoardDom[0].clientWidth;
+    const blockDomList = document.getElementsByClassName("level-block");
+    // 每个格子的宽高
+    const widthUnit = 14;
+    const heightUnit = 14;
+    // 设置父容器宽高
+    levelBoardDom[0].style.width = widthUnit * boxWidthNum + "px";
+    levelBoardDom[0].style.height = heightUnit * boxHeightNum + "px";
+    // 遍历时层级递增
+    for (let i = 0; i < blockDomList.length; i++) {
+      let blockDom: any = blockDomList[i];
+      const blockId = blockDom.dataset.id;
+      const block = blockData[blockId];
+      blockDom.style.position = "absolute";
+      // 随机生成坐标，当前层级不能重复
+      let newPosX;
+      let newPosY;
+      while (true) {
+        newPosX = Math.floor(Math.random() * (boxWidthNum - 2));
+        newPosY = Math.floor(Math.random() * (boxHeightNum - 2));
+        const currChessBoardUnit = chessBoard[newPosX][newPosY];
+        // 同层级元素不能完全重叠
+        if (
+          currChessBoardUnit.blocks.length < 1 ||
+          currChessBoardUnit.blocks[currChessBoardUnit.blocks.length - 1]
+            .level != block.level
+        ) {
+          break;
+        }
+      }
+      chessBoard[newPosX][newPosY].blocks.push(block);
+      block.x = newPosX;
+      block.y = newPosY;
+      blockDom.style.left = newPosX * widthUnit + "px";
+      blockDom.style.top = newPosY * heightUnit + "px";
+    }
+  };
+
+  // 可能导致死循环，暂不使用
+  // /**
+  //  * 判断某个坐标是否和其他块有重叠
+  //  * @param x
+  //  * @param y
+  //  * @param block
+  //  */
+  // const hasOverlap = (x: number, y: number, block: BlockType) => {
+  //   // 确定该块附近的格子坐标范围
+  //   const minX = Math.max(x - 2, 0);
+  //   const minY = Math.max(y - 2, 0);
+  //   const maxX = Math.min(x + 3, boxWidthNum - 2);
+  //   const maxY = Math.min(y + 3, boxWidthNum - 2);
+  //   // 遍历该块附近的格子
+  //   for (let i = minX; i < maxX; i++) {
+  //     for (let j = minY; j < maxY; j++) {
+  //       const relationBlocks = chessBoard[i][j].blocks;
+  //       for (const relationBlock of relationBlocks) {
+  //         if (relationBlocks[relationBlocks.length - 1].level != block.level) {
+  //           return false;
+  //         }
+  //       }
+  //     }
+  //   }
+  //   return true;
+  // };
+
+  /**
+   * 绑定层级覆盖关系（用于确认哪些元素是当前可点击的）
+   *
+   * 核心逻辑：每个块压住和其坐标有交集棋盘格内所有 level 大于它的点，双向建立联系
+   */
+  const bindLevelRelation = () => {
+    levelBlocksVal.value.forEach((levelBlock) => {
+      levelBlock.forEach((block) => {
+        const x = block.x;
+        const y = block.y;
+        // 确定该块附近的格子坐标范围
+        const minX = Math.max(x - 2, 0);
+        const minY = Math.max(y - 2, 0);
+        const maxX = Math.min(x + 3, boxWidthNum - 2);
+        const maxY = Math.min(y + 3, boxWidthNum - 2);
+        // 遍历该块附近的格子
+        for (let i = minX; i < maxX; i++) {
+          for (let j = minY; j < maxY; j++) {
+            const relationBlocks = chessBoard[i][j].blocks;
+            relationBlocks.forEach((relationBlock) => {
+              // 建立覆盖关系
+              if (relationBlock.level > block.level) {
+                block.higherThanBlocks.push(relationBlock);
+                relationBlock.lowerThanBlocks.push(block);
+              }
+            });
+          }
+        }
+      });
+    });
+  };
+
+  /**
+   * 点击块事件
+   * @param block
+   * @param e
+   * @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
+   */
+  const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
+    // 已经输了 / 已经被点击 / 有上层块，不能再点击
+    if (
+      currSlotNum.value >= gameConfig.slotNum ||
+      block.status !== 0 ||
+      block.lowerThanBlocks.length > 0
+    ) {
+      return;
+    }
+    // 修改元素状态为已点击
+    block.status = 1;
+    // 移除当前元素
+    if (randomIdx >= 0) {
+      // 移除所点击的随机区域的第一个元素
+      randomBlocksVal.value[randomIdx] = randomBlocksVal.value[randomIdx].slice(
+        1,
+        randomBlocksVal.value[randomIdx].length
+      );
+    } else {
+      // 删除节点
+      // @ts-ignore
+      e.target.remove();
+      // 移除覆盖关系
+      block.higherThanBlocks.forEach((higherThanBlock) => {
+        _.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
+          return lowerThanBlock.id === block.id;
+        });
+      });
+    }
+    // 新元素加入插槽
+    let tempSlotNum = currSlotNum.value;
+    slotAreaVal.value[tempSlotNum] = block;
+    // 检查是否有可消除的
+    // block => 出现次数
+    const map: Record<string, number> = {};
+    // 去除空槽
+    const tempSlotAreaVal = slotAreaVal.value.filter(
+      (slotBlock) => !!slotBlock
+    );
+    tempSlotAreaVal.forEach((slotBlock) => {
+      const type = slotBlock.type;
+      if (!map[type]) {
+        map[type] = 1;
+      } else {
+        map[type]++;
+      }
+    });
+    console.log("tempSlotAreaVal", tempSlotAreaVal);
+    console.log("map", map);
+    // 得到新数组
+    const newSlotAreaVal = new Array(gameConfig.slotNum).fill(null);
+    tempSlotNum = 0;
+    tempSlotAreaVal.forEach((slotBlock) => {
+      // 成功消除（不添加到新数组中）
+      if (map[slotBlock.type] >= gameConfig.composeNum) {
+        // 块状态改为已消除
+        slotBlock.status = 2;
+        return;
+      }
+      newSlotAreaVal[tempSlotNum++] = slotBlock;
+    });
+    slotAreaVal.value = newSlotAreaVal;
+    currSlotNum.value = tempSlotNum;
+    // 游戏结束
+    if (tempSlotNum >= gameConfig.slotNum) {
+      gameStatus.value = 2;
+      setTimeout(() => {
+        alert("你输了");
+      }, 2000);
+    }
+  };
+
+  /**
+   * 开始游戏
+   */
+  const doStart = () => {
+    gameStatus.value = 0;
+    const { levelBlocks, randomBlocks, slotArea } = initGame();
+    console.log(levelBlocks, randomBlocks, slotArea);
+    levelBlocksVal.value = levelBlocks;
+    randomBlocksVal.value = randomBlocks;
+    slotAreaVal.value = slotArea;
+    // 等 dom 更新后才刷新坐标
+    nextTick(() => {
+      randomPos();
+      bindLevelRelation();
+      gameStatus.value = 1;
+    });
+  };
+
+  return {
+    gameStatus,
+    levelBlocksVal,
+    randomBlocksVal,
+    slotAreaVal,
+    doClickBlock,
+    doStart,
+  };
+};
+
+export default useGameV1;
--- a/src/core/globalStore.ts
+++ b/src/core/globalStore.ts
@ -0,0 +1,74 @@
+import { defineStore } from "pinia";
+
+const defaultGameConfig = {
+  // 槽容量
+  slotNum: 7,
+  // 需要多少个一样块的才能合成
+  composeNum: 3,
+  // 动物类别数
+  typeNum: 10,
+  // 每层块数（大致）
+  levelBlockNum: 30,
+  // 边界收缩步长
+  borderStep: 1,
+  // 总层数（最小为 2）
+  levelNum: 2,
+  // 最上层块数
+  topBlockNum: 40,
+  // 最下层块数最小值
+  minBottomBlockNum: 20,
+  // 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
+  randomBlocks: [8, 8],
+  // 动物数组
+  animals: [
+    "🐔",
+    "🐟",
+    "🦆",
+    "🐶",
+    "🐱",
+    "🐴",
+    "🐑",
+    "🐦",
+    "🐧",
+    "🐊",
+    "🐺",
+    "🐒",
+    "🐳",
+    "🐬",
+    "🐢",
+    "🦖",
+    "🦒",
+    "🦁",
+    "🐍",
+    "🐭",
+    "🐂",
+  ],
+};
+
+/**
+ * 全局状态存储
+ *
+ * @author yupi
+ */
+export const useGlobalStore = defineStore("global", {
+  state: () => ({
+    gameConfig: { ...defaultGameConfig },
+  }),
+  getters: {},
+  // 持久化
+  persist: {
+    key: "global",
+    storage: window.localStorage,
+    beforeRestore: (context) => {
+      console.log("load globalStore data start");
+    },
+    afterRestore: (context) => {
+      console.log("load globalStore data end");
+    },
+  },
+  actions: {
+    reset() {
+      this.$reset();
+    },
+  },
+});
--- a/src/core/type.d.ts
+++ b/src/core/type.d.ts
@ -0,0 +1,24 @@
+/**
+ * 块类型
+ */
+interface BlockType {
+  id: number;
+  x: number;
+  y: number;
+  level: number;
+  type: string;
+  // 0 - 正常, 1 - 已点击, 2 - 已消除
+  status: 0 | 1 | 2;
+  // 压住的其他块
+  higherThanBlocks: BlockType[];
+  // 被哪些块压住（为空表示可点击）
+  lowerThanBlocks: BlockType[];
+}
+
+/**
+ * 每个格子单元类型
+ */
+interface ChessBoardUnitType {
+  // 放到当前格子里的块（层级越高下标越大）
+  blocks: BlockType[];
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,21 @@
+import { createApp } from "vue";
+import Antd from "ant-design-vue";
+import App from "./App.vue";
+import * as VueRouter from "vue-router";
+import routes from "./configs/routes";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import "ant-design-vue/dist/antd.css";
+import "./style.css";
+
+// 路由
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHashHistory(),
+  routes,
+});
+
+// 状态管理
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+createApp(App).use(Antd).use(router).use(pinia).mount("#app");
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@ -0,0 +1,119 @@
+<template>
+  <div id="indexPage">
+    <a-row align="center">
+      <a-button
+        type="primary"
+        block
+        style="margin-bottom: 16px"
+        @click="doStart"
+      >
+        开始
+      </a-button>
+      <!-- 分层选块 -->
+      <div class="level-board">
+        <div
+          v-for="(block, idx) in levelBlocksVal"
+          v-show="gameStatus > 0"
+          :key="idx"
+          class="block level-block"
+          :class="{ disabled: block.lowerThanBlocks.length > 0 }"
+          :data-id="block.id"
+          :style="{
+            zIndex: 100 + block.level,
+            left: block.x * widthUnit + 'px',
+            top: block.y * heightUnit + 'px',
+          }"
+          @click="(e) => doClickBlock(block, e)"
+        >
+          {{ block.type }}
+        </div>
+      </div>
+      <!-- 随机选块 -->
+      <div class="random-board">
+        <div
+          v-for="(randomBlock, index) in randomBlocksVal"
+          :key="index"
+          class="random-area"
+        >
+          <div
+            v-if="randomBlock.length > 0"
+            class="block"
+            @click="(e) => doClickBlock(randomBlock[0], e, index)"
+          >
+            {{ randomBlock[0].type }}
+          </div>
+          <div
+            v-for="num in Math.max(randomBlock.length - 1, 0)"
+            :key="num"
+            class="block disabled"
+          ></div>
+        </div>
+      </div>
+      <!-- 槽位 -->
+      <div v-if="slotAreaVal.length > 0" class="slot-board">
+        <div
+          v-for="(slotBlock, index) in slotAreaVal"
+          :key="index"
+          class="block"
+        >
+          {{ slotBlock?.type }}
+        </div>
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useGame from "../core/game";
+
+const {
+  gameStatus,
+  levelBlocksVal,
+  randomBlocksVal,
+  slotAreaVal,
+  widthUnit,
+  heightUnit,
+  doClickBlock,
+  doStart,
+} = useGame();
+</script>
+
+<style scoped>
+.level-board {
+  position: relative;
+}
+
+.level-block {
+  position: absolute;
+}
+
+.random-board {
+  margin-top: 8px;
+}
+
+.random-area {
+  margin-top: 8px;
+}
+
+.slot-board {
+  margin-top: 24px;
+  border: 10px solid saddlebrown;
+}
+
+.block {
+  font-size: 28px;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  border: 1px solid #eee;
+  background: white;
+  text-align: center;
+  vertical-align: top;
+  display: inline-block;
+}
+
+.disabled {
+  background: grey;
+  cursor: not-allowed;
+}
+</style>
--- a/src/pages/IndexPageV1.vue
+++ b/src/pages/IndexPageV1.vue
@ -0,0 +1,507 @@
+<template>
+  <div id="indexPage">
+    <a-row align="center">
+      <a-button
+        type="primary"
+        block
+        style="margin-bottom: 16px"
+        @click="doStart"
+      >
+        开始
+      </a-button>
+      <!-- 分层选块 -->
+      <div class="level-board">
+        <div
+          v-for="(levelBlock, index) in levelBlocksVal"
+          :key="index"
+          class="level"
+        >
+          <div
+            v-for="(block, idx) in levelBlock"
+            v-show="gameStatus > 0"
+            :key="idx"
+            class="block level-block"
+            :class="{ disabled: block.lowerThanBlocks.length > 0 }"
+            :data-id="block.id"
+            :style="{ zIndex: 10000 - index }"
+            @click="(e) => doClickBlock(block, e)"
+          >
+            {{ block.type }}
+          </div>
+        </div>
+      </div>
+      <!-- 随机选块 -->
+      <div class="random-board">
+        <div
+          v-for="(randomBlock, index) in randomBlocksVal"
+          :key="index"
+          class="random-area"
+        >
+          <div
+            v-if="randomBlock.length > 0"
+            class="block"
+            @click="(e) => doClickBlock(randomBlock[0], e, index)"
+          >
+            {{ randomBlock[0].type }}
+          </div>
+          <div
+            v-for="num in Math.max(randomBlock.length - 1, 0)"
+            :key="num"
+            class="block disabled"
+          ></div>
+        </div>
+      </div>
+      <!-- 槽位 -->
+      <div v-if="slotAreaVal.length > 0" class="slot-board">
+        <div
+          v-for="(slotBlock, index) in slotAreaVal"
+          :key="index"
+          class="block"
+        >
+          {{ slotBlock?.type }}
+        </div>
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "../core/globalStore";
+// @ts-ignore
+import _ from "lodash";
+import { nextTick, ref } from "vue";
+
+const { gameConfig } = useGlobalStore();
+
+// 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
+const gameStatus = ref(0);
+
+// 各层块
+const levelBlocksVal = ref<BlockType[][]>([]);
+// 随机区块
+const randomBlocksVal = ref<BlockType[][]>([]);
+// 插槽区
+const slotAreaVal = ref<BlockType[]>([]);
+// 当前槽占用数
+const currSlotNum = ref(0);
+
+/**
+ * 块类型
+ */
+interface BlockType {
+  id: number;
+  x: number;
+  y: number;
+  level: number;
+  type: string;
+  // 0 - 正常, 1 - 已点击, 2 - 已消除
+  status: 0 | 1 | 2;
+  // 压住的其他块
+  higherThanBlocks: BlockType[];
+  // 被哪些块压住（为空表示可点击）
+  lowerThanBlocks: BlockType[];
+}
+
+/**
+ * 每个格子单元类型
+ */
+interface ChessBoardUnitType {
+  // 放到当前格子里的块（层级越高下标越小）
+  blocks: BlockType[];
+}
+
+// 保存所有块（包括随机块）
+const blockData: Record<number, BlockType> = {};
+
+// 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
+const boxWidthNum = 24;
+const boxHeightNum = 24;
+
+// 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
+let chessBoard: ChessBoardUnitType[][] = [];
+
+/**
+ * 初始化指定大小的棋盘
+ * @param width
+ * @param height
+ */
+const initChessBoard = (width: number, height: number) => {
+  chessBoard = new Array(width);
+  for (let i = 0; i < width; i++) {
+    chessBoard[i] = new Array(height);
+    for (let j = 0; j < height; j++) {
+      chessBoard[i][j] = {
+        blocks: [],
+      };
+    }
+  }
+};
+
+// 初始化棋盘
+initChessBoard(boxWidthNum, boxHeightNum);
+
+/**
+ * 游戏初始化
+ */
+const initGame = () => {
+  console.log("initGame", gameConfig);
+
+  // 1. 规划块数
+  // 块数单位（总块数必须是该值的倍数）
+  const blockNumUnit = gameConfig.composeNum * gameConfig.typeNum;
+  console.log("块数单位", blockNumUnit);
+
+  // 随机生成的总块数
+  const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
+    return pre + curr;
+  }, 0);
+  console.log("随机生成的总块数", totalRandomBlockNum);
+
+  // 需要的最小块数
+  const minBlockNum = Math.ceil(
+    (gameConfig.levelNum *
+      (gameConfig.topBlockNum + gameConfig.minBottomBlockNum)) /
+      2 +
+      totalRandomBlockNum
+  );
+  console.log("需要的最小块数", minBlockNum);
+
+  // 补齐到 blockNumUnit 的倍数
+  // e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
+  let totalBlockNum = minBlockNum;
+  if (totalBlockNum % blockNumUnit !== 0) {
+    totalBlockNum = (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
+  }
+  console.log("总块数", totalBlockNum);
+
+  // 2. 随机生成块
+  // 保存所有块的数组
+  const animalBlocks: string[] = [];
+  // 需要用到的动物数组
+  const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
+  // 依次把块塞到数组里
+  for (let i = 0; i < totalBlockNum; i++) {
+    animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
+  }
+  // 打乱数组
+  const randomAnimalBlocks = _.shuffle(animalBlocks);
+  // 下一个要塞入的块
+  let pos = 0;
+
+  // 3. 填充结果
+  // 计算随机生成的块
+  const randomBlocks: BlockType[][] = [];
+  gameConfig.randomBlocks.forEach((randomBlock, idx) => {
+    randomBlocks[idx] = [];
+    for (let i = 0; i < randomBlock; i++) {
+      const newBlock = {
+        id: pos,
+        level: i,
+        status: 0,
+        type: randomAnimalBlocks[pos],
+        higherThanBlocks: [] as BlockType[],
+        lowerThanBlocks: [] as BlockType[],
+      } as BlockType;
+      randomBlocks[idx].push(newBlock);
+      blockData[pos] = newBlock;
+      pos++;
+    }
+  });
+  // 剩余块数
+  let leftBlockNum = totalBlockNum - totalRandomBlockNum;
+
+  // 计算每层生成的块数
+  // 每层递减块数
+  // e.g. 最上层 38 块，最下层不小于 20 块，共 10 层，则每层递减块数为 18 / 9 = 2
+  const stepNum = Math.floor(
+    (gameConfig.topBlockNum - gameConfig.minBottomBlockNum) /
+      (gameConfig.levelNum - 1)
+  );
+  console.log("每层递减块数", stepNum);
+
+  // 下一层要分配的块数
+  let nextBlockNum = gameConfig.topBlockNum;
+  // 各层的块
+  const levelBlocks: BlockType[][] = [];
+  for (let i = 0; i < gameConfig.levelNum; i++) {
+    // 最后一层，所有的块都分配出去
+    if (i == gameConfig.levelNum - 1) {
+      nextBlockNum = leftBlockNum;
+    }
+    levelBlocks[i] = [];
+    // 添加新块
+    for (let j = 0; j < nextBlockNum; j++) {
+      if (pos >= totalBlockNum) {
+        break;
+      }
+      const newBlock = {
+        id: pos,
+        level: i,
+        status: 0,
+        type: randomAnimalBlocks[pos],
+        higherThanBlocks: [] as BlockType[],
+        lowerThanBlocks: [] as BlockType[],
+      } as BlockType;
+      levelBlocks[i].push(newBlock);
+      blockData[pos] = newBlock;
+      pos++;
+    }
+    leftBlockNum -= nextBlockNum;
+    nextBlockNum -= stepNum;
+  }
+  console.log("剩余块数", leftBlockNum);
+
+  // 4. 初始化空插槽
+  const slotArea: BlockType[] = new Array(gameConfig.slotNum).fill(null);
+
+  console.log(
+    "各层数量",
+    levelBlocks
+      .map((levelBlock, idx) => `第${idx}层：${levelBlock.length} 块`)
+      .join("\n")
+  );
+  console.log("随机块情况", randomBlocks);
+
+  return {
+    levelBlocks,
+    randomBlocks,
+    slotArea,
+  };
+};
+
+/**
+ * 随机生成块坐标
+ */
+const randomPos = () => {
+  const levelBoardDom: any = document.getElementsByClassName("level-board");
+  // 为方便给格子设置固定宽高，不动态计算了
+  // const totalWidth = levelBoardDom[0].clientWidth;
+  const blockDomList = document.getElementsByClassName("level-block");
+  // 每个格子的宽高
+  const widthUnit = 14;
+  const heightUnit = 14;
+  // 设置父容器宽高
+  levelBoardDom[0].style.width = widthUnit * boxWidthNum + "px";
+  levelBoardDom[0].style.height = heightUnit * boxHeightNum + "px";
+  // 遍历时层级递增
+  for (let i = 0; i < blockDomList.length; i++) {
+    let blockDom: any = blockDomList[i];
+    const blockId = blockDom.dataset.id;
+    const block = blockData[blockId];
+    blockDom.style.position = "absolute";
+    // 随机生成坐标，当前层级不能重复
+    let newPosX;
+    let newPosY;
+    while (true) {
+      newPosX = Math.floor(Math.random() * (boxWidthNum - 2));
+      newPosY = Math.floor(Math.random() * (boxHeightNum - 2));
+      const currChessBoardUnit = chessBoard[newPosX][newPosY];
+      // 同层级元素不能完全重叠
+      if (
+        currChessBoardUnit.blocks.length < 1 ||
+        currChessBoardUnit.blocks[currChessBoardUnit.blocks.length - 1].level !=
+          block.level
+      ) {
+        break;
+      }
+    }
+    chessBoard[newPosX][newPosY].blocks.push(block);
+    block.x = newPosX;
+    block.y = newPosY;
+    blockDom.style.left = newPosX * widthUnit + "px";
+    blockDom.style.top = newPosY * heightUnit + "px";
+  }
+};
+
+// 可能导致死循环，暂不使用
+// /**
+//  * 判断某个坐标是否和其他块有重叠
+//  * @param x
+//  * @param y
+//  * @param block
+//  */
+// const hasOverlap = (x: number, y: number, block: BlockType) => {
+//   // 确定该块附近的格子坐标范围
+//   const minX = Math.max(x - 2, 0);
+//   const minY = Math.max(y - 2, 0);
+//   const maxX = Math.min(x + 3, boxWidthNum - 2);
+//   const maxY = Math.min(y + 3, boxWidthNum - 2);
+//   // 遍历该块附近的格子
+//   for (let i = minX; i < maxX; i++) {
+//     for (let j = minY; j < maxY; j++) {
+//       const relationBlocks = chessBoard[i][j].blocks;
+//       for (const relationBlock of relationBlocks) {
+//         if (relationBlocks[relationBlocks.length - 1].level != block.level) {
+//           return false;
+//         }
+//       }
+//     }
+//   }
+//   return true;
+// };
+
+/**
+ * 绑定层级覆盖关系（用于确认哪些元素是当前可点击的）
+ *
+ * 核心逻辑：每个块压住和其坐标有交集棋盘格内所有 level 大于它的点，双向建立联系
+ */
+const bindLevelRelation = () => {
+  levelBlocksVal.value.forEach((levelBlock) => {
+    levelBlock.forEach((block) => {
+      const x = block.x;
+      const y = block.y;
+      // 确定该块附近的格子坐标范围
+      const minX = Math.max(x - 2, 0);
+      const minY = Math.max(y - 2, 0);
+      const maxX = Math.min(x + 3, boxWidthNum - 2);
+      const maxY = Math.min(y + 3, boxWidthNum - 2);
+      // 遍历该块附近的格子
+      for (let i = minX; i < maxX; i++) {
+        for (let j = minY; j < maxY; j++) {
+          const relationBlocks = chessBoard[i][j].blocks;
+          relationBlocks.forEach((relationBlock) => {
+            // 建立覆盖关系
+            if (relationBlock.level > block.level) {
+              block.higherThanBlocks.push(relationBlock);
+              relationBlock.lowerThanBlocks.push(block);
+            }
+          });
+        }
+      }
+    });
+  });
+};
+
+/**
+ * 开始游戏
+ */
+const doStart = () => {
+  gameStatus.value = 0;
+  const { levelBlocks, randomBlocks, slotArea } = initGame();
+  console.log(levelBlocks, randomBlocks, slotArea);
+  levelBlocksVal.value = levelBlocks;
+  randomBlocksVal.value = randomBlocks;
+  slotAreaVal.value = slotArea;
+  // 等 dom 更新后才刷新坐标
+  nextTick(() => {
+    randomPos();
+    bindLevelRelation();
+    gameStatus.value = 1;
+  });
+};
+
+/**
+ * 点击块事件
+ * @param block
+ * @param e
+ * @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
+ */
+const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
+  // 已经输了 / 已经被点击 / 有上层块，不能再点击
+  if (
+    currSlotNum.value >= gameConfig.slotNum ||
+    block.status !== 0 ||
+    block.lowerThanBlocks.length > 0
+  ) {
+    return;
+  }
+  // 修改元素状态为已点击
+  block.status = 1;
+  // 移除当前元素
+  if (randomIdx >= 0) {
+    // 移除所点击的随机区域的第一个元素
+    randomBlocksVal.value[randomIdx] = randomBlocksVal.value[randomIdx].slice(
+      1,
+      randomBlocksVal.value[randomIdx].length
+    );
+  } else {
+    // 删除节点
+    // @ts-ignore
+    e.target.remove();
+    // 移除覆盖关系
+    block.higherThanBlocks.forEach((higherThanBlock) => {
+      _.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
+        return lowerThanBlock.id === block.id;
+      });
+    });
+  }
+  // 新元素加入插槽
+  let tempSlotNum = currSlotNum.value;
+  slotAreaVal.value[tempSlotNum] = block;
+  // 检查是否有可消除的
+  // block => 出现次数
+  const map: Record<string, number> = {};
+  // 去除空槽
+  const tempSlotAreaVal = slotAreaVal.value.filter((slotBlock) => !!slotBlock);
+  tempSlotAreaVal.forEach((slotBlock) => {
+    const type = slotBlock.type;
+    if (!map[type]) {
+      map[type] = 1;
+    } else {
+      map[type]++;
+    }
+  });
+  console.log("tempSlotAreaVal", tempSlotAreaVal);
+  console.log("map", map);
+  // 得到新数组
+  const newSlotAreaVal = new Array(gameConfig.slotNum).fill(null);
+  tempSlotNum = 0;
+  tempSlotAreaVal.forEach((slotBlock) => {
+    // 成功消除（不添加到新数组中）
+    if (map[slotBlock.type] >= gameConfig.composeNum) {
+      // 块状态改为已消除
+      slotBlock.status = 2;
+      return;
+    }
+    newSlotAreaVal[tempSlotNum++] = slotBlock;
+  });
+  slotAreaVal.value = newSlotAreaVal;
+  currSlotNum.value = tempSlotNum;
+  // 游戏结束
+  if (tempSlotNum >= gameConfig.slotNum) {
+    gameStatus.value = 2;
+    setTimeout(() => {
+      alert("你输了");
+    }, 2000);
+  }
+};
+</script>
+
+<style scoped>
+.level-board {
+  position: relative;
+}
+
+.level {
+}
+
+.random-board {
+  margin-top: 8px;
+}
+
+.random-area {
+  margin-top: 8px;
+}
+
+.slot-board {
+  margin-top: 24px;
+  border: 10px solid saddlebrown;
+}
+
+.block {
+  font-size: 28px;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  border: 1px solid #eee;
+  background: white;
+  text-align: center;
+  vertical-align: top;
+  display: inline-block;
+}
+
+.disabled {
+  background: grey;
+  cursor: not-allowed;
+}
+</style>
--- a/src/style.css
+++ b/src/style.css
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      // 支持 Markdown 文件加载
+      include: [/\.vue$/],
+    }),
+  ],
+});
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1,4 @@`
				`被羊了个羊虐了后，我自己做了一个！`
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`