Meta Description" name="description" />
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Rocket Firework - Fuzail</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas><script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let rocket = { x: canvas.width/2, y: canvas.height, speed: 5 };
let exploded = false;
let particles = [];
function createParticles() {
const text = "FUZAIL";
ctx.font = "bold 80px Arial";
const textWidth = ctx.measureText(text).width;
const startX = canvas.width/2 - textWidth/2;
const startY = canvas.height/2;
for (let i = 0; i < text.length; i++) {
particles.push({
x: startX + i * 70,
y: startY,
char: text[i],
alpha: 1
});
}
}
function drawRocket() {
ctx.fillStyle = "white";
ctx.fillRect(rocket.x, rocket.y, 4, 10);
}
function drawParticles() {
ctx.fillStyle = "yellow";
ctx.font = "bold 60px Arial";
particles.forEach(p => {
ctx.globalAlpha = p.alpha;
ctx.fillText(p.char, p.x, p.y);
});
ctx.globalAlpha = 1;
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!exploded) {
rocket.y -= rocket.speed;
drawRocket();
if (rocket.y < canvas.height/2) {
exploded = true;
createParticles();
}
} else {
drawParticles();
}
requestAnimationFrame(update);
}
update();
</script></body>
</html>1
1
2KB
2KB
133.0ms
184.0ms
133.0ms