Tiến? 6
Tiến? 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chúc Mừng Năm Mới 2026</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(circle, #000, #020202); /* Bầu trời đêm */
font-family: Arial, sans-serif;
}
.message {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
font-size: 4em;
font-weight: bold;
color: white;
text-shadow: 0 0 20px #ff9800, 0 0 40px #ff5722, 0 0 60px #f44336;
opacity: 0;
transition: opacity 1s ease-in-out;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="message" id="newYearMessage">Chúc Mừng Năm Mới 2026!</div>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");
const message = document.getElementById("newYearMessage");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
update() {
if (!this.exploded) {
this.y += this.velocity;
this.velocity += gravity; // Trọng lực làm chậm pháo
if (this.y <= this.targetY) {
this.exploded = true;
this.createParticles();
showMessage();
}
} else {
this.particles.forEach(p => p.update());
this.particles = this.particles.filter(p => p.lifespan > 0);
}
}
createParticles() {
const particleCount = 150; // Số tia sáng
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 4 + 2;
const color = this.color;
this.particles.push(
new Particle(
this.x,
this.y,
Math.cos(angle) * speed,
Math.sin(angle) * speed,
color
)
);
}
}
draw() {
if (!this.exploded) {
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
} else {
this.particles.forEach(p => p.draw());
}
}
}
update() {
this.x += this.velocityX;
this.y += this.velocityY;
this.velocityY += gravity; // Áp dụng trọng lực
this.lifespan--;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${
this.lifespan / 100
})`;
ctx.fill();
}
}
function createFirework() {
const x = Math.random() * canvas.width;
const y = canvas.height;
const targetY = Math.random() * canvas.height / 2;
const color = {
r: Math.floor(Math.random() * 255),
g: Math.floor(Math.random() * 255),
b: Math.floor(Math.random() * 255),
};
fireworks.push(new Firework(x, y, targetY, `rgb(${color.r},${color.g},$
{color.b})`));
}
function showMessage() {
message.style.opacity = 1;
setTimeout(() => {
message.style.opacity = 0;
}, 2000); // Hiển thị chữ trong 2 giây
}
function animate() {
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
animate();
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>