下面是一个简单的HTML和JavaScript代码示例，用于实现新年烟花特效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Fireworks</title>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script>
// 烟花粒子类
class Firework {
constructor(x, y, targetX, targetY) {
this.x = x;
this.y = y;
this.initialX = x;
this.initialY = y;
this.targetX = targetX;
this.targetY = targetY;
this.velocity = random(1, 3);
this.angle = Math.atan2(targetY - this.y, targetX - this.x);
this.acceleration = 0.05;
this.exploded = false;
}
update() {
if (!this.exploded) {
this.x += Math.cos(this.angle) * this.velocity;
this.y += Math.sin(this.angle) * this.velocity;
this.velocity += this.acceleration;
if (dist(this.x, this.y, this.targetX, this.targetY) < 1) {
this.exploded = true;
this.explosion = new Explosion(this.x, this.y);
}
} else {
this.explosion.update();
}
}
show() {
if (!this.exploded) {
stroke(255);
strokeWeight(2);
line(this.x, this.y, this.targetX, this.targetY);
} else {
this.explosion.show();
}
}
}
// 爆炸粒子类
class Explosion {
constructor(x, y) {
this.particles = [];
for (let i = 0; i < random(10, 50); i++) {
this.particles.push(new Particle(x, y));
}
}
update() {
for (let particle of this.particles) {
particle.update();
}
}
show() {
for (let particle of this.particles) {
particle.show();
}
}
}
// 烟花粒子类
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.velocityX = random(-1, 1);
this.velocityY = random(-1, 1);
this.size = random