【功能】添加新手引导初步版本

assets/script/game/view/EliminateViewComp.ts

@@ -2,7 +2,7 @@
  * @Author: mojunshou 1637302775@qq.com
  * @Date: 2025-03-20 15:01:09
  * @LastEditors: mojunshou 1637302775@qq.com
- * @LastEditTime: 2025-04-17 16:14:26
+ * @LastEditTime: 2025-04-17 17:49:16
  * @Description: 消除游戏主场景
  */
 import { _decorator, Button, Color, EventTouch, instantiate, JsonAsset, Label, Node, Prefab, randomRangeInt, Sprite, tween, UITransform, Vec2, Vec3, Widget } from "cc";
@@ -126,6 +126,9 @@ export class EliminateViewComp extends CCComp {
     @property({ type: Label, displayName: "二倍速时间" })
     private lab_doubleTime: Label = null!;
 
+    @property({ type: Node, displayName: "引导层" })
+    private guideNode: Node = null!;
+
 
     //游戏配置行列
     private rows: number = 8;       // 行数
@@ -197,6 +200,18 @@ export class EliminateViewComp extends CCComp {
     private isGuideMode = false;
     private guideStep = 0;
 
+    //新人引导提示语
+    private guideTips: string[] = [
+        "拖动方块，填满整行可以进行消除",
+        "当行与列被砖块同时填满，砖块会被消除",
+        "点击方块可以旋转90°，不限旋转次数哦",
+        "放置&消除方块得分达成目标获得金砖"
+    ];
+
+
+
+
+
     /** 视图层逻辑代码分离演示 */
     async start() {
         // const entity = this.ent as ecs.Entity;         // ecs.Entity 可转为当前模块的具体实体对象
@@ -207,11 +222,11 @@ export class EliminateViewComp extends CCComp {
         this.setData();
         this.addEventList();
         this.initGrid();
-        // if (this.guideStep === 0) {
-        //     this.startGuideMode()
-        // } else {
-        //     this.initGrid();
-        // }
+        if (this.guideStep === 0) {
+            this.startGuideMode()
+        } else {
+            this.initGrid();
+        }
     }
 
 
@@ -326,6 +341,7 @@ export class EliminateViewComp extends CCComp {
     startGuideMode() {
         this.isGuideMode = true
         this.guideStep = 1
+        this.gridNode.active = true;
         this.setupGuideStep(this.guideStep)
     }
 
@@ -335,8 +351,17 @@ export class EliminateViewComp extends CCComp {
         this.brickNode.destroyAllChildren();
 
         this.guideStep = step
+        const tips_node = this.guideNode.getChildByPath("tips/lab_tips");
+        if (tips_node) {
+            const tips = tips_node.getComponent(Label);
+            if (tips) {
+                tips.string = this.guideTips[step - 1];
+            }
+        }
 
         if (step === 1) {
+
+
             const emptyIndex = Math.floor(this.cols / 2)
             for (let c = 0; c < this.cols; c++) {
                 if (c !== emptyIndex) {
@@ -365,6 +390,8 @@ export class EliminateViewComp extends CCComp {
             for (let r = 0; r < this.rows; r++) {
                 for (let c = 0; c < 2; c++) {
                     if (r === 2 && c === 0) continue // 留一个空位用于放置旋转后的L型砖块
+                    if (r === 1 && c === 0) continue // 留一个空位用于放置旋转后的L型砖块
+                    if (r === 3 && c === 0) continue // 留一个空位用于放置旋转后的L型砖块
                     if (r === 2 && c === 1) continue // 留一个空位用于放置旋转后的L型砖块
                     if (r === 1 && c === 1) continue // 留一个空位用于放置旋转后的L型砖块
                     if (r === 3 && c === 1) continue // 留一个空位用于放置旋转后的L型砖块
@@ -378,10 +405,12 @@ export class EliminateViewComp extends CCComp {
             // 创建一个L型方块，引导玩家旋转后放置
             this.createGuideBrick([
                 { row: 0, column: 0 },
-                { row: 0, column: -1 },
                 { row: 0, column: 1 },
-                { row: 1, column: 0 }
-            ], "BrickT", 1, 1, true)  //这要双II 
+                { row: 0, column: 2 },
+                { row: 1, column: 0 },
+                { row: 1, column: 1 },
+                { row: 1, column: 2 }
+            ], "BrickII", 1, 1, true)  //这要双II 
         }
         else if (step === 4) {
             const centerRow = Math.floor(this.rows / 2);
@@ -438,7 +467,7 @@ export class EliminateViewComp extends CCComp {
             brickNode: new Node(),
             gridColorKey: "colorKey",
             brickInitPos: new Vec3(),
-            type: 0,
+            type: colorIndex,
             rotateNode: null,
         }
         const node = this.generateBrick(brickKey, colorIndex)
@@ -447,7 +476,7 @@ export class EliminateViewComp extends CCComp {
         const transform = this.brickNode.getComponent(UITransform);
         if (transform) {
             const midX = transform.width / 2;
-            node.setPosition(midX, 0);
+            node.setPosition(0, 0);
             brickData.brickNode = node
             brickData.brickInitPos = node.getWorldPosition()
             this.bricksList.push(brickData)
@@ -686,6 +715,9 @@ export class EliminateViewComp extends CCComp {
 
 
     addBrick(index: number) {
+        if (this.isGuideMode) {
+            return;
+        }
         const brickKey = Object.keys(this.brickConfig['bricks'])[randomRangeInt(0, Object.keys(this.brickConfig['bricks']).length)];
         const brickConfig = this.brickConfig['bricks'][brickKey];
         const randomIndex = oops.random.getRandomInt(1, 5);  //颜色
@@ -958,6 +990,62 @@ export class EliminateViewComp extends CCComp {
                     }, 0.4);
                 }
             } else if (this.editingData.brickData && this.editingData.gridList.length > 0) {
+                if (this.isGuideMode && this.guideStep > 0) {
+                    const brickData = this.editingData.brickData
+                    const targetGrids = this.editingData.gridList
+
+                    // 如果格子数量不足，直接视为无效放置
+                    if (!brickData || !targetGrids || targetGrids.length !== brickData.gridConfig.length) {
+                        this.bricksList.push(brickData)
+                        if (brickData.brickNode) {
+                            tween(brickData.brickNode)
+                                .to(0.15, {
+                                    worldPosition: brickData.brickInitPos,
+                                    scale: new Vec3(0.8, 0.8, 0.8)
+                                })
+                                .call(() => {
+                                    if (brickData.brickNode) {
+                                        this.brickNode.addChild(brickData.brickNode)
+                                        brickData.brickNode.setWorldPosition(brickData.brickInitPos)
+                                    }
+                                })
+                                .start()
+                        }
+                        return
+                    }
+
+                    // 模拟砖块落下后的状态
+                    const tempGridList = this.copyGridList()
+                    for (let i = 0; i < targetGrids.length; i++) {
+                        const g = targetGrids[i]
+                        tempGridList[g.row][g.col].status = CellState.FILLED
+                    }
+
+                    const simulateResult = this.gridEliminateCheck(tempGridList)
+                    const canEliminate = simulateResult.gridEliminateList.length > 0
+
+                    if (!canEliminate) {
+                        this.bricksList.push(brickData)
+                        if (brickData.brickNode) {
+                            tween(brickData.brickNode)
+                                .to(0.15, {
+                                    worldPosition: brickData.brickInitPos,
+                                    scale: new Vec3(0.8, 0.8, 0.8)
+                                })
+                                .call(() => {
+                                    if (brickData.brickNode) {
+                                        this.brickNode.addChild(brickData.brickNode)
+                                        brickData.brickNode.setWorldPosition(brickData.brickInitPos)
+                                    }
+                                })
+                                .start()
+                        }
+                        return
+                    }
+                }
+
+
+
                 // 计算放置的格子数量
                 const placedGridCount = this.editingData.gridList.length;
                 // 获取中心位置用于显示分数
@@ -1003,13 +1091,26 @@ export class EliminateViewComp extends CCComp {
                         if (!hasElimination) {
                             this.shouldResetEliminateCount = true;
                         }
+                        //新手引导
+                        if (this.isGuideMode) {
+                            this.scheduleOnce(() => {
+                                if (this.guideStep < 4) {
+                                    this.setupGuideStep(this.guideStep + 1)
+                                } else {
+                                    this.isGuideMode = false;
+                                    this.guideNode.active = false;
+                                    this.initGrid();
+                                }
+                            }, 0.3)
+                        } else {
 
-                        // 检查游戏是否结束
-                        this.prompt(false).then(canContinue => {
-                            if (!canContinue) {
-                                this.gameOver();
-                            }
-                        });
+                            // 检查游戏是否结束
+                            this.prompt(false).then(canContinue => {
+                                if (!canContinue) {
+                                    this.gameOver();
+                                }
+                            });
+                        }
                     });
                 }, 0.1);
             } else {