新手引导

assets/Script/Config/GameConfig.ts

@@ -12,11 +12,14 @@ export const CUSTOM_EVENT = {
   /** 销毁游戏场景 */
   GAME_DESTROY: 'GAME_DESTROY',
   /** 加分 */
-  ADD_SCORE:'ADD_SCORE',
+  ADD_SCORE: 'ADD_SCORE',
   /** 放置方块 */
-  SET_BLOCK:'SET_BLOCK',
+  SET_BLOCK: 'SET_BLOCK',
   /** 检查方块能否放入 */
-  CHECK_IS_SET:'CHECK_IS_SET',
+  CHECK_IS_SET: 'CHECK_IS_SET',
+  /** 开始新手引导 */
+  START_GUIDE: 'START_GUIDE',
+
 }
 
 export const Config = {
@@ -27,7 +30,7 @@ export const Config = {
   /** 填入方块颜色,小方块颜色 */
   miniBlockColor: '#58D9B3',
   /** 小方块被禁用的颜色 */
-  miniBlockDisabledColor:'#A0CDC0',
+  miniBlockDisabledColor: '#A0CDC0',
   /** 默认方块颜色,空白方块颜色 */
   defaultColor: '#8FBABA',
   /** 每一个方块动画播放延时 ms*/
@@ -37,9 +40,9 @@ export const Config = {
   /** 下方小方块间隔 */
   miniBlockOffset: 2,
   /** 小方块大小 */
-  miniBlockW:33.5,
+  miniBlockW: 33.5,
   /** 小方块生成矩阵 5*5 */
-  miniBlockMatrix:[
+  miniBlockMatrix: [
     [
       [0, 0, 0, 0, 0],
       [0, 0, 0, 0, 0],
@@ -230,7 +233,16 @@ export const Config = {
       [0, 0, 1, 0, 0],
     ]
   ],
-  
+
+  /** 新手引导的方块矩阵 */
+  guideBlockMatrix: [
+    [0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+    [0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0],
+  ]
+
 }
 
 /** 方块状态 */

assets/Script/GameScene.ts

@@ -24,6 +24,12 @@ export default class GameScene extends cc.Component {
   /** 已放置方块集数量 */
   setBlockNum = 0
 
+  /** 是否为新手引导 */
+  isGuide = false
+
+  /** 所有能拖动的块管理器 */
+  allBlcokManagerNode: cc.Node[] = []
+
   protected onLoad(): void {
 
     /** 开启碰撞检测 */
@@ -35,10 +41,14 @@ export default class GameScene extends cc.Component {
   start() {
     this.blockMatrix = cc.find('blockMatrix', this.node)
     const { maxRow, maxCol } = this.gameConfig
+    this.allBlcokManagerNode = ['miniBlockWrpLeft', 'miniBlockWrpMid', 'miniBlockWrpRight'].map((key) => {
+      return cc.find(key, this.node)
+    })
     const testBlock = []
     // for (let i = 0; i < maxCol - 2; i++) {
     //   testBlock.push(...Array(6).fill('').map((_, j) => j + 1 + (i + 1) * maxRow))
     // }
+    cc.find('guideWrp', this.node).active = false
     this.setDefaultBlock(testBlock)
     this.addNodeEvent()
   }
@@ -62,6 +72,16 @@ export default class GameScene extends cc.Component {
     }
   }
 
+  /** 开始新手引导 */
+  startGuide() {
+    this.isGuide = true
+    cc.find('guideWrp', this.node).active = true
+    const blocks = [0, 10, 20, 30, 40, 50, 60, 70, 80, 95, 96, 97, 98, 99]
+    this.setDefaultBlock(blocks)
+    const blockManager = this.allBlcokManagerNode[0].getComponent('blockManager')
+    blockManager.refreshMiniBlock(false, Config.guideBlockMatrix)
+  }
+
   /** 添加节点的事件 */
   addNodeEvent() {
     // cc.game.on(cc.game.EVENT_HIDE, () => {
@@ -76,7 +96,7 @@ export default class GameScene extends cc.Component {
     this.node.on(CUSTOM_EVENT.SET_BLOCK, this.setBlockEventCb, this)
     this.node.on(CUSTOM_EVENT.CHECK_IS_SET, this.checkIsSetBlock, this)
     exportEvent.on(CUSTOM_EVENT.NEXT_LEVEL, this.nextLevel, this)
-    exportEvent.on(CUSTOM_EVENT.GAME_START, this.startGame, this)
+    exportEvent.on(CUSTOM_EVENT.START_GUIDE, this.startGuide, this)
     exportEvent.on(CUSTOM_EVENT.GAME_INIT, ({ detail = {} }) => {
       this.resetConfig(detail)
     }, this)
@@ -91,7 +111,7 @@ export default class GameScene extends cc.Component {
     if (isTest && (href?.includes('duibadev') || href?.includes('duibatest')) || href.includes('localhost')) {
       const testEventMap = {
         refreshProp: 'refreshStageProps',
-        start: 'testStartGame',
+        start: 'startGuide',
         init: 'testInit',
         clear: 'setDefaultBlock',
         radom: 'testRadom'
@@ -104,7 +124,7 @@ export default class GameScene extends cc.Component {
   }
 
   testRadom() {
-    const {maxCol,maxRow} = this.gameConfig
+    const { maxCol, maxRow } = this.gameConfig
     const testBlock = []
     for (let i = 0; i < maxCol - 2; i++) {
       testBlock.push(...Array(6).fill('').map((_, j) => j + 1 + (i + 1) * maxRow))
@@ -134,6 +154,7 @@ export default class GameScene extends cc.Component {
    * @param config config
    */
   startGame({ detail = {} }) {
+    this.startGuide()
   }
 
   /**
@@ -159,7 +180,7 @@ export default class GameScene extends cc.Component {
     this.isGameOver = true
     console.log('gameOver')
     exportEvent.fire(CUSTOM_EVENT.GAME_OVER, {
-      score:this.score
+      score: this.score
     })
   }
 
@@ -183,25 +204,30 @@ export default class GameScene extends cc.Component {
       this.refreshStageProps()
     }
     this.isCheckGameOver()
+    if (this.isGuide) {
+      this.setBlockNum--
+      this.isGuide = false
+      cc.find('guideWrp/guide1',this.node).active = false
+      const blockManager = this.allBlcokManagerNode[0].getComponent('blockManager')
+      blockManager.refreshMiniBlock(true)
+    }
   }
 
   /** 检查游戏是否结束 */
-  isCheckGameOver(){
-    const allBlcokManagerKey = ['miniBlockWrpLeft', 'miniBlockWrpMid', 'miniBlockWrpRight']
-    const blockStates = allBlcokManagerKey.filter((key) => {
-      const blockManager = cc.find(key, this.node).getComponent('blockManager')
+  isCheckGameOver() {
+    const blockStates = this.allBlcokManagerNode.filter((node) => {
+      const blockManager = node.getComponent('blockManager')
       return !(blockManager.isDisabled || blockManager.miniBlockKey.length === 0)
     })
-    if(blockStates.length === 0){
+    if (blockStates.length === 0) {
       this.gameOver()
     }
   }
 
   /** 检查矩阵能否放入 */
   checkIsSetBlock() {
-    const allBlcokManagerKey = ['miniBlockWrpLeft', 'miniBlockWrpMid', 'miniBlockWrpRight']
-    allBlcokManagerKey.forEach((key) => {
-      const blockManager = cc.find(key, this.node).getComponent('blockManager')
+    const blockStates = this.allBlcokManagerNode.filter((node) => {
+      const blockManager = node.getComponent('blockManager')
       blockManager.checkIsSetBlock()
     })
   }
@@ -209,9 +235,8 @@ export default class GameScene extends cc.Component {
   /** 刷新舞台道具 */
   refreshStageProps() {
     this.setBlockNum = 0
-    const allBlcokManagerKey = ['miniBlockWrpLeft', 'miniBlockWrpMid', 'miniBlockWrpRight']
-    allBlcokManagerKey.forEach((key) => {
-      const blockManager = cc.find(key, this.node).getComponent('blockManager')
+    const blockStates = this.allBlcokManagerNode.filter((node) => {
+      const blockManager = node.getComponent('blockManager')
       blockManager.refreshMiniBlock(true)
     })
   }

assets/Script/blockManager.ts

@@ -62,9 +62,15 @@ export default class BlockManager extends cc.Component {
   /**
    * 刷新小方块的生成
    * @param isPlayAni 是否需要播放刷新动画
+   * @param blocks 预设
    */
-  refreshMiniBlock(isPlayAni) {
-    const miniBlockMatrix = getRandomArrayElements(Config.miniBlockMatrix, 1)[0]
+  refreshMiniBlock(isPlayAni, blocks) {
+    let miniBlockMatrix = []
+    if (blocks) {
+      miniBlockMatrix = [...blocks]
+    } else {
+      miniBlockMatrix = getRandomArrayElements(Config.miniBlockMatrix, 1)[0]
+    }
     this.miniBlockKey = JSON.parse(JSON.stringify(miniBlockMatrix))
     this.node.removeAllChildren()
     const { miniBlockOffset, miniBlockW } = Config
@@ -301,6 +307,14 @@ export default class BlockManager extends cc.Component {
     const allTargetNodeId = filterBlock.map(({ targetNode }) => targetNode.getSiblingIndex())
     // 索引是否重复
     const isRepeat = allTargetNodeId.find((_, i) => allTargetNodeId.includes(_, i + 1))
+    const GameScene = cc.find('Canvas').getComponent('GameScene')
+    // 新手引导情况下，只能放入对应位置
+    if(GameScene.isGuide && !isRepeat && isEmpty){
+      const {targetNode} = filterBlock?.[0]
+      if(allTargetNodeId[0] !== 90){
+        return false
+      }
+    }
     return !isRepeat && isEmpty
   }
 

assets/resources/images/guide1.png.meta

+{
+  "ver": "2.3.7",
+  "uuid": "133d01d5-943f-47a8-bfe5-8bebd66fc6d3",
+  "importer": "texture",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 399,
+  "height": 174,
+  "platformSettings": {},
+  "subMetas": {
+    "guide1": {
+      "ver": "1.0.6",
+      "uuid": "da3817c5-ef81-408b-8944-f7d3330d9c80",
+      "importer": "sprite-frame",
+      "rawTextureUuid": "133d01d5-943f-47a8-bfe5-8bebd66fc6d3",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 399,
+      "height": 174,
+      "rawWidth": 399,
+      "rawHeight": 174,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file

assets/resources/images/guide2.png.meta

+{
+  "ver": "2.3.7",
+  "uuid": "6d7944b8-3afe-4ceb-847b-9d934242a99f",
+  "importer": "texture",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 399,
+  "height": 152,
+  "platformSettings": {},
+  "subMetas": {
+    "guide2": {
+      "ver": "1.0.6",
+      "uuid": "3cab4ab5-2140-4590-aa64-c00f7914e3ff",
+      "importer": "sprite-frame",
+      "rawTextureUuid": "6d7944b8-3afe-4ceb-847b-9d934242a99f",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 399,
+      "height": 152,
+      "rawWidth": 399,
+      "rawHeight": 152,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file

assets/resources/svga/guide.svga.meta

+{
+  "ver": "1.0.3",
+  "uuid": "680385c3-63e4-49be-9715-8885780175f7",
+  "importer": "asset",
+  "subMetas": {}
+}
\ No newline at end of file