烟花特效工具（网页端+浏览器端）

yibeijiu

烟花特效工具（网页端+浏览器端），随便玩儿的，先上图：


说说功能（两个文件）：
1. html浏览器打开可以直接点击出现多种烟花特效
2. js使用脚本管理可实现浏览器任意网页的全局烟花特效

该放文件了
1.  HTML： html.rar (1.42 KB, 下载次数: 5)

2025-6-13 16:48 上传

点击文件名下载附件

2. JS  ： js.rar (1.32 KB, 下载次数: 5)

2025-6-13 16:48 上传

点击文件名下载附件

3. 汇总版： 01-烟花特效.rar (2.71 KB, 下载次数: 12)

2025-6-13 15:43 上传

点击文件名下载附件

再上代码：

[Asm] 纯文本查看 复制代码

<body>
    <canvas id="fireworksCanvas"></canvas>
    <script>
        const canvas = document.getElementById('fireworksCanvas');
        const ctx = canvas.getContext('2d');
        let fireworks = [];

        // Resize canvas to fit the window
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // Firework particle class
        class FireworkParticle {
            constructor(x, y, dx, dy, color, life) {
                this.x = x;
                this.y = y;
                this.dx = dx;
                this.dy = dy;
                this.color = color;
                this.life = life;
                this.opacity = 1;
            }
            update() {
                this.x += this.dx;
                this.y += this.dy;
                this.dy += 0.03; // Gravity effect
                this.life--;
                this.opacity = Math.max(this.life / 50, 0); // Fade out
            }
            draw() {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(this.x - this.dx * 5, this.y - this.dy * 5); // 细条状的线条
                ctx.strokeStyle = `rgba(${this.color}, ${this.opacity})`;
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }

        // Firework class
        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.particles = [];
                this.createParticles();
            }
            createParticles() {
                const colors = ['255,0,0', '0,255,0', '0,0,255', '255,255,0', '255,0,255', '0,255,255'];
                const color = colors[Math.floor(Math.random() * colors.length)];
                for (let i = 0; i < 80; i++) { // 更多粒子
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * 4 + 2; // 更快的速度
                    const dx = Math.cos(angle) * speed;
                    const dy = Math.sin(angle) * speed;
                    this.particles.push(new FireworkParticle(this.x, this.y, dx, dy, color, 60));
                }
            }
            update() {
                this.particles.forEach(p => p.update());
                this.particles = this.particles.filter(p => p.life > 0);
            }
            draw() {
                this.particles.forEach(p => p.draw());
            }
        }

        // Add a firework at the mouse position
        canvas.addEventListener('click', (e) => {
            const x = e.clientX;
            const y = e.clientY;
            fireworks.push(new Firework(x, y));
        });

        // Animation loop
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach((fw, index) => {
                fw.update();
                fw.draw();
                if (fw.particles.length === 0) {
                    fireworks.splice(index, 1);
                }
            });
            requestAnimationFrame(animate);
        }
        animate();
    </script>
</body>
</html>

END

sqzh

好玩，试一下哈

xxkz

还记得十几年前 ，有个用flash做的烟花，用鼠标点击就能看到各种烟花，可惜没保存下来，后来再也没有找到，前一阵 ，突然想到黑客帝国的代码雨很漂亮，专门找了几个 ，还用AI生成了一段。

yibeijiu

xxkz 发表于 2025-6-13 16:26
还记得十几年前 ，有个用flash做的烟花，用鼠标点击就能看到各种烟花，可惜没保存下来，后来再也没有找到， ...

这个是之前想玩玩儿，试的

rjs2080

你的币有点高哦

goodcash

这个教学很有用，如果能显示学生名字就更好了

ericwise

goodcash 发表于 2025-6-13 19:14
这个教学很有用，如果能显示学生名字就更好了

可以用AI去改

wapj2900958

你的币有点高哦

hacker23

学习了，试试效果，感谢

yibeijiu

rjs2080 发表于 2025-6-13 17:23
你的币有点高哦

几个还高？可以不要哦