PuzzleTap/assets/scripts/how_to_play_game.ts

import global_model from "./global_model";
const { ccclass, property } = cc._decorator;

@ccclass
export default class how_to_play_game extends cc.Component {
    @property(cc.Node)
    node_box: cc.Node = null;

    @property([cc.Node])
    showTiles: cc.Node[] = [];
    oldPos: any[] = [];
    @property(cc.Node)
    node_ui: cc.Node = null;

    start() {
        // 初始化节点相关属性
        this.initializeNodeAttributes();

        // 根据全局模型中所选关卡等级决定是否展示帮助界面并进行相应操作
        this.handleLevelBasedUI();
    }

    // 初始化节点的属性，如缩放、透明度等，并记录初始位置
    private initializeNodeAttributes(): void {
        this.node_ui.scale = 1;
        this.node.opacity = 255;
        this.node_ui.opacity = 0;

        this.oldPos[0] = this.showTiles[0].position;
        this.oldPos[1] = this.showTiles[1].position;
        this.oldPos[2] = this.showTiles[2].position;
    }

    // 根据全局模型中所选关卡等级来处理UI的显示与相关操作
    private handleLevelBasedUI(): void {
        if (global_model.game.selectedLevel === 1) {
            // 展示帮助界面相关节点并执行帮助动画
            this.showHelpUIAndAnimate();
            this.playHelp();
        } else {
            // 隐藏当前节点
            this.hideNode();
        }
    }

    // 展示帮助界面相关节点，设置其属性并启动动画
    private showHelpUIAndAnimate(): void {
        cc.tween(this.node_ui)
            .to(0.25, { scale: 1, opacity: 255 }, { easing: 'sineOut' })
            .start();
    }

    // 隐藏当前节点
    private hideNode(): void {
        this.node.active = false;
    }

    playHelp() {
        // 重置展示瓦片的缩放和位置
        this.resetShowTilesAttributes();

        // 对每个展示瓦片分别设置动画延迟和移动目标位置并启动动画
        this.animateShowTiles();

        // 在最后一个展示瓦片动画完成后执行后续操作
        this.handleShowTilesFinalAnimation();
    }

    // 重置展示瓦片的缩放为1，并设置回初始位置
    private resetShowTilesAttributes(): void {
        this.showTiles[0].scale = 1;
        this.showTiles[1].scale = 1;
        this.showTiles[2].scale = 1;

        this.showTiles[0].position = this.oldPos[0];
        this.showTiles[1].position = this.oldPos[1];
        this.showTiles[2].position = this.oldPos[2];
    }

    // 对每个展示瓦片分别设置动画延迟和移动目标位置并启动动画
    private animateShowTiles(): void {
        cc.tween(this.showTiles[0])
            .delay(0.9)
            .to(0.5, { x: -173.907, y: -231 })
            .start();

        cc.tween(this.showTiles[1])
            .delay(1.3)
            .to(0.5, { x: -86.697, y: -231 })
            .start();

        cc.tween(this.showTiles[2])
            .delay(1.7)
            .to(0.5, { x: 1.942, y: -231 })
            .start();
    }

    // 在最后一个展示瓦片动画完成后执行后续操作，如隐藏展示瓦片并再次执行相关逻辑（非递归）
    private handleShowTilesFinalAnimation(): void {
        cc.tween(this.showTiles[0])
            .to(0.2, { scale: 0 })
            .start();

        cc.tween(this.showTiles[1])
            .to(0.2, { scale: 0 })
            .start();

        cc.tween(this.showTiles[2])
            .to(0.2, { scale: 0 })
            .delay(0.8)
            .call(() => {
                // 这里不再递归调用playHelp，而是执行其他逻辑，比如重新展示UI等（这里暂未添加具体逻辑）
            })
            .start();
    }

    close(): void {
        this.hideNode();
    }
}