CINC/scenes/storeScenes/BreatheLife.js

/**
 * BreatheLife 场景类
 * 
 * 交互场景，允许用户通过点击屏幕创建角色
 * 当创建的角色超过3个时，点击已存在的角色会为其设置纹理
 * 当设置纹理的角色超过3个时，自动切换到 MenuScene 场景
 */
export default class BreatheLife extends Phaser.Scene {
    /**
     * 构造函数
     * 初始化场景并设置场景键名为 'BreatheLife'
     */
    constructor() {
        super('BreatheLife')
        this.nextScene = 'MenuScene'
    }
    
    preload() {
        // 加载角色动画和图片资源
        this.load.image(`player0-0`, `assets/PNG/Players/Tiles/tile_${String(0).padStart(4, '0')}.png`)
        this.load.image(`player1-0`, `assets/PNG/Players/Tiles/tile_${String(8).padStart(4, '0')}.png`)
    }

    /**
     * 创建场景
     * 设置背景颜色，添加用户交互监听和自动切换计时器
     */
    create() {
        // 设置场景背景颜色为灰色
        this.cameras.main.setBackgroundColor('#999999')
        
        // 初始化角色计数器，用于跟踪创建的角色数量
        this.spriteCount = 0
        this.spriteTextureCount = 0
        
        // 监听鼠标点击事件，点击后创建一个新的角色
        this.input.on('pointerdown', () => {
            // 获取点击位置的坐标
            const { x, y } = this.input.activePointer
            this.createSprite(x, y)
        })
    }
    
    /**
     * 创建一个新的角色或获取点击的精灵
     * @param {number} x - 角色的 x 坐标
     * @param {number} y - 角色的 y 坐标
     */
    createSprite(x, y) {
        // 获取点击位置的精灵
        const clickedSprite = this.getClickedSprite(x, y)
        console.log("点击到的精灵:", clickedSprite)
        // 如果满足条件则切换到下一场景
        if (this.spriteCount >= 3 && this.spriteTextureCount >= 3) {
            this.scene.start(this.nextScene)
        }
        else if (clickedSprite) {  // 如果点击到了精灵
            console.log("当前精灵的纹理:", clickedSprite.texture.key)  // 查看当前精灵的纹理
            // 如果纹理为默认值或纹理缺失
            if (clickedSprite.texture.key === 'player' || clickedSprite.texture.key === '__MISSING') {
                this.setSpriteTexture(clickedSprite, `player1-0`)  // 设置指定的纹理
            }
        }
        else {
            // 创建一个新的角色 sprite，缩放为1倍
            const sprite = this.physics.add.sprite(x, y, 'player').setScale(1)
            
            // 设置角色碰撞世界边界
            sprite.setCollideWorldBounds(true)
            
            // 增加角色计数器
            this.spriteCount++
            console.log("已设置纹理的角色数量:", this.spriteTextureCount)
            console.log("已创建的角色数量:", this.spriteCount)
        }
    }
    
    /**
     * 获取鼠标点击位置的精灵
     * @param {number} x - 点击位置的 x 坐标
     * @param {number} y - 点击位置的 y 坐标
     * @returns {Phaser.GameObjects.Sprite|null} - 点击位置的精灵，如果没有则返回 null
     */
    getClickedSprite(x, y) {
        // 获取场景中所有的精灵
        const sprites = this.children.getChildren().filter(child => child instanceof Phaser.GameObjects.Sprite)
        
        // 检查每个精灵是否被点击
        for (const sprite of sprites) {
            // 检查点击位置是否在精灵的边界内
            if (sprite.getBounds().contains(x, y)) {
                return sprite
            }
        }
        
        return null
    }

    setSpriteTexture(sprite, textureKey) {
        // 检查角色已设置的纹理数量是否超过3个
        if (this.spriteTextureCount > 3) {
            // 当设置纹理的角色超过时，切换到 MenuScene 场景
            this.scene.start('MenuScene')
        }
        sprite.setTexture(textureKey).setScale(1)

        this.spriteTextureCount++
        
    }

}