four.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>🐎 马年大吉 - 烟花表演</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            overflow: hidden;
            background: linear-gradient(to bottom, #0a0e27 0%, #1a1f3a 50%, #2d3561 100%);
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            touch-action: none;
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* 夜空星星 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            text-align: center;
            pointer-events: none;
            width: 90%;
            max-width: 600px;
        }

        .golden-horse {
            font-size: 5rem;
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
            animation: gallop 2s ease-in-out infinite;
            display: inline-block;
            opacity: 0.9;
        }

        @keyframes gallop {
            0%, 100% { transform: translateY(0) rotate(-3deg); }
            50% { transform: translateY(-10px) rotate(3deg); }
        }

        h1 {
            font-size: 3rem;
            font-weight: 700;
            margin: 20px 0;
            color: #ffd700;
            text-shadow: 0 2px 20px rgba(255, 215, 0, 0.4);
            letter-spacing: 0.15em;
            opacity: 0.95;
        }

        .blessing-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .blessing-text {
            font-size: 1.2rem;
            line-height: 2;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        .blessing-text span {
            display: block;
            margin: 8px 0;
            opacity: 0;
            animation: fadeIn 0.8s ease-out forwards;
        }

        .blessing-text span:nth-child(1) { animation-delay: 0.2s; }
        .blessing-text span:nth-child(2) { animation-delay: 0.4s; }
        .blessing-text span:nth-child(3) { animation-delay: 0.6s; }
        .blessing-text span:nth-child(4) { animation-delay: 0.8s; }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .hint {
            position: fixed;
            bottom: 8%;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            z-index: 20;
            background: rgba(0,0,0,0.3);
            padding: 8px 16px;
            border-radius: 20px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    <canvas id="canvas"></canvas>

    <div class="container">
        <div class="golden-horse">🐎</div>
        <h1>马年大吉</h1>
        <div class="blessing-card">
            <div class="blessing-text">
                <span>🏇 马到成功，前程似锦</span>
                <span>🐴 一马当先，万事如意</span>
                <span>✨ 龙马精神，阖家欢乐</span>
                <span>🧧 马上有钱，福气满满</span>
            </div>
        </div>
    </div>

    <div class="hint">点击屏幕燃放烟花</div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let width, height;

        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width * window.devicePixelRatio;
            canvas.height = height * window.devicePixelRatio;
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        }
        resize();
        window.addEventListener('resize', resize);

        // 生成背景星星
        const starsContainer = document.getElementById('stars');
        for (let i = 0; i < 50; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = Math.random() * 100 + '%';
            star.style.top = Math.random() * 60 + '%';
            star.style.width = Math.random() * 2 + 1 + 'px';
            star.style.height = star.style.width;
            star.style.animationDelay = Math.random() * 3 + 's';
            starsContainer.appendChild(star);
        }

        // 真实烟花配色（金色系、暖白、红色系、少量银绿）
        const fireworkColors = [
            '#FFD700', // 金色
            '#FFA500', // 橙色
            '#FF6347', // 番茄红
            '#FFE4B5', // 暖白
            '#FFF8DC', //  cornsilk
            '#F0E68C', // 卡其黄
            '#DAA520', // 金菊色
            '#FF4500', // 橙红
            '#C0C0C0', // 银色（少量）
            '#98FB98', // 淡绿（少量）
            '#87CEEB', // 天蓝（极少量）
            '#FFFFFF'  // 纯白中心
        ];

        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randomColor() {
            return fireworkColors[Math.floor(Math.random() * fireworkColors.length)];
        }

        // 烟雾粒子（爆炸后的烟）
        class Smoke {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = random(20, 40);
                this.vx = random(-0.5, 0.5);
                this.vy = random(-0.3, 0.3);
                this.alpha = 0.15;
                this.decay = random(0.002, 0.004);
                this.gray = random(80, 120);
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.size += 0.3;
                this.alpha -= this.decay;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = `rgb(${this.gray}, ${this.gray}, ${this.gray})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        // 烟花粒子（小且远）
        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                // 爆炸速度较慢（远距离感）
                const angle = random(0, Math.PI * 2);
                const speed = random(1, 3.5); // 较慢的爆炸速度
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed;
                
                this.size = random(0.8, 2.2); // 更小的粒子
                this.alpha = random(0.8, 1);
                this.decay = random(0.008, 0.018); // 燃烧更久
                this.gravity = 0.02; // 轻微重力
                this.friction = 0.98;
                this.trail = [];
                this.trailLength = 8; // 长尾迹模拟长曝光
                this.blink = random(0, 1) > 0.7; // 30%概率闪烁
                this.blinkSpeed = random(0.1, 0.3);
                this.time = 0;
            }

            update() {
                this.time += 0.1;
                
                // 保存轨迹
                this.trail.push({ x: this.x, y: this.y, alpha: this.alpha });
                if (this.trail.length > this.trailLength) {
                    this.trail.shift();
                }

                this.vx *= this.friction;
                this.vy *= this.friction;
                this.vy += this.gravity;
                this.x += this.vx;
                this.y += this.vy;
                this.alpha -= this.decay;

                // 闪烁效果（模拟火星）
                if (this.blink) {
                    this.alpha += Math.sin(this.time) * 0.05;
                }
            }

            draw() {
                // 绘制尾迹（淡淡的拖尾）
                for (let i = 0; i < this.trail.length; i++) {
                    const point = this.trail[i];
                    const fade = (i / this.trail.length);
                    ctx.save();
                    ctx.globalAlpha = fade * this.alpha * 0.3;
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(point.x, point.y, this.size * fade * 0.5, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();
                }

                // 绘制主体（带柔光）
                ctx.save();
                ctx.globalAlpha = this.alpha;
                
                // 外层光晕（模拟大气散射）
                const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3);
                gradient.addColorStop(0, this.color);
                gradient.addColorStop(0.4, this.color);
                gradient.addColorStop(1, 'transparent');
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
                ctx.fill();

                // 核心亮点
                ctx.fillStyle = '#fff';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size * 0.3, 0, Math.PI * 2);
                ctx.fill();
                
                ctx.restore();
            }
        }

        // 爆炸闪光（瞬间照亮夜空）
        class Flash {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.alpha = 0.4;
                this.decay = 0.03;
                this.size = random(50, 100);
            }

            update() {
                this.alpha -= this.decay;
                this.size += 2;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        // 上升阶段（小金点）
        class Rocket {
            constructor(x, y, targetY, color) {
                this.x = x;
                this.y = y;
                this.targetY = targetY;
                this.color = color;
                this.vx = random(-0.3, 0.3);
                this.vy = random(-6, -4);
                this.trail = [];
                this.dead = false;
            }

            update() {
                this.trail.push({ x: this.x, y: this.y });
                if (this.trail.length > 5) this.trail.shift();

                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.15; // 减速上升

                if (this.vy >= 0 || this.y <= this.targetY) {
                    this.dead = true;
                    return true; // 返回爆炸位置
                }
                return false;
            }

            draw() {
                // 上升尾迹（淡淡的烟）
                ctx.save();
                this.trail.forEach((t, i) => {
                    ctx.globalAlpha = (i / this.trail.length) * 0.3;
                    ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
                    ctx.beginPath();
                    ctx.arc(t.x, t.y, 1.5, 0, Math.PI * 2);
                    ctx.fill();
                });
                ctx.restore();

                // 弹头（白色小亮点）
                ctx.save();
                ctx.fillStyle = '#fff';
                ctx.shadowBlur = 5;
                ctx.shadowColor = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        // 烟花爆炸（小远散）
        class Firework {
            constructor(x, y, power = 1) {
                this.x = x;
                this.y = y;
                this.particles = [];
                this.smokes = [];
                this.flash = new Flash(x, y, '#fff');
                
                // 主色调（决定整体颜色倾向）
                const mainColor = randomColor();
                const particleCount = random(30, 50) * power; // 更多小粒子
                
                for (let i = 0; i < particleCount; i++) {
                    // 主要用主色调，少量白色中心
                    const color = Math.random() > 0.8 ? '#FFFFFF' : mainColor;
                    this.particles.push(new Particle(x, y, color));
                }

                // 生成烟雾
                for (let i = 0; i < 5; i++) {
                    this.smokes.push(new Smoke(x + random(-20, 20), y + random(-20, 20)));
                }
            }

            update() {
                this.particles = this.particles.filter(p => {
                    p.update();
                    return p.alpha > 0;
                });

                this.smokes = this.smokes.filter(s => {
                    s.update();
                    return s.alpha > 0;
                });

                if (this.flash) {
                    this.flash.update();
                    if (this.flash.alpha <= 0) this.flash = null;
                }
            }

            draw() {
                // 先画烟雾（在最底层）
                this.smokes.forEach(s => s.draw());
                
                // 闪光
                if (this.flash) this.flash.draw();
                
                // 粒子
                this.particles.forEach(p => p.draw());
            }

            isDead() {
                return this.particles.length === 0 && this.smokes.length === 0 && !this.flash;
            }
        }

        // 管理器
        const rockets = [];
        const fireworks = [];

        // 创建烟花
        function createFirework(x, y, power = 1) {
            // 从屏幕底部随机位置发射
            const startX = x || random(width * 0.2, width * 0.8);
            const targetY = y || random(height * 0.2, height * 0.5);
            
            rockets.push(new Rocket(startX, height + 10, targetY, randomColor()));
        }

        // 自动燃放（模拟烟花表演）
        function autoFire() {
            createFirework(null, null, random(0.8, 1.5));
        }

        // 手动燃放层叠效果
        function manualFire(x, y) {
            createFirework(x, y, 1.2);
            
            // 0.3秒后旁边补一个
            setTimeout(() => {
                createFirework(x + random(-80, 80), y + random(-30, 30), 0.8);
            }, 300);
            
            // 0.6秒后高空再来一个
            setTimeout(() => {
                createFirework(x + random(-40, 40), y - random(50, 100), 1);
            }, 600);
        }

        // 动画
        function animate() {
            // 半透明覆盖制造拖尾效果（模拟相机长曝光）
            ctx.fillStyle = 'rgba(10, 14, 39, 0.15)';
            ctx.fillRect(0, 0, width, height);

            // 更新火箭
            for (let i = rockets.length - 1; i >= 0; i--) {
                const r = rockets[i];
                const exploded = r.update();
                r.draw();
                
                if (exploded) {
                    fireworks.push(new Firework(r.x, r.y));
                    rockets.splice(i, 1);
                } else if (r.dead) {
                    rockets.splice(i, 1);
                }
            }

            // 更新烟花
            for (let i = fireworks.length - 1; i >= 0; i--) {
                const f = fireworks[i];
                f.update();
                f.draw();
                if (f.isDead()) {
                    fireworks.splice(i, 1);
                }
            }

            requestAnimationFrame(animate);
        }

        // 事件
        document.addEventListener('click', (e) => {
            manualFire(e.clientX, e.clientY);
        });

        document.addEventListener('touchstart', (e) => {
            const touch = e.touches[0];
            manualFire(touch.clientX, touch.clientY);
        }, {passive: true});

        // 启动
        animate();
        
        // 自动表演间隔（3-6秒随机）
        setInterval(autoFire, random(3000, 6000));
        
        // 开场三连发
        setTimeout(() => autoFire(), 1000);
        setTimeout(() => autoFire(), 2000);
        setTimeout(() => autoFire(), 3500);
    </script>
</body>
</html>