消除动效

assets/Script/Config/GameConfig.ts

@@ -19,9 +19,11 @@ export const Config = {
   /** 块矩阵最大列 */
   maxCol: 10,
   /** 填入方块颜色,小方块颜色 */
-  miniBlockColor:'#58D9B3',
+  miniBlockColor: '#58D9B3',
   /** 默认方块颜色,空白方块颜色 */
-  defaultColor:'#8FBABA',
+  defaultColor: '#8FBABA',
+  /** 每一个方块动画播放延时 ms*/
+  blockAniDelay: 35,
 }
 
 /** 方块状态 */

assets/Script/GameScene.ts

@@ -41,7 +41,7 @@ export default class GameScene extends cc.Component {
     const parent = this.blockMatrix
     const setDefaultBlock = []
     for(let i = 0;i<maxCol-1;i++){
-      setDefaultBlock.push(...Array(6).fill('').map((_,j) => j+i*maxRow))
+      setDefaultBlock.push(...Array(9).fill('').map((_,j) => j+i*maxRow))
     }
     parent.removeAllChildren()
     for (let i = 0; i < maxRow; i++) {

assets/Script/block.ts

@@ -15,16 +15,31 @@ export default class Block extends cc.Component {
   /** 方块状态 0空，1有方块填入 */
   blockState: BLOCK_STATE = BLOCK_STATE.EMPTY
 
+  /** 动画 */
+  ani:cc.Animation = null
+
+  aniDuration = 0
+
+  /** 方块动画播放速率 */
+  speed = 0.9
   // onLoad () {}
 
   start() {
-
+    this.ani = this.node.getComponent(cc.Animation)
+    const animationState = this.ani.getAnimationState('blockBoom')
+    this.aniDuration = animationState.duration
   }
 
   /** 播放清除动画 */
   playClearAni(cb) {
-    this.changeBlockState(BLOCK_STATE.EMPTY)
-    // propPool.push()
+    const ani = this.ani
+    const animationState = this.ani.getAnimationState('blockBoom')
+    animationState.speed = this.speed
+    ani.once('finished',() => {
+      this.changeBlockState(BLOCK_STATE.EMPTY)
+      cb?.()
+    })
+    ani.play()
   }
 
   /**
@@ -32,6 +47,7 @@ export default class Block extends cc.Component {
    * @param type 0 清空，1 填入方块
    */
   changeBlockState(type: BLOCK_STATE) {
+    this.node.scale = 1
     this.blockState = type
     this.node.color = cc.color(type === BLOCK_STATE.NON_EMPTY ? Config.miniBlockColor : Config.defaultColor)
   }

assets/Script/blockManager.ts

@@ -7,6 +7,7 @@
 
 import { BLOCK_STATE, Config } from "./Config/GameConfig";
 import propPool from "./propPool";
+import { waitTime } from "./utils";
 
 const { ccclass, property } = cc._decorator;
 
@@ -68,7 +69,7 @@ export default class BlockManager extends cc.Component {
         if (block.blockState !== BLOCK_STATE.NON_EMPTY) break
         temp.push(block)
         if (temp.length === maxRow) {
-          eliminateBlocks.push(...temp)
+          eliminateBlocks.push(temp)
         }
       }
     }
@@ -81,7 +82,7 @@ export default class BlockManager extends cc.Component {
         if (block.blockState !== BLOCK_STATE.NON_EMPTY) break
         temp.push(block)
         if (temp.length === maxCol) {
-          eliminateBlocks.push(...temp)
+          eliminateBlocks.push(temp)
         }
       }
     }
@@ -92,9 +93,15 @@ export default class BlockManager extends cc.Component {
 
   /** 清理矩阵块 */
   clearMatrixBlock(eliminateBlocks: cc.Node[]) {
-    if (eliminateBlocks.length === 0) return
-    eliminateBlocks.forEach(({ node, script }) => {
+    const recursionPlay = async (els) => {
+      if (els.length === 0) return
+      const { script } = els.pop()
       script.playClearAni()
+      await waitTime(Config.blockAniDelay)
+      recursionPlay(els)
+    }
+    eliminateBlocks.forEach((els) => {
+      recursionPlay(els)
     })
   }
 

assets/Script/utils.ts

+/**
+ * 等待一段时间再执行
+ * @param {number} time 等待的时间ms
+ */
+export function waitTime(time) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
 /**
  * 十六进制颜色转rgb
  * @param str 

assets/resources/ani/block.anim

-{
-  "__type__": "cc.AnimationClip",
-  "_name": "block",
-  "_objFlags": 0,
-  "_native": "",
-  "_duration": 0,
-  "sample": 60,
-  "speed": 1,
-  "wrapMode": 1,
-  "curveData": {
-    "props": {
-      "color": []
-    }
-  },
-  "events": []
-}
\ No newline at end of file

assets/resources/ani/blockBoom.anim

+{
+  "__type__": "cc.AnimationClip",
+  "_name": "blockBoom",
+  "_objFlags": 0,
+  "_native": "",
+  "_duration": 0.16666666666666666,
+  "sample": 60,
+  "speed": 1,
+  "wrapMode": 1,
+  "curveData": {
+    "props": {
+      "color": [
+        {
+          "frame": 0,
+          "value": {
+            "__type__": "cc.Color",
+            "r": 222,
+            "g": 70,
+            "b": 91,
+            "a": 255
+          }
+        }
+      ],
+      "scale": [
+        {
+          "frame": 0,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1,
+            "y": 1,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.05,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1.15,
+            "y": 1.15,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.16666666666666666,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 0.5,
+            "y": 0.5,
+            "z": 1
+          }
+        }
+      ]
+    }
+  },
+  "events": []
+}
\ No newline at end of file

assets/resources/prefab/blockFab.prefab

@@ -24,10 +24,13 @@
       },
       {
         "__id__": 3
+      },
+      {
+        "__id__": 4
       }
     ],
     "_prefab": {
-      "__id__": 4
+      "__id__": 5
     },
     "_opacity": 255,
     "_color": {
@@ -118,6 +121,25 @@
     "_enabled": true,
     "_id": ""
   },
+  {
+    "__type__": "cc.Animation",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_defaultClip": {
+      "__uuid__": "bf38991e-566d-4e1e-ad67-dd4f834bff23"
+    },
+    "_clips": [
+      {
+        "__uuid__": "bf38991e-566d-4e1e-ad67-dd4f834bff23"
+      }
+    ],
+    "playOnLoad": false,
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {