基本玩法实现

assets/Script/Config/GameConfig.ts

@@ -19,5 +19,15 @@ export const Config = {
   /** 块矩阵最大列 */
   maxCol: 10,
   /** 填入方块颜色,小方块颜色 */
-  miniBlockColor:'#58D9B3'
+  miniBlockColor:'#58D9B3',
+  /** 默认方块颜色,空白方块颜色 */
+  defaultColor:'#8FBABA',
+}
+
+/** 方块状态 */
+export enum BLOCK_STATE {
+  /** 空的 */
+  EMPTY,
+  /** 非空 */
+  NON_EMPTY
 }
\ No newline at end of file

assets/Script/GameScene.ts

 import Svga from "./Components/Svga/Svga";
 import { SvgaEvent } from "./Components/Svga/SvgaEvent";
-import { CUSTOM_EVENT, Config, GameColors } from "./Config/GameConfig";
+import {  BLOCK_STATE, CUSTOM_EVENT, Config, GameColors } from "./Config/GameConfig";
 import exportEvent from "./exportEvent";
 import propPool from "./propPool";
 import { getProbability, getRandomArrayElements, loadGameResources, numToChinese, randomNum, getUrlParam } from "./utils";
 const { ccclass, property } = cc._decorator;
 
-
 @ccclass
 export default class GameScene extends cc.Component {
 
@@ -20,19 +19,18 @@ export default class GameScene extends cc.Component {
   /** 方块矩阵 */
   blockMatrix: cc.Node = null
 
-
   protected onLoad(): void {
 
     // loadGameResources()
     /** 开启碰撞检测 */
     const cm = cc.director.getCollisionManager()
     cm.enabled = true
+    
     // cm.enabledDebugDraw = true;
   }
 
   start() {
     this.blockMatrix = cc.find('blockMatrix', this.node)
-    cc.propPool = propPool
     this.setDefaultBlock()
     this.addNodeEvent()
   }
@@ -41,9 +39,20 @@ export default class GameScene extends cc.Component {
   setDefaultBlock() {
     const { maxRow, maxCol } = this.gameConfig
     const parent = this.blockMatrix
+    const setDefaultBlock = []
+    for(let i = 0;i<maxCol-1;i++){
+      setDefaultBlock.push(...Array(6).fill('').map((_,j) => j+i*maxRow))
+    }
+    parent.removeAllChildren()
     for (let i = 0; i < maxRow; i++) {
       for (let j = 0; j < maxCol; j++) {
         const block = cc.instantiate(this.defaultBlock)
+        block.color = cc.color(this.gameConfig.defaultColor)
+        if(setDefaultBlock.includes(maxRow*i+j)){
+          const script = block.getComponent('block')
+          script.changeBlockState(BLOCK_STATE.NON_EMPTY)
+          // block.blockState = 1
+        }
         block.setParent(parent)
       }
     }
@@ -116,11 +125,6 @@ export default class GameScene extends cc.Component {
     }
   }
 
-  /** 出钩 */
-  playGame() {
-    if (this.isGameOver || !this.isStartGame || this.clipAni) return
-    this.setClipState(CLIP_STATE.PLAY)
-  }
 
   /** 游戏结束 */
   gameOver() {

assets/Script/block.ts

@@ -5,89 +5,36 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
-import { Config } from "./Config/GameConfig";
+import { BLOCK_STATE, Config } from "./Config/GameConfig";
+import propPool from "./propPool";
 
 const { ccclass, property } = cc._decorator;
 
 @ccclass
 export default class Block extends cc.Component {
-  /** 默认底色块 */
-  @property(cc.Prefab)
-  defaultBlock: cc.Prefab = null
-
-  isMove = false
-
-  viewWidth = 0
-
-  viewHeight = 0
-
+  /** 方块状态 0空，1有方块填入 */
+  blockState: BLOCK_STATE = BLOCK_STATE.EMPTY
 
   // onLoad () {}
 
   start() {
-    this.viewHeight = cc.view.getVisibleSize().height
-    this.viewWidth = cc.view.getVisibleSize().width
-    this.addNodeEvent()
-    // const matrix = cc.find('blockMatrix', this.node.parent)
-    // const node = matrix.children[0]
-    // const k = node.convertToWorldSpaceAR(node.getPosition(), cc.v2(375, 812))
-    // console.log('start', k.x, k.y)
+
   }
 
-  /** 放置block */
-  setBlockMatrix() {
-    const targetNodeWorldPos = this.node.parent.convertToWorldSpaceAR(this.node.getPosition())
-    const matrix = cc.find('blockMatrix', this.node.parent.parent)
-    const { targetPos, targetNode } = this.posFindBlock(targetNodeWorldPos)
-    this.isMove = false
-    targetNode.color = cc.color(Config.miniBlockColor)
-    // const targetWorldPos = this.node.convertToNodeSpaceAR(targetPos)
-    // const blockPos = cc.v2(targetWorldPos.x + this.node.x, targetWorldPos.y + this.node.y)
-    // const blockTemp = cc.propPool.isEmpyt ? cc.instantiate(this.defaultBlock) : cc.propPool.pop()
-    // blockTemp.setPosition(blockPos)
+  /** 播放清除动画 */
+  playClearAni(cb) {
+    this.changeBlockState(BLOCK_STATE.EMPTY)
+    // propPool.push()
   }
 
   /**
-   * 根据坐标位置寻找最近的方块 
-   * @param pos 坐标
+   * 修改当前方块状态
+   * @param type 0 清空，1 填入方块
    */
-  posFindBlock(pos: cc.Vec2) {
-    const matrix = cc.find('blockMatrix', this.node.parent.parent)
-    let minX = 999999, minIdx = -1
-    const matrixPos = matrix.children.map((node, i) => {
-      const nodePos = matrix.convertToWorldSpaceAR(node.getPosition())
-      // 两点间的距离
-      const offsetX = Math.sqrt(Math.pow((nodePos.x - pos.x), 2) + Math.pow((nodePos.y - pos.y), 2))
-      if (offsetX < minX) {
-        minX = offsetX
-        minIdx = i
-      }
-      return {
-        nodePos,
-        node
-      }
-    })
-    return { targetPos: matrixPos[minIdx].nodePos, targetNode: matrixPos[minIdx].node }
-  }
-
-  addNodeEvent() {
-    // this.node.on(cc.Node.EventType.TOUCH_START, () => {
-    //   this.isMove = true
-    // }, this)
-
-    // this.node.on(cc.Node.EventType.TOUCH_END, this.setBlockMatrix, this)
-
-    // this.node.on(cc.Node.EventType.TOUCH_MOVE, (e: cc.Event.EventTouch) => {
-    //   if (this.isMove) {
-    //     const pos: cc.Vec2 = e.getPreviousLocation()
-    //     const viewW = this.viewWidth, viewH = this.viewHeight
-
-    //     this.node.setPosition(pos.x - (viewW / 2), pos.y - (812 - (1624 - viewH) / 2))
-    //   }
-    // }, this)
+  changeBlockState(type: BLOCK_STATE) {
+    this.blockState = type
+    this.node.color = cc.color(type === BLOCK_STATE.NON_EMPTY ? Config.miniBlockColor : Config.defaultColor)
   }
 
-  update(dt) {
-
-  }
+  // update (dt) {}
 }

assets/Script/block.ts.meta

 {
   "ver": "1.1.0",
-  "uuid": "b120771b-3168-4d54-b293-1557c0abfb76",
+  "uuid": "6e215ceb-8e04-418c-af8e-93be9dcfc80c",
   "importer": "typescript",
   "isPlugin": false,
   "loadPluginInWeb": true,

assets/Script/blockManager.ts

+// Learn TypeScript:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
+// Learn Attribute:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
+// Learn life-cycle callbacks:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
+
+import { BLOCK_STATE, Config } from "./Config/GameConfig";
+import propPool from "./propPool";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class BlockManager extends cc.Component {
+
+  isMove = false
+
+  viewWidth = 0
+
+  viewHeight = 0
+
+  /** 方块矩阵外层容器 */
+  blockMatrix: cc.Node = null
+
+  /** 默认位置 */
+  defaultPos: cc.Vec2 = null
+
+  start() {
+    this.viewHeight = cc.view.getVisibleSize().height
+    this.viewWidth = cc.view.getVisibleSize().width
+    this.defaultPos = this.node.getPosition()
+    this.blockMatrix = cc.find('blockMatrix', this.node.parent)
+    this.addNodeEvent()
+  }
+
+  /** 设置所有的方块复原 */
+  setBlockMatrixAll() {
+    this.isMove = false
+    const allBlock = this.node.children
+    if (this.isSetBlockMartix()) {
+      allBlock.forEach((node: cc.Node) => {
+        const scripts = node.getComponent('miniBlock')
+        scripts.setBlockMatrix()
+      })
+      this.checkBlockMatrix()
+    }
+    this.node.setPosition(this.defaultPos)
+    this.node.scale = 1
+  }
+
+  /** 检查块矩阵是否能够消除 */
+  checkBlockMatrix() {
+    const blockMatrix = this.blockMatrix.children.map((node) => {
+      const script = node.getComponent('block')
+      return {
+        node,
+        script,
+        blockState: script.blockState
+      }
+    })
+    const { maxCol, maxRow } = Config
+    const eliminateBlocks = []
+    // 检查行
+    for (let i = 0; i < maxCol; i++) {
+      let temp = []
+      for (let j = 0; j < maxRow; j++) {
+        const block = blockMatrix[j + i * maxCol]
+        if (block.blockState !== BLOCK_STATE.NON_EMPTY) break
+        temp.push(block)
+        if (temp.length === maxRow) {
+          eliminateBlocks.push(...temp)
+        }
+      }
+    }
+
+    // 检查列
+    for (let i = 0; i < maxRow; i++) {
+      let temp = []
+      for (let j = 0; j < maxCol; j++) {
+        const block = blockMatrix[i + j * maxRow]
+        if (block.blockState !== BLOCK_STATE.NON_EMPTY) break
+        temp.push(block)
+        if (temp.length === maxCol) {
+          eliminateBlocks.push(...temp)
+        }
+      }
+    }
+
+    this.clearMatrixBlock(eliminateBlocks)
+    console.log('eliminateBlocks:', eliminateBlocks)
+  }
+
+  /** 清理矩阵块 */
+  clearMatrixBlock(eliminateBlocks: cc.Node[]) {
+    if (eliminateBlocks.length === 0) return
+    eliminateBlocks.forEach(({ node, script }) => {
+      script.playClearAni()
+    })
+  }
+
+  /**
+   * 判断是否能够放入
+   * @returns 
+   */
+  isSetBlockMartix() {
+    const allBlock = this.node.children
+    const filterBlock = allBlock.map((node: cc.Node) => {
+      const script = node.getComponent('miniBlock')
+      return { ...script.getTargetMatrix(), script }
+    })
+    // 该目标节点是否为空
+    const isEmpty = filterBlock.filter(({ targetNode, script }) => {
+      return script.blockState === BLOCK_STATE.NON_EMPTY
+    }).length === 0
+    if (!isEmpty) return false
+    const allTargetNodeId = filterBlock.map(({ targetNode }) => targetNode.getSiblingIndex())
+    // 索引是否重复
+    const isRepeat = allTargetNodeId.find((_, i) => allTargetNodeId.includes(_, i + 1))
+    return !isRepeat && isEmpty
+  }
+
+  addNodeEvent() {
+    this.node.on(cc.Node.EventType.TOUCH_START, () => {
+      this.isMove = true
+      this.node.scale = 1.7
+    }, this)
+
+    this.node.on(cc.Node.EventType.TOUCH_END, () => {
+      this.setBlockMatrixAll()
+    }, this)
+
+    this.node.on(cc.Node.EventType.TOUCH_MOVE, (e: cc.Event.EventTouch) => {
+
+      if (this.isMove) {
+        const pos: cc.Vec2 = e.getPreviousLocation()
+        const viewW = this.viewWidth, viewH = this.viewHeight
+        this.node.setPosition(pos.x - (viewW / 2), pos.y - (812 - (1624 - viewH) / 2))
+      }
+    }, this)
+  }
+
+  // update (dt) {}
+}

assets/Script/blockManager.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "15dc8ccb-64a6-461e-8380-5ab97c0af20e",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Script/miniBlock.ts

@@ -5,61 +5,70 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
+import { BLOCK_STATE, Config } from "./Config/GameConfig";
+
 const { ccclass, property } = cc._decorator;
 
 @ccclass
-export default class NewClass extends cc.Component {
-
+export default class miniBlock extends cc.Component {
   isMove = false
 
   viewWidth = 0
 
   viewHeight = 0
 
-  /** 方块矩阵外层容器 */
-  blockMatrix: cc.Node = null
+  /** 当前砖块的对应矩阵的目标砖块 */
+  targetNode:cc.Node = null
 
-  /** 外层容器 */
-  stage: cc.Canvas = null
+  // onLoad () {}
 
   start() {
     this.viewHeight = cc.view.getVisibleSize().height
     this.viewWidth = cc.view.getVisibleSize().width
-    this.blockMatrix = cc.find('blockMatrix', this.node.parent)
-    this.stage = this.node.parent
-    this.addNodeEvent()
   }
 
-  setBlockMatrixAll() {
-    this.isMove = false
-    const allBlock = this.node.children
-    allBlock.forEach((node: cc.Node) => {
-      const scripts = node.getComponent('block')
-      scripts.setBlockMatrix()
-    })
 
+  /** 获取目标方块 */
+  getTargetMatrix(){
+    const targetNodeWorldPos = this.node.parent.convertToWorldSpaceAR(this.node.getPosition())
+    const matrix = cc.find('blockMatrix', this.node.parent.parent)
+    const { targetPos, targetNode } = this.posFindBlock(targetNodeWorldPos)
+    this.targetNode = targetNode
+    // console.log('当前方块',this.node)
+    // console.log('目标方块',targetNode)
+    return { 
+      targetPos, 
+      targetNode
+    }
   }
 
-  addNodeEvent() {
-    this.node.on(cc.Node.EventType.TOUCH_START, () => {
-      this.isMove = true
-      this.node.scale = 1.7
-    }, this)
-
-    this.node.on(cc.Node.EventType.TOUCH_END, () => {
-      this.setBlockMatrixAll()
-    }, this)
-
-    this.node.on(cc.Node.EventType.TOUCH_MOVE, (e: cc.Event.EventTouch) => {
-
-      if (this.isMove) {
-        const pos: cc.Vec2 = e.getPreviousLocation()
-        const viewW = this.viewWidth, viewH = this.viewHeight
+  /** 放置block */
+  setBlockMatrix() {
+    const script = this.targetNode.getComponent('block')
+    console.log('s',this.targetNode)
+    script.changeBlockState(BLOCK_STATE.NON_EMPTY)
+  }
 
-        this.node.setPosition(pos.x - (viewW / 2), pos.y - (812 - (1624 - viewH) / 2))
+  /**
+   * 根据坐标位置寻找最近的方块 
+   * @param pos 坐标
+   */
+  posFindBlock(pos: cc.Vec2) {
+    const matrix = cc.find('blockMatrix', this.node.parent.parent)
+    let minX = 999999, minIdx = -1
+    const matrixPos = matrix.children.map((node, i) => {
+      const nodePos = matrix.convertToWorldSpaceAR(node.getPosition())
+      // 两点间的距离
+      const offsetX = Math.sqrt(Math.pow((nodePos.x - pos.x), 2) + Math.pow((nodePos.y - pos.y), 2))
+      if (offsetX < minX) {
+        minX = offsetX
+        minIdx = i
+      }
+      return {
+        nodePos,
+        node
       }
-    }, this)
+    })
+    return { targetPos: matrixPos[minIdx].nodePos, targetNode: matrixPos[minIdx].node }
   }
-
-  // update (dt) {}
 }

assets/Script/miniBlock.ts.meta

 {
   "ver": "1.1.0",
-  "uuid": "005cb974-4dad-45ce-acb8-fb0f1da60d28",
+  "uuid": "b120771b-3168-4d54-b293-1557c0abfb76",
   "importer": "typescript",
   "isPlugin": false,
   "loadPluginInWeb": true,

assets/resources/prefab/block.prefab → assets/resources/prefab/blockFab.prefab

@@ -21,10 +21,13 @@
     "_components": [
       {
         "__id__": 2
+      },
+      {
+        "__id__": 3
       }
     ],
     "_prefab": {
-      "__id__": 3
+      "__id__": 4
     },
     "_opacity": 255,
     "_color": {
@@ -105,6 +108,16 @@
     "_atlas": null,
     "_id": ""
   },
+  {
+    "__type__": "6e215zrjgRBjK+Ok76dz8gM",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {