JS: Spacetrip

SpaceTrip script

Kopie script

Select & Copy Code #1 Chrome

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpaceTrip</title>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        canvas { display: block; background-color: #000; }
    </style>
</head>
 
<canvas id="fireworksCanvas"></canvas>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Firework class
    class Firework {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.radius = Math.random() * 3 + 2;
            this.speed = Math.random() * 6 + 2;
            this.angle = Math.random() * Math.PI * 2;
            this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            this.life = 100;  // The firework's lifespan
        }

update() {
            this.x += Math.cos(this.angle) * this.speed;
            this.y += Math.sin(this.angle) * this.speed;
            this.life -= 1;
        }

draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    }

let fireworks = [];

// Function to launch a firework at random position
    function launchFirework() {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        fireworks.push(new Firework(x, y));
    }

// Animation loop
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = fireworks.length - 1; i >= 0; i--) {
            fireworks[i].update();
            fireworks[i].draw();

// Remove fireworks that have "exploded" or died
            if (fireworks[i].life <= 0) {
                fireworks.splice(i, 1);
            }
        }

requestAnimationFrame(animate);
    }

// Launch fireworks every 200 milliseconds
    setInterval(launchFirework, 200);

// Start animation
    animate();
</script>
 
</html>

Voorbeeld

SpaceTrip

Kopie script

Voorbeeld

Geef een reactie Reactie annuleren