pub/firework.html at master · derline/pub · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>烟花特效</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: black;
      overflow: hidden;
    }
    .container {
      position: relative;
      min-height: 100vh;
    }
    canvas {
      position: absolute;
      inset: 0;
    }
    .content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .text-center {
      text-align: center;
      color: white;
    }
    .sparkle {
      width: 48px;
      height: 48px;
      margin: 0 auto 16px;
      animation: pulse 2s infinite;
    }
    .title {
      font-size: 2.25rem;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .subtitle {
      font-size: 1.125rem;
      opacity: 0.75;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas id="canvas"></canvas>
    <div class="content">
      <div class="text-center">
        <svg class="sparkle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
          <path d="M5 3v4"/>
          <path d="M19 17v4"/>
          <path d="M3 5h4"/>
          <path d="M17 19h4"/>
        </svg>
        <h1 class="title">点击屏幕放烟花</h1>
        <p class="subtitle">Click anywhere to create fireworks!</p>
      </div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let particles = [];
    let animationFrameId;

    const colors = [
      '#ff0000', '#ffa500', '#ffff00', '#00ff00',
      '#00ffff', '#0000ff', '#ff00ff', '#ff69b4'
    ];

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }

    function createParticles(x, y) {
      const particleCount = 50;
      for (let i = 0; i < particleCount; i++) {
        const angle = (Math.PI * 2 * i) / particleCount;
        const velocity = 2 + Math.random() * 2;
        particles.push({
          x,
          y,
          color: colors[Math.floor(Math.random() * colors.length)],
          velocity: {
            x: Math.cos(angle) * velocity,
            y: Math.sin(angle) * velocity
          },
          alpha: 1,
          lifetime: 100 + Math.random() * 50
        });
      }
    }

    function hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ] : null;
    }

    function animate() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      particles = particles.filter(particle => {
        particle.x += particle.velocity.x;
        particle.y += particle.velocity.y;
        particle.velocity.y += 0.05; // gravity
        particle.alpha -= 0.005;
        particle.lifetime -= 1;

        ctx.beginPath();
        ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${hexToRgb(particle.color).join(',')}, ${particle.alpha})`;
        ctx.fill();

        return particle.lifetime > 0 && particle.alpha > 0;
      });

      animationFrameId = requestAnimationFrame(animate);
    }

    // Initialize
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    canvas.addEventListener('click', (e) => createParticles(e.clientX, e.clientY));
    animate();

    // Auto fireworks
    setInterval(() => {
      const x = Math.random() * canvas.width;
      const y = canvas.height - 100 + Math.random() * 50;
      createParticles(x, y);
    }, 2000);
  </script>
</body>
</html>