add 添加游戏胜利标识

README.md

@@ -6,7 +6,7 @@
 
 玩法：
 
-1. 支持选关
-2. 支持自定义难度（待更新）
-3. 无限道具（待更新）
+1. 支持选择难度（4 种）
+2. 支持自定义难度
+3. 支持道具
 

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.11",
     "lodash": "^4.17.21",
     "pinia": "^2.0.19",

src/App.vue

@@ -24,7 +24,7 @@
 #app {
   padding: 16px 16px 50px;
   background: url("assets/bg.jpeg");
-  height: 100vh;
+  min-height: 100vh;
   background-size: 100% 100%;
 }
 

src/components/MyAd.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="my-ad">
+    <a href="https://space.bilibili.com/12890453/"> 欢迎关注程序员鱼皮 </a>
+    <div>广告位招租（狗头）</div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style></style>

src/configs/routes.ts

@@ -1,6 +1,7 @@
 import { RouteRecordRaw } from "vue-router";
 import IndexPage from "../pages/IndexPage.vue";
 import GamePage from "../pages/GamePage.vue";
+import ConfigPage from "../pages/ConfigPage.vue";
 
 export default [
   {
@@ -11,4 +12,8 @@ export default [
     path: "/game",
     component: GamePage,
   },
+  {
+    path: "/config",
+    component: ConfigPage,
+  },
 ] as RouteRecordRaw[];

src/core/game.ts

@@ -6,12 +6,12 @@
 import { useGlobalStore } from "./globalStore";
 // @ts-ignore
 import _ from "lodash";
-import { nextTick, ref } from "vue";
+import { ref } from "vue";
 
 const useGame = () => {
   const { gameConfig } = useGlobalStore();
 
-  // 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
+  // 游戏状态：0 - 初始化, 1 - 进行中, 2 - 失败结束, 3 - 胜利
   const gameStatus = ref(0);
 
   // 各层块
@@ -26,6 +26,12 @@ const useGame = () => {
   // 保存所有块（包括随机块）
   const blockData: Record<number, BlockType> = {};
 
+  // 总块数
+  let totalBlockNum = 0;
+
+  // 已消除块数
+  let clearBlockNum = 0;
+
   // 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
   const boxWidthNum = 24;
   const boxHeightNum = 24;
@@ -86,7 +92,7 @@ const useGame = () => {
 
     // 补齐到 blockNumUnit 的倍数
     // e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
-    let totalBlockNum = minBlockNum;
+    totalBlockNum = minBlockNum;
     if (totalBlockNum % blockNumUnit !== 0) {
       totalBlockNum =
         (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
@@ -325,6 +331,8 @@ const useGame = () => {
       if (map[slotBlock.type] >= gameConfig.composeNum) {
         // 块状态改为已消除
         slotBlock.status = 2;
+        // 已消除块数 +1
+        clearBlockNum++;
         return;
       }
       newSlotAreaVal[tempSlotNum++] = slotBlock;
@@ -338,6 +346,9 @@ const useGame = () => {
         alert("你输了");
       }, 2000);
     }
+    if (clearBlockNum >= totalBlockNum) {
+      gameStatus.value = 3;
+    }
   };
 
   /**

src/pages/ConfigPage.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="customConfigPage">
+    <h2>
+      自定义难度
+      <a-button style="float: right" @click="doBack">返回</a-button>
+    </h2>
+    <a-form
+      ref="formRef"
+      label-align="left"
+      :label-col="{ style: { width: '120px' } }"
+      :model="config"
+      @finish="handleFinish"
+    >
+      <a-form-item label="槽容量" name="slotNum">
+        <a-input-number v-model:value="config.slotNum" />
+      </a-form-item>
+      <a-form-item label="合成数" name="composeNum">
+        <a-input-number v-model:value="config.composeNum" />
+      </a-form-item>
+      <a-form-item label="动物数" name="typeNum">
+        <a-input-number v-model:value="config.typeNum" />
+      </a-form-item>
+      <a-form-item label="总层数" name="levelNum">
+        <a-input-number v-model:value="config.levelNum" />
+      </a-form-item>
+      <a-form-item label="每层块数" name="levelBlockNum">
+        <a-input-number v-model:value="config.levelBlockNum" />
+      </a-form-item>
+      <a-form-item label="边界收缩" name="borderStep">
+        <a-input-number v-model:value="config.borderStep" />
+      </a-form-item>
+      <a-form-item>
+        <a-button
+          type="primary"
+          html-type="submit"
+          style="margin-bottom: 12px"
+          block
+        >
+          开始
+        </a-button>
+        <a-button block @click="resetForm">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { FormInstance } from "ant-design-vue";
+import { useRouter } from "vue-router";
+import { useGlobalStore } from "../core/globalStore";
+import { defaultGameConfig } from "../core/gameConfig";
+
+const formRef = ref<FormInstance>();
+const router = useRouter();
+const { setGameConfig, setCustomConfig } = useGlobalStore();
+const config = reactive<GameConfig>({ ...defaultGameConfig });
+
+const handleFinish = (values: GameConfig) => {
+  setGameConfig(config);
+  setCustomConfig(config);
+  router.push("/game");
+};
+
+const resetForm = () => {
+  formRef?.value?.resetFields();
+};
+
+/**
+ * 回上一页
+ */
+const doBack = () => {
+  router.back();
+};
+</script>
+<style></style>

src/pages/GamePage.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="gamePage">
-    <a-button @click="doBack"> ⬅️ 返回</a-button>
+    <a-button style="margin-bottom: 8px" @click="doBack"> 返回</a-button>
     <a-row align="center">
+      <!-- 胜利 -->
+      <div v-if="gameStatus === 3" style="text-align: center">
+        <h2>恭喜，你赢啦！🎉</h2>
+        <img src="../assets/kunkun.png" />
+      </div>
       <!-- 分层选块 -->
       <div class="level-board">
         <div

src/pages/IndexPage.vue

@@ -28,16 +28,23 @@
       style="margin-bottom: 16px"
       @click="toGamePage(lunaticGameConfig)"
     >
-      地域模式
+      地狱模式
     </a-button>
-    <a-button block style="margin-bottom: 16px" disabled @click="toGamePage">
-      自定义（暂未开放）
+    <a-button block style="margin-bottom: 16px" @click="toGamePage(null)">
+      自定义
     </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>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import { GithubOutlined } from "@ant-design/icons-vue";
 import {
   easyGameConfig,
   middleGameConfig,
@@ -53,8 +60,10 @@ const { setGameConfig } = useGlobalStore();
 const toGamePage = (config?: GameConfig) => {
   if (config) {
     setGameConfig(config);
+    router.push("/game");
+  } else {
+    router.push("/config");
   }
-  router.push("/game");
 };
 </script>