<!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Firework Simulator V2.0</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
class Particle {
constructor(x, y, color, radius, velocity) {
this.x = x;
this.y = y;
this.color = color;
this.radius = radius;
this.velocity = velocity;
this.alpha = 1;
this.gravity = 0.03;
this.friction = 0.98;
}
update() {
this.velocity.x *= this.friction;
this.velocity.y *= this.friction;
this.velocity.y += this.gravity;
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= 0.01;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
}
let particles = [];
function createFirework(x, y) {
const count = 50;
const angleIncrement = (Math.PI * 2) / count;
const colors = ['#ff0043', '#14fc56', '#1e90ff', '#ffff00', '#ff6600'];
for (let i = 0; i < count; i++) {
const angle = angleIncrement * i;
const speed = Math.random() * 4 + 2;
particles.push(new Particle(
x,
y,
colors[Math.floor(Math.random() * colors.length)],
Math.random() * 2 + 1,
{ x: Math.cos(angle) * speed, y: Math.sin(angle) * speed }
));
}
}
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, width, height);
particles = particles.filter(p => p.alpha > 0);
particles.forEach(p => {
p.update();
p.draw();
});
}
canvas.addEventListener('click', e => {
createFirework(e.clientX, e.clientY);
});
window.addEventListener('resize', () => {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
});
animate();
</script>
</body>
</html>
index.html
index.html