js/pot.js

// 魔法锅类
class MagicPot {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 120;
        this.height = 100;
        this.state = 'idle'; // idle, activated, cooking, overflowing
        
        // 动画属性
        this.animationTime = 0;
        this.glowIntensity = 0;
        this.shakeAmount = 0;
        this.lidOffset = 0;
        this.steamParticles = [];
        
        // 颜色配置
        this.colors = {
            pot: '#8B4513',
            potHighlight: '#CD853F',
            potShadow: '#654321',
            lid: '#A0522D',
            lidHighlight: '#DEB887',
            glow: '#FFD700',
            steam: '#FFFFFF',
            magic: '#FF69B4'
        };
        
        // 食物和动物素材
        this.foodImage = null;
        this.animalImage = null;
        this.currentFood = null;
        
        // 魔法锅图片
        this.potImage = null;
        this.imageLoaded = false;
        this.loadPotImage();
    }
    
    update(deltaTime) {
        this.animationTime += deltaTime * 0.001;
        
        // 根据状态更新动画
        switch (this.state) {
            case 'idle':
                this.updateIdleAnimation();
                break;
            case 'activated':
                this.updateActivatedAnimation();
                break;
            case 'cooking':
                this.updateCookingAnimation();
                break;
            case 'overflowing':
                this.updateOverflowingAnimation();
                break;
        }
        
        // 更新蒸汽粒子
        this.updateSteamParticles(deltaTime);
    }
    
    updateIdleAnimation() {
        // 轻微的呼吸效果
        this.glowIntensity = Math.sin(this.animationTime * 0.5) * 0.1 + 0.1;
        this.shakeAmount = 0;
        this.lidOffset = 0;
    }
    
    updateActivatedAnimation() {
        // 发光效果
        this.glowIntensity = Math.sin(this.animationTime * 2) * 0.3 + 0.5;
        this.shakeAmount = 0;
        this.lidOffset = 0;
        
        // 生成魔法粒子
        if (Math.random() < 0.1) {
            this.createMagicParticle();
        }
    }
    
    updateCookingAnimation() {
        // 强烈的发光和轻微震动
        this.glowIntensity = Math.sin(this.animationTime * 3) * 0.4 + 0.6;
        this.shakeAmount = Math.sin(this.animationTime * 8) * 2;
        this.lidOffset = Math.sin(this.animationTime * 4) * 3;
        
        // 生成蒸汽
        if (Math.random() < 0.3) {
            this.createSteamParticle();
        }
        
        // 生成魔法粒子
        if (Math.random() < 0.2) {
            this.createMagicParticle();
        }
    }
    
    updateOverflowingAnimation() {
        // 剧烈震动，锅盖被顶开
        this.glowIntensity = 1;
        this.shakeAmount = Math.sin(this.animationTime * 15) * 5;
        this.lidOffset = -20 + Math.sin(this.animationTime * 10) * 5;
        
        // 大量蒸汽
        if (Math.random() < 0.8) {
            this.createSteamParticle();
        }
        
        // 魔法粒子
        if (Math.random() < 0.5) {
            this.createMagicParticle();
        }
    }
    
    createSteamParticle() {
        const particle = {
            x: this.x + (Math.random() - 0.5) * this.width * 0.8,
            y: this.y - this.height * 0.3,
            vx: (Math.random() - 0.5) * 20,
            vy: -Math.random() * 50 - 30,
            size: Math.random() * 8 + 4,
            opacity: 0.8,
            life: 1,
            maxLife: Math.random() * 2 + 1
        };
        
        this.steamParticles.push(particle);
    }
    
    createMagicParticle() {
        const angle = Math.random() * Math.PI * 2;
        const radius = this.width * 0.6;
        
        const particle = {
            x: this.x + Math.cos(angle) * radius,
            y: this.y + Math.sin(angle) * radius * 0.5,
            vx: Math.cos(angle) * 30,
            vy: Math.sin(angle) * 30 - 20,
            size: Math.random() * 4 + 2,
            opacity: 1,
            life: 1,
            maxLife: Math.random() * 1.5 + 0.5,
            color: Math.random() < 0.5 ? '#FFD700' : '#FF69B4'
        };
        
        this.steamParticles.push(particle);
    }
    
    updateSteamParticles(deltaTime) {
        for (let i = this.steamParticles.length - 1; i >= 0; i--) {
            const particle = this.steamParticles[i];
            
            // 更新位置
            particle.x += particle.vx * deltaTime * 0.001;
            particle.y += particle.vy * deltaTime * 0.001;
            
            // 更新生命周期
            particle.life -= deltaTime * 0.001 / particle.maxLife;
            particle.opacity = particle.life;
            
            // 蒸汽粒子逐渐变大
            if (!particle.color) {
                particle.size += deltaTime * 0.002;
            }
            
            // 移除死亡的粒子
            if (particle.life <= 0) {
                this.steamParticles.splice(i, 1);
            }
        }
    }
    
    render(ctx) {
        const currentX = this.x + (Math.random() - 0.5) * this.shakeAmount;
        const currentY = this.y + (Math.random() - 0.5) * this.shakeAmount;
        
        // 绘制发光效果
        if (this.glowIntensity > 0) {
            this.renderGlow(ctx, currentX, currentY);
        }
        
        // 绘制魔法锅（图片或默认绘制）
        if (this.imageLoaded && this.potImage) {
            this.renderPotImage(ctx, currentX, currentY);
        } else {
            // 备用绘制方案
            this.renderPotBody(ctx, currentX, currentY);
            this.renderPotLid(ctx, currentX, currentY + this.lidOffset);
        }
        
        // 绘制蒸汽和魔法粒子
        this.renderParticles(ctx);
        
        // 绘制装饰
        this.renderDecorations(ctx, currentX, currentY);
    }
    
    renderPotImage(ctx, x, y) {
        ctx.save();
        
        // 如果有发光效果，添加阴影
        if (this.glowIntensity > 0) {
            ctx.shadowBlur = this.glowIntensity * 30;
            ctx.shadowColor = '#FFD700';
        }
        
        // 计算图片尺寸和位置
        const imageWidth = this.width * 1.5; // 稍微放大一点
        const imageHeight = this.height * 1.5;
        const imageX = x - imageWidth / 2;
        const imageY = y - imageHeight / 2 + this.lidOffset * 0.3; // 锅盖偏移效果
        
        // 绘制魔法锅图片
        ctx.drawImage(
            this.potImage,
            imageX,
            imageY,
            imageWidth,
            imageHeight
        );
        
        ctx.restore();
    }
    
    renderGlow(ctx, x, y) {
        const glowRadius = this.width * 0.8 * this.glowIntensity;
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, glowRadius);
        
        gradient.addColorStop(0, `rgba(255, 215, 0, ${this.glowIntensity * 0.3})`);
        gradient.addColorStop(0.5, `rgba(255, 105, 180, ${this.glowIntensity * 0.2})`);
        gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
        
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, glowRadius, 0, Math.PI * 2);
        ctx.fill();
    }
    
    renderPotBody(ctx, x, y) {
        const potWidth = this.width;
        const potHeight = this.height;
        
        // 锅身主体
        ctx.fillStyle = this.colors.pot;
        ctx.beginPath();
        ctx.ellipse(x, y + potHeight * 0.3, potWidth * 0.5, potHeight * 0.4, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // 锅身侧面
        ctx.fillStyle = this.colors.potShadow;
        ctx.fillRect(x - potWidth * 0.5, y - potHeight * 0.2, potWidth, potHeight * 0.5);
        
        // 锅身高光
        ctx.fillStyle = this.colors.potHighlight;
        ctx.beginPath();
        ctx.ellipse(x - potWidth * 0.2, y - potHeight * 0.1, potWidth * 0.15, potHeight * 0.1, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // 锅把手
        this.renderHandles(ctx, x, y);
    }
    
    renderHandles(ctx, x, y) {
        ctx.strokeStyle = this.colors.potShadow;
        ctx.lineWidth = 8;
        ctx.lineCap = 'round';
        
        // 左把手
        ctx.beginPath();
        ctx.arc(x - this.width * 0.6, y, this.width * 0.15, -Math.PI * 0.3, Math.PI * 0.3);
        ctx.stroke();
        
        // 右把手
        ctx.beginPath();
        ctx.arc(x + this.width * 0.6, y, this.width * 0.15, Math.PI * 0.7, Math.PI * 1.3);
        ctx.stroke();
    }
    
    renderPotLid(ctx, x, y) {
        const lidWidth = this.width * 0.9;
        const lidHeight = this.height * 0.2;
        
        // 锅盖主体
        ctx.fillStyle = this.colors.lid;
        ctx.beginPath();
        ctx.ellipse(x, y - this.height * 0.3, lidWidth * 0.5, lidHeight * 0.5, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // 锅盖高光
        ctx.fillStyle = this.colors.lidHighlight;
        ctx.beginPath();
        ctx.ellipse(x - lidWidth * 0.1, y - this.height * 0.35, lidWidth * 0.3, lidHeight * 0.3, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // 锅盖把手
        ctx.fillStyle = this.colors.potShadow;
        ctx.beginPath();
        ctx.ellipse(x, y - this.height * 0.45, 8, 12, 0, 0, Math.PI * 2);
        ctx.fill();
        
        ctx.fillStyle = this.colors.lidHighlight;
        ctx.beginPath();
        ctx.ellipse(x - 2, y - this.height * 0.48, 4, 6, 0, 0, Math.PI * 2);
        ctx.fill();
    }
    
    renderParticles(ctx) {
        this.steamParticles.forEach(particle => {
            ctx.save();
            ctx.globalAlpha = particle.opacity;
            
            if (particle.color) {
                // 魔法粒子
                ctx.fillStyle = particle.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = particle.color;
            } else {
                // 蒸汽粒子
                ctx.fillStyle = this.colors.steam;
            }
            
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.restore();
        });
    }
    
    renderDecorations(ctx, x, y) {
        // 绘制魔法符文（如果激活）
        if (this.state !== 'idle') {
            this.renderMagicRunes(ctx, x, y);
        }
        
        // 绘制食物图标（如果正在烹饪）
        if (this.state === 'cooking' && this.currentFood) {
            this.renderFoodIcon(ctx, x, y);
        }
    }
    
    renderMagicRunes(ctx, x, y) {
        const runeRadius = this.width * 0.8;
        const runeCount = 6;
        const time = this.animationTime * 2;
        
        ctx.strokeStyle = this.colors.magic;
        ctx.lineWidth = 2;
        ctx.globalAlpha = this.glowIntensity * 0.5;
        
        for (let i = 0; i < runeCount; i++) {
            const angle = (i / runeCount) * Math.PI * 2 + time;
            const runeX = x + Math.cos(angle) * runeRadius;
            const runeY = y + Math.sin(angle) * runeRadius * 0.5;
            
            // 绘制简单的符文形状
            ctx.beginPath();
            ctx.moveTo(runeX - 5, runeY - 5);
            ctx.lineTo(runeX + 5, runeY + 5);
            ctx.moveTo(runeX + 5, runeY - 5);
            ctx.lineTo(runeX - 5, runeY + 5);
            ctx.stroke();
        }
        
        ctx.globalAlpha = 1;
    }
    
    renderFoodIcon(ctx, x, y) {
        // 在锅上方显示食物图标
        const iconY = y - this.height * 0.8;
        
        ctx.fillStyle = '#FFD700';
        ctx.font = '24px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(this.getFoodEmoji(this.currentFood), x, iconY);
    }
    
    getFoodEmoji(foodName) {
        const emojiMap = {
            'apple': '🍎',
            'banana': '🍌',
            'orange': '🍊',
            'strawberry': '🍓',
            'watermelon': '🍉',
            'grape': '🍇',
            'pizza': '🍕',
            'burger': '🍔',
            'cake': '🍰',
            'cookie': '🍪',
            'bread': '🍞',
            'cheese': '🧀',
            'fish': '🐟',
            'chicken': '🍗',
            'rice': '🍚',
            'noodles': '🍜'
        };
        
        return emojiMap[foodName] || '🍽️';
    }
    
    // 状态控制方法
    activate() {
        this.state = 'activated';
        this.animationTime = 0;
    }
    
    startCooking(foodName) {
        this.state = 'cooking';
        this.currentFood = foodName;
        this.animationTime = 0;
    }
    
    startOverflowing() {
        this.state = 'overflowing';
        this.animationTime = 0;
    }
    
    stopOverflowing() {
        this.state = 'activated';
        this.lidOffset = 0;
        this.shakeAmount = 0;
    }
    
    reset() {
        this.state = 'idle';
        this.currentFood = null;
        this.animationTime = 0;
        this.glowIntensity = 0;
        this.shakeAmount = 0;
        this.lidOffset = 0;
        this.steamParticles = [];
    }
    
    setFoodAssets(foodImage, animalImage) {
        this.foodImage = foodImage;
        this.animalImage = animalImage;
    }
    
    // 碰撞检测
    contains(x, y) {
        const dx = x - this.x;
        const dy = y - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        return distance < this.width * 0.5;
    }
    
    // 获取锅的边界
    getBounds() {
        return {
            left: this.x - this.width * 0.5,
            right: this.x + this.width * 0.5,
            top: this.y - this.height * 0.5,
            bottom: this.y + this.height * 0.5
        };
    }
    
    // 加载魔法锅图片
    loadPotImage() {
        this.potImage = new Image();
        this.potImage.onload = () => {
            this.imageLoaded = true;
            console.log('魔法锅图片加载成功');
        };
        this.potImage.onerror = () => {
            console.warn('魔法锅图片加载失败，使用默认绘制');
            this.imageLoaded = false;
        };
        this.potImage.src = 'assets/images/magic_pot.png';
    }
}