• vue3版本网页小游戏

    目录

    1.前言

    2.实现过程

    2.1目录

    2.2文件介绍

    3.核心逻辑分步骤详解

    4.总结

    1.前言

    最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除（3个同类消除），其特点就是“极难”，也因此成为热门挑战。我也颇感兴趣，去玩了2把，的确很有乐趣，整理了一下思路，决定搞个vue3版本的网页版本，我看网上有react版本的了，vue3版本还没有，下面分别给出设计思路，实现方式，和玩法

    设计思路：

    1，先来一张背景图，网上搜一张草地图片

    2，最底部设置七个槽位，有三个连续相同的就消除，槽位满了的话，挑战失败

    3，中间的图层区域使用重叠的方式，可能是半重叠，可能是全重叠，只有第一层可以移入槽位，全部消除时，表示挑战成功！后续挑战是变化关卡的布局方式（多种排列方式）

    4，点击事件的思路（内层不能点击，前置点击如果槽位满了还没有消除完，关卡的消除，消除动作 和 添加爆炸效果，进入下一关，挑战失败）

    5，辅助类函数：判断是否过关，消除函数，实现爆炸💥效果，控制关卡

    实现方式：

    vue3配合pinia实现数据驱动页面

    玩法：

    使用关卡模式，从第1关简单到2困难，3关复杂，这里的关卡只是数据的多少变化而已，可以设计出无数关卡，这里前端模拟json数据，使用对象json

    效果演示：

    在线体验 ：

    KinHKinhttps://rondsjinhuajin.github.io/DemoVue/#/

    源码地址：

    在github欢迎follow和star，感谢可爱的各位看官大佬~❤️

    2.实现过程

    2.1目录

    2.2文件介绍

     入口文件index.vue，设计背景色

    1. <script setup lang='ts'>
    2. import Header from "./components/Header.vue";
    3. import Main from "./components/Main.vue";
    4. </script>
    5.  
    6. <template>
    7.   <div class="sheep-wrap">
    8.     <div class="sheep">
    9.  
    10.       <div class="sheep-wrap">
    11.         <div class="sheep">
    12.           <Header />
    13.           <Main />
    14.         </div>
    15.       </div>
    16.     </div>
    17.   </div>
    18.  
    19. </template>
    20. <style scoped lang='less'>
    21. .sheep-wrap {
    22.   .sheep {
    23.     display: flex;
    24.     flex-direction: column;
    25.     height: 100%;
    26.     width: 100%;
    27.     padding-bottom: 20px;
    28.   }
    29.   
    30.   width: 100%;
    31.   height: calc(100vh - 60px);
    32.   background: url("../../assets/images/sheep.png") center no-repeat;
    33.   background-size: cover;
    34. }
    35. </style>

    Header.vue文件，文字动效，配合pinia显示第几关

    1. <script lang='ts' setup>
    2. import { useSheepStore } from "@/stores/sheep";
    3. const store = useSheepStore();
    4. </script>
    5.  
    6. <template>
    7.   <div class="sheep-header">
    8.     <div>第{{ store.step + 1 }}关</div>
    9.     <div>
    10.       <span class="l">羊了个羊🐑vue3版本</span
    11.       ><span
    12.         style="font-size: 14px;font-family: 'Times New Roman', Times, serif';"
    13.         >（KinHKin）</span
    14.       >
    15.     </div>
    16.   </div>
    17. </template>
    18. <style scoped lang="less">
    19. .flex-center {
    20.   display: flex;
    21.   align-items: center;
    22. }
    23. .sheep-header {
    24.   padding-top: 2rem;
    25.   text-align: center;
    26.   letter-spacing: 0.2rem;
    27.   font-size: 1.5rem;
    28.   color: #fff;
    29.   border-bottom: 1px solid #1d9614;
    30.   padding-bottom: 1rem;
    31.   margin-bottom: 2rem;
    32.   div .l {
    33.     background-image: -webkit-linear-gradient(
    34.       left,
    35.       #1d9614,
    36.       #fff 25%,
    37.       #666 50%,
    38.       #e6d205 75%,
    39.       #fff
    40.     );
    41.     -webkit-text-fill-color: transparent;
    42.     -webkit-background-clip: text;
    43.     -webkit-background-size: 200% 100%;
    44.     -webkit-animation: maskedAnimation 4s infinite linear;
    45.     padding-right: 8px;
    46.   }
    47. }
    48. @keyframes maskedAnimation {
    49.   0% {
    50.     background-position: 0 0;
    51.   }
    52.  
    53.   100% {
    54.     background-position: -100% 0;
    55.   }
    56. }
    57. </style>

    Main.vue文件是核心文件，作用是引入颜色，控制关卡，设置关卡数据，如何消除，增加爆炸动效，控制交互逻辑等。

    1. <script setup lang="ts">
    2. import { ref, type Ref } from "vue";
    3. import { ElMessage, ElMessageBox } from "element-plus";
    4. import { useSheepStore } from "@/stores/sheep";
    5. // 关卡数据
    6. import data from "./data.json";
    7. // 颜色
    8. import constants from "./constants";
    9. // pinia 控制关卡
    10. const store = useSheepStore();
    11. // 七个槽位
    12. // const footerList = ref([0, 1, 2, 3, 4, 5, 6]);
    13. const footerList: Ref<Array<any> | [any]> = ref([]);
    14.  
    15. const colors = ref(constants.colors);
    16.  
    17. // 关卡响应式
    18. const totalList: Ref<Array<any> | [any]> = ref([]);
    19. totalList.value = data["list1"]; // 默认第一关
    20.  
    21. // 控制动画效果结束才能点击
    22. const isNotClick = ref(false);
    23.  
    24. // 点击控制事件
    25. function handleClick(
    26.   i: number,
    27.   k: number,
    28.   onei: { oneSub: string | Array<string> },
    29.   onek: number,
    30.   oneiSub: Array<number>,
    31.   onekSub: number
    32. ) {
    33.   console.log(i, k, onei, onek, oneiSub, onekSub, "测试");
    34.   if (isNotClick.value) {
    35.     return false;
    36.   }
    37.   // 内层不能点击
    38.   if (onekSub !== onei.oneSub.length - 1) {
    39.     return false;
    40.   }
    41.  
    42.   // 前置点击如果槽位满了还没有消除完
    43.   fullFun()
    44.  
    45.   // 关卡的消除
    46.   let tempList = fixFun(k, onekSub, onek, oneiSub)
    47.  
    48.   // 消除动作 和 添加爆炸效果
    49.   if (footerList.value.length > 2) {
    50.     isNotClick.value = true
    51.     const { list, flag } = eliminationFunction(footerList.value)
    52.     footerList.value = list;
    53.     if (flag) {
    54.       footerList.value = addBoomFunction(footerList.value);
    55.     }
    56.     setTimeout(() => {
    57.       const { list, flag } = eliminationFunction(footerList.value)
    58.       footerList.value = list;
    59.       isNotClick.value = false
    60.     }, 1000);
    61.  
    62.     // 进入下一关
    63.     nextFun(tempList)
    64.   }
    65.   // 挑战失败
    66.   failFun(tempList)
    67.  
    68.   console.log(footerList, tempList, "tempList");
    69. }
    70. // full
    71. function fullFun() {
    72.   if (footerList.value.length === 7) {
    73.     ElMessage.closeAll();
    74.  
    75.     ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
    76.       confirmButtonText: "确定",
    77.       type: "warning",
    78.       showClose: false,
    79.     }).then(() => {
    80.       location.reload();
    81.     });
    82.     return false;
    83.   }
    84. }
    85. // fix
    86. function fixFun(k: number, onekSub: number, onek: number, oneiSub: Array<number>) {
    87.   const { value } = totalList;
    88.  
    89.   let tempList = JSON.parse(JSON.stringify(value));
    90.  
    91.   for (let i = 0; i < tempList.length; i++) {
    92.     const one = tempList[k].one;
    93.     for (let j = 0; j < one.length; j++) {
    94.       const oneSub = one[onek];
    95.       for (let k = 0; k < oneSub.oneSub.length; k++) {
    96.         if (onekSub === k) {
    97.           const footItem = oneSub.oneSub.splice(onekSub);
    98.           break;
    99.         }
    100.       }
    101.     }
    102.   }
    103.   footerList.value.push(oneiSub);
    104.   totalList.value = tempList;
    105.   return tempList
    106. }
    107. //fail
    108. function failFun(tempList: any[]) {
    109.   setTimeout(() => {
    110.     if (footerList.value.length > 0 && !jugeList(tempList)) {
    111.       ElMessage.closeAll();
    112.  
    113.       ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
    114.         confirmButtonText: "确定",
    115.         type: "warning",
    116.         showClose: false,
    117.       }).then(() => {
    118.         location.reload();
    119.       });
    120.       return false;
    121.     }
    122.   }, 1002)
    123. }
    124. // next
    125. function nextFun(tempList: any[]) {
    126.   setTimeout(() => {
    127.     if (!footerList.value.length && !jugeList(tempList)) {
    128.       // debugger
    129.       ElMessage.closeAll();
    130.       ElMessage.success("恭喜您，挑战成功！进入下一关");
    131.       store.step++;
    132.       const inStep: string = "list" + (store.step + 1);
    133.       totalList.value = JSON.parse(JSON.stringify(data))[inStep];
    134.       footerList.value = [];
    135.     }
    136.   }, 1001)
    137. }
    138. // 判断是否过关
    139. function jugeList(list: any[]) {
    140.   let temp: any = [];
    141.   list?.forEach((oeni: { one: any }) => {
    142.     oeni?.one?.forEach((sub: { oneSub: any }) => {
    143.       temp = [...temp, ...sub.oneSub];
    144.     });
    145.   });
    146.   return temp.length;
    147. }
    148.  
    149. // 消除函数
    150. function eliminationFunction(list: any[]) {
    151.   let flag: boolean = false;
    152.   for (let k = 0; k < list.length - 2; k++) {
    153.     const temp = list;
    154.     const arr = temp.slice(k, k + 3);
    155.     console.log(k, arr);
    156.     if (arr[0] === arr[1] && arr[1] === arr[2] && arr[0] === arr[2]) {
    157.       list.splice(k + 2);
    158.       list.splice(k + 1);
    159.       list.splice(k, 1);
    160.       flag = true
    161.       break;
    162.     }
    163.   }
    164.  
    165.   return { list, flag };
    166. }
    167.  
    168. // 实现爆炸💥效果
    169. function addBoomFunction(list: any[]) {
    170.   const temp = JSON.parse(JSON.stringify([...list, ...['boom', 'boom', 'boom']]))
    171.   return temp;
    172. }
    173. </script>
    174.  
    175. <template>
    176.   <div class="sheep-main">
    177.     <div class="sheep-main-wrap">
    178.       <template v-for="(i, k) in totalList" :key="'i' + k">
    179.         <el-row v-if="i.one">
    180.           <el-col :span="8" v-for="(onei, onek) in i.one" :key="'i' + onek">
    181.             <div class="pic-list">
    182.               <div class="pic-list-item" v-for="(oneiSub, onekSub) in onei.oneSub"
    183.                 :style="!onei.full ? `--i:${onekSub}` : `--i:0`"
    184.                 :class="onei.full && onei.oneSub.length > 1 ? 'true' : ''" :key="'i' + onekSub"
    185.                 @click="handleClick(i, k, onei, onek, oneiSub, onekSub)">
    186.                 <el-icon class="fz" v-if="oneiSub === 0">
    187.                   <StarFilled :color="colors[0]" />
    188.                 </el-icon>
    189.                 <el-icon class="fz" v-if="oneiSub === 1">
    190.                   <Aim :color="colors[1]" />
    191.                 </el-icon>
    192.                 <el-icon class="fz" v-if="oneiSub === 2">
    193.                   <Grid :color="colors[2]" />
    194.                 </el-icon>
    195.                 <el-icon class="fz" v-if="oneiSub === 3">
    196.                   <HelpFilled :color="colors[3]" />
    197.                 </el-icon>
    198.                 <el-icon class="fz" v-if="oneiSub === 4">
    199.                   <Star :color="colors[4]" />
    200.                 </el-icon>
    201.                 <el-icon class="fz" v-if="oneiSub === 5">
    202.                   <Menu :color="colors[5]" />
    203.                 </el-icon>
    204.                 <el-icon class="fz" v-if="oneiSub === 6">
    205.                   <Camera :color="colors[6]" />
    206.                 </el-icon>
    207.                 <el-icon class="fz" v-if="oneiSub === 7">
    208.                   <Bicycle :color="colors[7]" />
    209.                 </el-icon>
    210.                 <el-icon class="fz" v-if="oneiSub === 8">
    211.                   <IceTea :color="colors[8]" />
    212.                 </el-icon>
    213.                 <el-icon class="fz" v-if="oneiSub === 9">
    214.                   <ColdDrink :color="colors[9]" />
    215.                 </el-icon>
    216.                 <el-icon class="fz" v-if="oneiSub === 10">
    217.                   <CoffeeCup :color="colors[10]" />
    218.                 </el-icon>
    219.               </div>
    220.             </div>
    221.           </el-col>
    222.         </el-row>
    223.       </template>
    224.     </div>
    225.  
    226.     <div class="sheep-footer flex-center">
    227.       <div v-for="(ii, k) in footerList" :key="'ii' + k" class="sheep-footer-items">
    228.         <el-icon class="fz" v-if="ii === 0">
    229.           <StarFilled :color="colors[0]" />
    230.         </el-icon>
    231.         <el-icon class="fz" v-if="ii === 1">
    232.           <Aim :color="colors[1]" />
    233.         </el-icon>
    234.         <el-icon class="fz" v-if="ii === 2">
    235.           <Grid :color="colors[2]" />
    236.         </el-icon>
    237.         <el-icon class="fz" v-if="ii === 3">
    238.           <HelpFilled :color="colors[3]" />
    239.         </el-icon>
    240.         <el-icon class="fz" v-if="ii === 4">
    241.           <Star :color="colors[4]" />
    242.         </el-icon>
    243.         <el-icon class="fz" v-if="ii === 5">
    244.           <Menu :color="colors[5]" />
    245.         </el-icon>
    246.         <el-icon class="fz" v-if="ii === 6">
    247.           <Camera :color="colors[6]" />
    248.         </el-icon>
    249.         <el-icon class="fz" v-if="ii === 7">
    250.           <Bicycle :color="colors[7]" />
    251.         </el-icon>
    252.         <el-icon class="fz" v-if="ii === 8">
    253.           <IceTea :color="colors[8]" />
    254.         </el-icon>
    255.         <el-icon class="fz" v-if="ii === 9">
    256.           <ColdDrink :color="colors[9]" />
    257.         </el-icon>
    258.         <el-icon class="fz" v-if="ii === 10">
    259.           <CoffeeCup :color="colors[10]" />
    260.         </el-icon>
    261.         <div class="boom-class" v-if="ii === 'boom'">💥</div>
    262.       </div>
    263.     </div>
    264.   </div>
    265. </template>
    266. <style scoped lang="less">
    267. .flex-center {
    268.   display: flex;
    269.   align-items: center;
    270. }
    271.  
    272. .el-row {
    273.   // margin-top: 3rem;
    274.   height: 28%;
    275. }
    276.  
    277. .fz {
    278.   font-size: 3rem;
    279.   border: 1px solid #dfe5f9;
    280.   // box-shadow: 2px 2px 10px #f3f6fe;
    281.  
    282.   background: #f3f6fe;
    283.   border-radius: 5px;
    284. }
    285.  
    286. .pic-list {
    287.   position: relative;
    288.   width: 100%;
    289.   height: 100%;
    290.  
    291.   &-item {
    292.     position: absolute;
    293.     left: 10vw;
    294.     cursor: pointer;
    295.     transition: all 0.3s;
    296.  
    297.     &:nth-child(1n) {
    298.       top: calc(var(--i) * 1.5rem);
    299.     }
    300.  
    301.     &.true {
    302.       box-shadow: 0 -55px 0 0 #dfe5f9 inset;
    303.     }
    304.  
    305.     // &:nth-child(even) {
    306.     //   top: 2rem;
    307.     // }
    308.   }
    309. }
    310.  
    311. .sheep-main {
    312.   flex: 1;
    313.  
    314.   &-wrap {
    315.     height: calc(100% - 80px);
    316.   }
    317. }
    318.  
    319. .sheep-footer {
    320.   height: 80px;
    321.   width: 100%;
    322.   // border: 2px solid #298df9;
    323.   border: 2px solid #778899;
    324.   background: #010206;
    325.  
    326.   .sheep-footer-items {
    327.     height: 80px;
    328.     width: calc(100% / 7);
    329.     margin-left: 8px;
    330.     display: flex;
    331.     align-items: center;
    332.     justify-content: center;
    333.  
    334.     .boom-class {
    335.       font-size: 3rem;
    336.       animation: myMove 3s ease-in-out infinite;
    337.     }
    338.  
    339.     @keyframes myMove {
    340.       0% {
    341.         opacity: 1;
    342.       }
    343.  
    344.       100% {
    345.         opacity: 0;
    346.       }
    347.     }
    348.  
    349.     // border-right: 1px solid #dfe5f9;
    350.   }
    351. }
    352. </style>

    3.核心逻辑分步骤详解

    import { ref, type Ref } from "vue";

    import { ElMessage, ElMessageBox } from "element-plus";

    import { useSheepStore } from "@/stores/sheep";

    // 关卡数据

    import data from "./data.json";

    // 颜色

    import constants from "./constants";

    // pinia 控制关卡

    const store = useSheepStore();

    首先引入data.json数据是渲染中间的页面内容，即是：

    中间的就叫卡片区域吧，卡片分为半个遮挡和整个遮挡，在data数据里面配置：

    "full": true

     默认是半个遮挡，配置了"full": true就表示这块的卡片是全遮挡的效果：

    :style="!onei.full ? `--i:${onekSub}` : `--i:0`"

    :class="onei.full && onei.oneSub.length > 1 ? 'true' : ''" :key="'i' + onekSub"

    css: 使用了var的变量形式，来控制是否需要top下移，&.true来控制是否有下一级的卡片的样式

    &:nth-child(1n) {

    top: calc(var(--i) * 1.5rem);

    }

    &.true {

            box-shadow: 0 -55px 0 0 #dfe5f9 inset;

    }

    data.json里面的数据oneSub的选值范围是：0-10

    这和dom渲染层的息息相关：卡片使用的是简单的icon也可以是其他类型的元素，你觉得好看即可。

    1.                 class="fz" v-if="oneiSub === 0">
    2.                   <StarFilled :color="colors[0]" />
    3.                 
    4.                 <el-icon class="fz" v-if="oneiSub === 1">
    5.                   <Aim :color="colors[1]" />
    6.                 el-icon>
    7.                 <el-icon class="fz" v-if="oneiSub === 2">
    8.                   <Grid :color="colors[2]" />
    9.                 el-icon>
    10.                 <el-icon class="fz" v-if="oneiSub === 3">
    11.                   <HelpFilled :color="colors[3]" />
    12.                 el-icon>
    13.                 <el-icon class="fz" v-if="oneiSub === 4">
    14.                   <Star :color="colors[4]" />
    15.                 el-icon>
    16.                 <el-icon class="fz" v-if="oneiSub === 5">
    17.                   <Menu :color="colors[5]" />
    18.                 el-icon>
    19.                 <el-icon class="fz" v-if="oneiSub === 6">
    20.                   <Camera :color="colors[6]" />
    21.                 el-icon>
    22.                 <el-icon class="fz" v-if="oneiSub === 7">
    23.                   <Bicycle :color="colors[7]" />
    24.                 el-icon>
    25.                 <el-icon class="fz" v-if="oneiSub === 8">
    26.                   <IceTea :color="colors[8]" />
    27.                 el-icon>
    28.                 <el-icon class="fz" v-if="oneiSub === 9">
    29.                   <ColdDrink :color="colors[9]" />
    30.                 el-icon>
    31.                 <el-icon class="fz" v-if="oneiSub === 10">
    32.                   <CoffeeCup :color="colors[10]" />
    33.                 el-icon>

    这里只提供11中卡片的效果，可以扩展添加，需要修改代码。

    接下来是：

    // 七个槽位

    // const footerList = ref([0, 1, 2, 3, 4, 5, 6]);

    const footerList: Ref | [any]> = ref([]);

    const colors = ref(constants.colors);

    // 关卡响应式

    const totalList: Ref | [any]> = ref([]);

    totalList.value = data["list1"]; // 默认第一关

    // 控制动画效果结束才能点击

    const isNotClick = ref(false);

    7个槽位在底部需要变化展示，做成响应式。totalList是动态变化的卡片数据集。totalList.value = data["list1"] ，默认第一关。爆炸💥的电话效果有延迟，需要控制在结束之后才能进行卡片的点击。

    然后就是核心的卡片点击事件，需要做哪些逻辑控制呢？先看源代码，已经提前做了备注：

    1. // 点击控制事件
    2. function handleClick(
    3.   i: number,
    4.   k: number,
    5.   onei: { oneSub: string | Array },
    6.   onek: number,
    7.   oneiSub: Array,
    8.   onekSub: number
    9. ) {
    10.   console.log(i, k, onei, onek, oneiSub, onekSub, "测试");
    11.   if (isNotClick.value) {
    12.     return false;
    13.   }
    14.   // 内层不能点击
    15.   if (onekSub !== onei.oneSub.length - 1) {
    16.     return false;
    17.   }
    18.  
    19.   // 前置点击如果槽位满了还没有消除完
    20.   fullFun()
    21.  
    22.   // 关卡的消除
    23.   let tempList = fixFun(k, onekSub, onek, oneiSub)
    24.  
    25.   // 消除动作 和 添加爆炸效果
    26.   if (footerList.value.length > 2) {
    27.     isNotClick.value = true
    28.     const { list, flag } = eliminationFunction(footerList.value)
    29.     footerList.value = list;
    30.     if (flag) {
    31.       footerList.value = addBoomFunction(footerList.value);
    32.     }
    33.     setTimeout(() => {
    34.       const { list, flag } = eliminationFunction(footerList.value)
    35.       footerList.value = list;
    36.       isNotClick.value = false
    37.     }, 1000);
    38.  
    39.     // 进入下一关
    40.     nextFun(tempList)
    41.   }
    42.   // 挑战失败
    43.   failFun(tempList)
    44.  
    45.   console.log(footerList, tempList, "tempList");
    46. }

    首先是函数的签名，接受最上层级的i对象，k索引，然后是中层的onei对象，onek索引，最后是父级的oneiSub对象，onekSub索引。判断条件需要前置，判断能否点击isNotClick，内层不能点击

    if (isNotClick.value) {

            return false;

    }

    // 前置点击如果槽位满了还没有消除完

    fullFun()函数判断如果槽位满了还没有消除完，就是挑战失败

    1. function fullFun() {
    2.   if (footerList.value.length === 7) {
    3.     ElMessage.closeAll();
    4.  
    5.     ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
    6.       confirmButtonText: "确定",
    7.       type: "warning",
    8.       showClose: false,
    9.     }).then(() => {
    10.       location.reload();
    11.     });
    12.     return false;
    13.   }
    14. }
    '
    运行

    如何添加爆炸💥效果：

    思路是在三个相同消除之后添加，添加在totalList数据之中 ,效果展示完成之后立即进行totalList数据重置操作。

    1.  
    2.   // 关卡的消除
    3.   let tempList = fixFun(k, onekSub, onek, oneiSub)
    4.  
    5.   // 消除动作 和 添加爆炸效果
    6.   if (footerList.value.length > 2) {
    7.     isNotClick.value = true
    8.     const { list, flag } = eliminationFunction(footerList.value)
    9.     footerList.value = list;
    10.     if (flag) {
    11.       footerList.value = addBoomFunction(footerList.value);
    12.     }
    13.     setTimeout(() => {
    14.       const { list, flag } = eliminationFunction(footerList.value)
    15.       footerList.value = list;
    16.       isNotClick.value = false
    17.     }, 1000);
    18.  
    19.     // 进入下一关
    20.     nextFun(tempList)
    21.   }

    css 添加的方法：

    1.     .boom-class {
    2.       font-size: 3rem;
    3.       animation: myMove 3s ease-in-out infinite;
    4.     }
    5.  
    6.     @keyframes myMove {
    7.       0% {
    8.         opacity: 1;
    9.       }
    10.  
    11.       100% {
    12.         opacity: 0;
    13.       }
    14.     }

    消除函数eliminationFunction逻辑的控制，flag用来进行是否成功消除：

    1.  
    2. // 消除函数
    3. function eliminationFunction(list: any[]) {
    4.   let flag: boolean = false;
    5.   for (let k = 0; k < list.length - 2; k++) {
    6.     const temp = list;
    7.     const arr = temp.slice(k, k + 3);
    8.     console.log(k, arr);
    9.     if (arr[0] === arr[1] && arr[1] === arr[2] && arr[0] === arr[2]) {
    10.       list.splice(k + 2);
    11.       list.splice(k + 1);
    12.       list.splice(k, 1);
    13.       flag = true
    14.       break;
    15.     }
    16.   }
    17.  
    18.   return { list, flag };
    19. }

    添加addBoomFunction爆炸函数：

    1. // 实现爆炸💥效果
    2. function addBoomFunction(list: any[]) {
    3.   const temp = JSON.parse(JSON.stringify([...list, ...['boom', 'boom', 'boom']]))
    4.   return temp;
    5. }

    挑战失败如何判断呢？

    1. //fail
    2. function failFun(tempList: any[]) {
    3.   setTimeout(() => {
    4.     if (footerList.value.length > 0 && !jugeList(tempList)) {
    5.       ElMessage.closeAll();
    6.  
    7.       ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
    8.         confirmButtonText: "确定",
    9.         type: "warning",
    10.         showClose: false,
    11.       }).then(() => {
    12.         location.reload();
    13.       });
    14.       return false;
    15.     }
    16.   }, 1002)
    17. }

    jugeList函数是对目前存在的卡片集合进行长度判断，如何卡片不存在，但是槽位的数据不为空的情况下，说明没有消除完，就判断要重新开始挑战： 

    1. // 判断是否过关
    2. function jugeList(list: any[]) {
    3.   let temp: any = [];
    4.   list?.forEach((oeni: { one: any }) => {
    5.     oeni?.one?.forEach((sub: { oneSub: any }) => {
    6.       temp = [...temp, ...sub.oneSub];
    7.     });
    8.   });
    9.   return temp.length;
    10. }

    最后是挑战成功就可以进行下一关：

    1. // next
    2. function nextFun(tempList: any[]) {
    3.   setTimeout(() => {
    4.     if (!footerList.value.length && !jugeList(tempList)) {
    5.       // debugger
    6.       ElMessage.closeAll();
    7.       ElMessage.success("恭喜您，挑战成功！进入下一关");
    8.       store.step++;
    9.       const inStep: string = "list" + (store.step + 1);
    10.       totalList.value = JSON.parse(JSON.stringify(data))[inStep];
    11.       footerList.value = [];
    12.     }
    13.   }, 1001)
    14. }

    如何卡片不存在，但是槽位的数据为空的情况下，说明消除完了，就可以进入下一关进行挑战，难度也将升级！

    4.总结

    最近是由于玩了羊了个羊的小程序，有所感悟，思考了这个游戏的整体的玩法，如何去操作，然后想到了可以实现一个前端网页版本的羊了个羊，这里面有一些自己的设计思考是很重要的，花了一个星期左右来实现，中间遇到了如何消除，如何控制挑战失败，成功的问题，并且一一解决了，可以想到如果前端来做这个游戏怎么在最优的方案上，书写可以扩展的dom，来适配很多不同的关卡的元素或者是我们需要什么样的数据结构，方便后续的关卡的升级。这里解决的方案是配合json，数据是数组嵌套类型，元素是需要循环来调用的，什么类型的卡片是需要提前有个范围的，这样是可扩展的。最后的操作，或者撤销，恢复等操作（这里没有实现）本质上也是对于数据的操作。终而言之：数据驱动页面，才是我们追求的。最后，各位同学一起多思考一下背后的实现，让我们用技术来创作更多有趣的事情吧~❤️
     

    个人主页：KinHKin(五年前端)的博客_CSDN博客-vue,css,中秋活动领域博主

    在线演示：KinHKin

    fllow我的github:   rondsjinhuajin (承吾) · GitHub

  • 相关阅读:
    继NOIP2022结束以后（文化课复建）
    【Unity Shader】GLSL
    MFC Windows 程序设计[114]之多样下拉列表框
    初识 Python
    特征值和特征向量及其在机器学习中的应用
    Redis(八) - Redis企业实战之优惠券秒杀
    谷歌员工年薪中位数是苹果的4倍多，亚马逊CEO薪酬抵6千名员工 | 科技巨头薪资排名出炉
    D - Snuke Panic (1D)
    Java审计框架基础
    DBCO-PEG-Lentinan；Lentinan-PEG-DBCO；二苯并环辛炔聚乙二醇修饰香菇多糖
  • 原文地址：https://blog.csdn.net/weixin_42974827/article/details/127052101