[add] first

add 添加统计
update README.md
2022-09-30 09:48:41 +08:00 · 2022-09-18 00:47:09 +08:00 · 2022-09-18 00:42:16 +08:00 · 2022-09-18 00:41:14 +08:00 · 2022-09-18 00:20:52 +08:00 · 2022-09-18 00:09:22 +08:00
15 changed files with 8319 additions and 1634 deletions
--- a/README.md
+++ b/README.md
@ -4,9 +4,31 @@

 在线体验：https://yulegeyu.cn

-玩法：
+游戏视频：https://www.bilibili.com/video/BV1Pe411M7wh
+
+相关文章：https://mp.weixin.qq.com/s/D_I1Tq-ofhKhlp0rkOpaLA
+
+游戏截图（自定义了图案）：
+
+![游戏截图](doc/img.png)
+
+游戏特色：

 1. 支持选择难度（4 种）
 2. 支持自定义难度
-3. 支持道具
+3. 支持自定义动物图案（比如 🐔🏀）
+4. 可以无限使用技能（道具）
+5. 不需要看广告
+6. 能通关
+
+> 补一句：就出于兴趣做了几个小时，有 bug 正常哈哈，欢迎 PR~
+
+简单说下实现原理，主要有 4 个点：
+
+1. 游戏全局参数：做游戏的同学都知道，游戏中会涉及很多参数，比如槽位数量、层数等等。我们要将这些参数抽取成统一的全局变量，供其他变量使用。从而做到修改一处，游戏自动适配。还可以提供页面来让用户自定义这些参数，提高游戏的可玩性。
+2. 网格：为了让块的分布相对规整、并且为计算坐标提供方便，我将整个游戏画布分为 24 x 24 的虚拟网格，类似一个棋盘。一个块占用 3 x 3 的格子。
+3. 随机生成块：包括随机生成方块的图案和坐标。首先我根据全局参数计算出了总块数，然后用 shuffle 函数打乱存储所有动物图案的数组，再依次将数组中的图案填充到方块中。生成坐标的原理是随机选取坐标范围内的点，坐标范围可以随着层级的增加而递减，即生成的图案越来越挤，达到难度逐层加大的效果。
+4. 块的覆盖关系：怎么做到点击上层的块后，才能点下层的块呢？首先要给每个块指定一个层级属性。然后有两种思路，第 1 种是先逐层生成，然后每个格子里层级最高的块依次判断其周围格子有没有块层级大于它；第 2 种是在随机生成块的时候就给相互重叠的块绑定层级关系（即谁覆盖了我？我覆盖了谁？）。这里我选择了第 2 种方法，感觉效率会高一些。
+
+

--- a/doc/img.png
+++ b/doc/img.png
--- a/index.html
+++ b/index.html
@ -5,6 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鱼了个鱼</title>
+    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
+    <script>LA.init({id: "JonPnywkOzKkLXdw",ck: "JonPnywkOzKkLXdw"})</script>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/App.vue
+++ b/src/App.vue
@ -3,39 +3,19 @@
    <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");
+  padding: 16px 16px 50px;
  min-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;
+.content {
+  max-width: 480px;
+  margin: 0 auto;
 }
 </style>
--- a/src/components/MyAd.vue
+++ b/src/components/MyAd.vue
@ -1,8 +1,15 @@
 <template>
  <div class="my-ad">
-    <a href="https://space.bilibili.com/12890453/"> 欢迎关注程序员鱼皮 </a>
-    <div>广告位招租（狗头）</div>
+    <a href="https://github.com/liyupi/yulegeyu" target="_blank">
+      <div style="background: rgba(0, 0, 0, 0.8); padding: 12px">
+        <github-outlined />
+        代码完全开源，欢迎 star
+      </div>
+    </a>
+    <!-- <a href="https://space.bilibili.com/12890453/"> 欢迎关注程序员鱼皮 </a>-->
  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { GithubOutlined } from "@ant-design/icons-vue";
+</script>
 <style></style>
--- a/src/core/game.ts
+++ b/src/core/game.ts
@ -24,13 +24,14 @@ const useGame = () => {
  const currSlotNum = ref(0);

  // 保存所有块（包括随机块）
+  const allBlocks: BlockType[] = [];
  const blockData: Record<number, BlockType> = {};

  // 总块数
-  let totalBlockNum = 0;
+  let totalBlockNum = ref(0);

  // 已消除块数
-  let clearBlockNum = 0;
+  let clearBlockNum = ref(0);

  // 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
  const boxWidthNum = 24;
@ -43,6 +44,17 @@ const useGame = () => {
  // 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
  let chessBoard: ChessBoardUnitType[][] = [];

+  // 操作历史（存储点击的块）
+  let opHistory: BlockType[] = [];
+
+  // region 技能相关
+
+  const isHolyLight = ref(false);
+
+  const canSeeRandom = ref(false);
+
+  // endregion
+
  /**
   * 初始化指定大小的棋盘
   * @param width
@ -80,9 +92,12 @@ const useGame = () => {
    console.log("块数单位", blockNumUnit);

    // 随机生成的总块数
-    const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
-      return pre + curr;
-    }, 0);
+    const totalRandomBlockNum = gameConfig.randomBlocks.reduce(
+      (pre: number, curr: number) => {
+        return pre + curr;
+      },
+      0
+    );
    console.log("随机生成的总块数", totalRandomBlockNum);

    // 需要的最小块数
@ -92,12 +107,12 @@ const useGame = () => {

    // 补齐到 blockNumUnit 的倍数
    // e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
-    totalBlockNum = minBlockNum;
-    if (totalBlockNum % blockNumUnit !== 0) {
-      totalBlockNum =
+    totalBlockNum.value = minBlockNum;
+    if (totalBlockNum.value % blockNumUnit !== 0) {
+      totalBlockNum.value =
        (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
    }
-    console.log("总块数", totalBlockNum);
+    console.log("总块数", totalBlockNum.value);

    // 2. 初始化块，随机生成块的内容
    // 保存所有块的数组
@ -105,15 +120,14 @@ const useGame = () => {
    // 需要用到的动物数组
    const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
    // 依次把块塞到数组里
-    for (let i = 0; i < totalBlockNum; i++) {
+    for (let i = 0; i < totalBlockNum.value; i++) {
      animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
    }
    // 打乱数组
    const randomAnimalBlocks = _.shuffle(animalBlocks);

    // 初始化
-    const allBlocks: BlockType[] = [];
-    for (let i = 0; i < totalBlockNum; i++) {
+    for (let i = 0; i < totalBlockNum.value; i++) {
      const newBlock = {
        id: i,
        status: 0,
@ -130,7 +144,7 @@ const useGame = () => {

    // 3. 计算随机生成的块
    const randomBlocks: BlockType[][] = [];
-    gameConfig.randomBlocks.forEach((randomBlock, idx) => {
+    gameConfig.randomBlocks.forEach((randomBlock: number, idx: number) => {
      randomBlocks[idx] = [];
      for (let i = 0; i < randomBlock; i++) {
        randomBlocks[idx].push(allBlocks[pos]);
@ -140,7 +154,7 @@ const useGame = () => {
    });

    // 剩余块数
-    let leftBlockNum = totalBlockNum - totalRandomBlockNum;
+    let leftBlockNum = totalBlockNum.value - totalRandomBlockNum;

    // 4. 计算有层级关系的块
    const levelBlocks: BlockType[] = [];
@ -271,18 +285,19 @@ const useGame = () => {
  /**
   * 点击块事件
   * @param block
-   * @param e
   * @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
+   * @param force 强制移除
   */
-  const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
-    // 已经输了 / 已经被点击 / 有上层块，不能再点击
+  const doClickBlock = (block: BlockType, randomIdx = -1, force = false) => {
+    // 已经输了 / 已经被点击 / 有上层块（且非强制和圣光），不能再点击
    if (
      currSlotNum.value >= gameConfig.slotNum ||
      block.status !== 0 ||
-      block.lowerThanBlocks.length > 0
+      (block.lowerThanBlocks.length > 0 && !force && !isHolyLight.value)
    ) {
      return;
    }
+    isHolyLight.value = false;
    // 修改元素状态为已点击
    block.status = 1;
    // 移除当前元素
@ -293,9 +308,8 @@ const useGame = () => {
        randomBlocksVal.value[randomIdx].length
      );
    } else {
-      // 删除节点
-      // @ts-ignore
-      e.target.remove();
+      // 非随机区才可撤回
+      opHistory.push(block);
      // 移除覆盖关系
      block.higherThanBlocks.forEach((higherThanBlock) => {
        _.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
@ -332,7 +346,9 @@ const useGame = () => {
        // 块状态改为已消除
        slotBlock.status = 2;
        // 已消除块数 +1
-        clearBlockNum++;
+        clearBlockNum.value++;
+        // 清除操作记录，防止撤回
+        opHistory = [];
        return;
      }
      newSlotAreaVal[tempSlotNum++] = slotBlock;
@ -346,7 +362,7 @@ const useGame = () => {
        alert("你输了");
      }, 2000);
    }
-    if (clearBlockNum >= totalBlockNum) {
+    if (clearBlockNum.value >= totalBlockNum.value) {
      gameStatus.value = 3;
    }
  };
@ -364,6 +380,111 @@ const useGame = () => {
    gameStatus.value = 1;
  };

+  // region 技能
+
+  /**
+   * 洗牌
+   *
+   * @desc 随机重洗所有未被点击的块
+   */
+  const doShuffle = () => {
+    // 遍历所有未消除的块
+    const originBlocks = allBlocks.filter((block) => block.status === 0);
+    const newBlockTypes = _.shuffle(originBlocks.map((block) => block.type));
+    let pos = 0;
+    originBlocks.forEach((block) => {
+      block.type = newBlockTypes[pos++];
+    });
+    levelBlocksVal.value = [...levelBlocksVal.value];
+  };
+
+  /**
+   * 破坏
+   *
+   * @desc 消除一组层级块
+   */
+  const doBroke = () => {
+    // 类型，块列表映射
+    const typeBlockMap: Record<string, BlockType[]> = {};
+    const blocks = levelBlocksVal.value.filter((block) => block.status === 0);
+    // 遍历所有未消除的层级块
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (!typeBlockMap[block.type]) {
+        typeBlockMap[block.type] = [];
+      }
+      typeBlockMap[block.type].push(block);
+      // 有能消除的一组块
+      if (typeBlockMap[block.type].length >= gameConfig.composeNum) {
+        typeBlockMap[block.type].forEach((clickBlock) => {
+          doClickBlock(clickBlock, -1, true);
+        });
+        console.log("doBroke", typeBlockMap[block.type]);
+        break;
+      }
+    }
+  };
+
+  /**
+   * 撤回
+   *
+   * @desc 后退一步
+   */
+  const doRevert = () => {
+    if (opHistory.length < 1) {
+      return;
+    }
+    opHistory[opHistory.length - 1].status = 0;
+    // @ts-ignore
+    slotAreaVal.value[currSlotNum.value - 1] = null;
+  };
+
+  /**
+   * 移出块
+   */
+  const doRemove = () => {
+    // 移除第一个块
+    const block = slotAreaVal.value[0];
+    if (!block) {
+      return;
+    }
+    // 槽移除块
+    for (let i = 0; i < slotAreaVal.value.length - 1; i++) {
+      slotAreaVal.value[i] = slotAreaVal.value[i + 1];
+    }
+    // @ts-ignore
+    slotAreaVal.value[slotAreaVal.value.length - 1] = null;
+    // 改变新块的坐标
+    block.x = Math.floor(Math.random() * (boxWidthNum - 2));
+    block.y = boxHeightNum - 2;
+    block.status = 0;
+    // 移除的是随机块的元素，移到层级区域
+    if (block.level < 1) {
+      block.level = 10000;
+      levelBlocksVal.value.push(block);
+    }
+  };
+
+  /**
+   * 圣光
+   *
+   * @desc 下一个块可以任意点击
+   */
+  const doHolyLight = () => {
+    isHolyLight.value = true;
+  };
+
+  /**
+   * 透视
+   *
+   * @desc 可以看到随机块
+   */
+  const doSeeRandom = () => {
+    canSeeRandom.value = !canSeeRandom.value;
+  };
+
+  // endregion
+
  return {
    gameStatus,
    levelBlocksVal,
@ -371,8 +492,20 @@ const useGame = () => {
    slotAreaVal,
    widthUnit,
    heightUnit,
+    currSlotNum,
+    opHistory,
+    totalBlockNum,
+    clearBlockNum,
+    isHolyLight,
+    canSeeRandom,
    doClickBlock,
    doStart,
+    doShuffle,
+    doBroke,
+    doRemove,
+    doRevert,
+    doHolyLight,
+    doSeeRandom,
  };
 };

--- a/src/core/gameConfig.ts
+++ b/src/core/gameConfig.ts
@ -23,7 +23,7 @@ const animals = [
  "🐂",
 ];

-export const defaultGameConfig: GameConfig = {
+export const defaultGameConfig: GameConfigType = {
  // 槽容量
  slotNum: 7,
  // 需要多少个一样块的才能合成
@ -45,7 +45,7 @@ export const defaultGameConfig: GameConfig = {
 /**
 * 简单难度
 */
-export const easyGameConfig: GameConfig = {
+export const easyGameConfig: GameConfigType = {
  // 槽容量
  slotNum: 7,
  // 需要多少个一样块的才能合成
@ -67,7 +67,7 @@ export const easyGameConfig: GameConfig = {
 /**
 * 中等难度
 */
-export const middleGameConfig: GameConfig = {
+export const middleGameConfig: GameConfigType = {
  // 槽容量
  slotNum: 7,
  // 需要多少个一样块的才能合成
@ -89,7 +89,7 @@ export const middleGameConfig: GameConfig = {
 /**
 * 困难难度
 */
-export const hardGameConfig: GameConfig = {
+export const hardGameConfig: GameConfigType = {
  // 槽容量
  slotNum: 7,
  // 需要多少个一样块的才能合成
@ -111,7 +111,7 @@ export const hardGameConfig: GameConfig = {
 /**
 * 地狱难度
 */
-export const lunaticGameConfig: GameConfig = {
+export const lunaticGameConfig: GameConfigType = {
  // 槽容量
  slotNum: 7,
  // 需要多少个一样块的才能合成
@ -129,3 +129,47 @@ export const lunaticGameConfig: GameConfig = {
  // 动物数组
  animals,
 };
+
+/**
+ * 天狱难度
+ */
+export const skyGameConfig: GameConfigType = {
+  // 槽容量
+  slotNum: 7,
+  // 需要多少个一样块的才能合成
+  composeNum: 3,
+  // 动物类别数
+  typeNum: 16,
+  // 每层块数（大致）
+  levelBlockNum: 24,
+  // 边界收缩步长
+  borderStep: 2,
+  // 总层数（最小为 2）
+  levelNum: 12,
+  // 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
+  randomBlocks: [8, 8],
+  // 动物数组
+  animals,
+};
+
+/**
+ * 羊了个羊难度
+ */
+export const yangGameConfig: GameConfigType = {
+  // 槽容量
+  slotNum: 7,
+  // 需要多少个一样块的才能合成
+  composeNum: 3,
+  // 动物类别数
+  typeNum: 18,
+  // 每层块数（大致）
+  levelBlockNum: 28,
+  // 边界收缩步长
+  borderStep: 3,
+  // 总层数（最小为 2）
+  levelNum: 15,
+  // 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
+  randomBlocks: [8, 8],
+  // 动物数组
+  animals,
+};
--- a/src/core/globalStore.ts
+++ b/src/core/globalStore.ts
@ -24,10 +24,10 @@ export const useGlobalStore = defineStore("global", {
    },
  },
  actions: {
-    setGameConfig(gameConfig: GameConfig) {
+    setGameConfig(gameConfig: GameConfigType) {
      this.gameConfig = gameConfig;
    },
-    setCustomConfig(customConfig: GameConfig) {
+    setCustomConfig(customConfig: GameConfigType) {
      this.customConfig = customConfig;
    },
    reset() {
--- a/src/core/type.d.ts
+++ b/src/core/type.d.ts
@ -24,9 +24,9 @@ interface ChessBoardUnitType {
 }

 /**
- * 游戏配置
+ * 游戏配置类型
 */
-interface GameConfig {
+interface GameConfigType {
  // 槽容量
  slotNum: number;
  // 需要多少个一样块的才能合成
@ -48,3 +48,13 @@ interface GameConfig {
  // 最下层块数最小值（已废弃）
  // minBottomBlockNum: 20,
 }
+
+/**
+ * 技能类型
+ */
+interface SkillType {
+  name: string;
+  desc: string;
+  icon: string;
+  action: function;
+}
--- a/src/pages/ConfigPage.vue
+++ b/src/pages/ConfigPage.vue
@ -20,6 +20,9 @@
      <a-form-item label="动物数" name="typeNum">
        <a-input-number v-model:value="config.typeNum" />
      </a-form-item>
+      <a-form-item label="动物图案" name="animalStr">
+        <a-input v-model:value="config.animalStr" />
+      </a-form-item>
      <a-form-item label="总层数" name="levelNum">
        <a-input-number v-model:value="config.levelNum" />
      </a-form-item>
@ -29,6 +32,12 @@
      <a-form-item label="边界收缩" name="borderStep">
        <a-input-number v-model:value="config.borderStep" />
      </a-form-item>
+      <a-form-item label="随机区数" name="randomAreaNum">
+        <a-input-number v-model:value="config.randomAreaNum" />
+      </a-form-item>
+      <a-form-item label="随机区块数" name="randomBlockNum">
+        <a-input-number v-model:value="config.randomBlockNum" />
+      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
@ -38,7 +47,10 @@
        >
          开始
        </a-button>
-        <a-button block @click="resetForm">重置</a-button>
+        <a-button block style="margin-bottom: 12px" @click="resetForm"
+          >重置
+        </a-button>
+        <a-button block danger @click="resetConfig">还原最初配置</a-button>
      </a-form-item>
    </a-form>
  </div>
@ -52,10 +64,27 @@ import { defaultGameConfig } from "../core/gameConfig";

 const formRef = ref<FormInstance>();
 const router = useRouter();
-const { setGameConfig, setCustomConfig } = useGlobalStore();
-const config = reactive<GameConfig>({ ...defaultGameConfig });
+const { customConfig, setGameConfig, setCustomConfig, reset } =
+  useGlobalStore();
+const initConfig = {
+  randomAreaNum: 2,
+  randomBlockNum: 8,
+  animalStr: defaultGameConfig.animals.join(""),
+  ...customConfig,
+};
+const config = reactive<any>(initConfig);

-const handleFinish = (values: GameConfig) => {
+/**
+ * 表单提交
+ * @param values
+ */
+const handleFinish = (values: any) => {
+  config.randomBlocks = new Array(values.randomAreaNum).fill(
+    values.randomBlockNum
+  );
+  if (values.animalStr) {
+    config.animals = Array.from(values.animalStr);
+  }
  setGameConfig(config);
  setCustomConfig(config);
  router.push("/game");
@ -65,6 +94,14 @@ const resetForm = () => {
  formRef?.value?.resetFields();
 };

+/**
+ * 还原至初始配置
+ */
+const resetConfig = () => {
+  reset();
+  router.go(0);
+};
+
 /**
 * 回上一页
 */
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@ -1,63 +1,84 @@
 <template>
  <div id="gamePage">
-    <a-button style="margin-bottom: 8px" @click="doBack"> 返回</a-button>
+    <a-row align="space-between">
+      <a-button style="margin-bottom: 8px" @click="doBack"> 返回</a-button>
+      <a-button>块数：{{ clearBlockNum }} / {{ totalBlockNum }}</a-button>
+    </a-row>
+    <!-- 胜利 -->
    <a-row align="center">
-      <!-- 胜利 -->
      <div v-if="gameStatus === 3" style="text-align: center">
        <h2>恭喜，你赢啦！🎉</h2>
-        <img src="../assets/kunkun.png" />
+        <img alt="程序员鱼皮" src="../assets/kunkun.png" />
+        <my-ad style="margin-top: 16px" />
      </div>
-      <!-- 分层选块 -->
-      <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"
-        >
+    </a-row>
+    <!-- 分层选块 -->
+    <a-row align="center">
+      <div v-show="gameStatus > 0" class="level-board">
+        <div v-for="(block, idx) in levelBlocksVal" :key="idx">
          <div
-            v-if="randomBlock.length > 0"
-            class="block"
-            @click="(e) => doClickBlock(randomBlock[0], e, index)"
+            v-if="block.status === 0"
+            class="block level-block"
+            :class="{
+              disabled: !isHolyLight && block.lowerThanBlocks.length > 0,
+            }"
+            :data-id="block.id"
+            :style="{
+              zIndex: 100 + block.level,
+              left: block.x * widthUnit + 'px',
+              top: block.y * heightUnit + 'px',
+            }"
+            @click="() => doClickBlock(block)"
          >
-            {{ randomBlock[0].type }}
+            {{ block.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>
+    <!-- 随机选块 -->
+    <a-row align="space-between" class="random-board">
+      <div
+        v-for="(randomBlock, index) in randomBlocksVal"
+        :key="index"
+        class="random-area"
+      >
+        <div
+          v-if="randomBlock.length > 0"
+          :data-id="randomBlock[0].id"
+          class="block"
+          @click="() => doClickBlock(randomBlock[0], index)"
+        >
+          {{ randomBlock[0].type }}
+        </div>
+        <!-- 隐藏 -->
+        <div
+          v-for="num in Math.max(randomBlock.length - 1, 0)"
+          :key="num"
+          class="block disabled"
+        >
+          <span v-if="canSeeRandom">
+            {{ randomBlock[num].type }}
+          </span>
+        </div>
+      </div>
+    </a-row>
+    <!-- 槽位 -->
+    <a-row v-if="slotAreaVal.length > 0" align="center" class="slot-board">
+      <div v-for="(slotBlock, index) in slotAreaVal" :key="index" class="block">
+        {{ slotBlock?.type }}
+      </div>
+    </a-row>
+    <!-- 技能 -->
+    <div class="skill-board">
+      <a-space>
+        <a-button size="small" @click="doRevert">撤回</a-button>
+        <a-button size="small" @click="doRemove">移出</a-button>
+        <a-button size="small" @click="doShuffle">洗牌</a-button>
+        <a-button size="small" @click="doBroke">破坏</a-button>
+        <a-button size="small" @click="doHolyLight">圣光</a-button>
+        <a-button size="small" @click="doSeeRandom">透视</a-button>
+      </a-space>
+    </div>
  </div>
 </template>

@ -65,6 +86,7 @@
 import useGame from "../core/game";
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
+import MyAd from "../components/MyAd.vue";

 const router = useRouter();

@ -75,8 +97,18 @@ const {
  slotAreaVal,
  widthUnit,
  heightUnit,
+  totalBlockNum,
+  clearBlockNum,
+  isHolyLight,
+  canSeeRandom,
  doClickBlock,
  doStart,
+  doShuffle,
+  doBroke,
+  doRemove,
+  doRevert,
+  doHolyLight,
+  doSeeRandom,
 } = useGame();

 /**
@ -109,8 +141,13 @@ onMounted(() => {
 }

 .slot-board {
-  margin-top: 24px;
  border: 10px solid saddlebrown;
+  margin: 16px auto;
+  width: fit-content;
+}
+
+.skill-board {
+  text-align: center;
 }

 .block {
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@ -30,34 +30,59 @@
    >
      地狱模式
    </a-button>
-    <a-button block style="margin-bottom: 16px" @click="toGamePage(null)">
-      自定义
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(skyGameConfig)"
+    >
+      天域模式
    </a-button>
-    <a href="https://github.com/liyupi/yulegeyu" target="_blank">
-      <div style="background: rgba(0, 0, 0, 0.8); padding: 12px">
-        <github-outlined />
-        代码完全开源，欢迎 star
-      </div>
-    </a>
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(yangGameConfig)"
+    >
+      羊了个羊模式
+    </a-button>
+    <a-button block style="margin-bottom: 16px" @click="() => toGamePage()">
+      自定义 🔥
+    </a-button>
+    <my-ad />
+    <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">
 import { useRouter } from "vue-router";
-import { GithubOutlined } from "@ant-design/icons-vue";
 import {
  easyGameConfig,
  middleGameConfig,
  hardGameConfig,
  lunaticGameConfig,
+  skyGameConfig,
+  yangGameConfig,
 } from "../core/gameConfig";
 import { useGlobalStore } from "../core/globalStore";
+import MyAd from "../components/MyAd.vue";

 const router = useRouter();

 const { setGameConfig } = useGlobalStore();

-const toGamePage = (config?: GameConfig) => {
+const toGamePage = (config?: GameConfigType) => {
  if (config) {
    setGameConfig(config);
    router.push("/game");
@ -71,4 +96,15 @@ const toGamePage = (config?: GameConfig) => {
 #indexPage {
  text-align: center;
 }
+
+.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/vite.config.ts
+++ b/vite.config.ts
@ -1,12 +1,13 @@
-import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue({
-      // 支持 Markdown 文件加载
-      include: [/\.vue$/],
-    }),
-  ],
+	plugins: [
+		vue({
+			base: "./",
+			// 支持 Markdown 文件加载
+			include: [/\.vue$/],
+		}),
+	],
 });
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
JianMiau	0f19b5b19b	[add] first	2022-09-30 09:48:41 +08:00
yupi	e8f95a4d4d	add 添加统计	2022-09-18 00:47:09 +08:00
yupi	02e38aca6a	update README.md	2022-09-18 00:42:16 +08:00
yupi	ce8bd53827	add 新增圣光、透视技能	2022-09-18 00:41:14 +08:00
yupi	0cf6b3a9c2	add 支持保存自定义配置 add 新增 2 种难度	2022-09-18 00:20:52 +08:00
yupi	e57adbc824	fix 修复移出道具 bug	2022-09-18 00:09:22 +08:00
yupi	06bc94fa1b	update 补充 README.md 文档	2022-09-17 23:59:15 +08:00
yupi	9b91330a83	update 补充 README.md 文档	2022-09-17 23:37:55 +08:00
yupi	fc74efac2d	add 支持自定义动物图案、随机区情况	2022-09-17 23:32:26 +08:00
yupi	75d97b11c3	bug fix	2022-09-17 17:30:42 +08:00
yupi	9b8077c536	add 添加 4 种道具	2022-09-17 12:09:46 +08:00