Lange Spieker

<script>

 const canvas = document.getElementById("birdCanvas");
 const ctx = canvas.getContext("2d");

 let birdX = -50;
 const birdY = 150;
 const speed = 2;

 let isBirdActive = true;

 function drawLangeSpieker(x, y) {
   ctx.save();
   ctx.translate(x, y);

   // Legs
   ctx.strokeStyle = "#654321";
   ctx.lineWidth = 4;
   ctx.beginPath();
   ctx.moveTo(0, 0);
   ctx.lineTo(-10, 80);
   ctx.moveTo(0, 0);
   ctx.lineTo(10, 80);
   ctx.stroke();

   // Body
   ctx.beginPath();
   ctx.fillStyle = "#ffcc00";
   ctx.ellipse(0, -30, 30, 45, 0, 0, Math.PI * 2);
   ctx.fill();

   // Neck
   ctx.fillRect(-5, -90, 10, 30);

   // Head
   ctx.beginPath();
   ctx.arc(0, -100, 15, 0, Math.PI * 2);
   ctx.fill();

   // Eye
   ctx.beginPath();
   ctx.fillStyle = "#000";
   ctx.arc(5, -105, 2.5, 0, Math.PI * 2);
   ctx.fill();

   // Beak
   ctx.beginPath();
   ctx.fillStyle = "#ff6600";
   ctx.moveTo(13, -105);
   ctx.lineTo(33, -100);
   ctx.lineTo(13, -95);
   ctx.closePath();
   ctx.fill();

   // Wing
   ctx.beginPath();
   ctx.fillStyle = "#ffaa00";
   ctx.ellipse(-15, -35, 12, 25, Math.PI / 6, 0, Math.PI * 2);
   ctx.fill();

   ctx.restore();
 }

 function resetBirdAfterRandomDelay() {
   isBirdActive = false;

   const delay = Math.random() * 4000 + 1000; // 1 to 5 seconds
   setTimeout(() => {
     birdX = -50;
     isBirdActive = true;
   }, delay);
 }

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

   if (isBirdActive) {
     drawLangeSpieker(birdX, birdY);
     birdX += speed;

     if (birdX > canvas.width + 50) {
       resetBirdAfterRandomDelay();
     }
   }

   requestAnimationFrame(animate);
 }

 animate();

</script>