added moving star and meteorites

src/js/animation/starBackground.js

@@ -0,0 +1,92 @@
+import Star from "./Star.js";
+import Meteor from "./Meteor.js";
+
+// State
+const starInstances = [];
+const meteorInstances = [];
+
+// Enhanced star creation with more stars
+function createStars() {
+  const stars = document.getElementById("stars");
+  const count = 400; // More stars for richer background
+  stars.innerHTML = "";
+  starInstances.length = 0;
+
+  for (let i = 0; i < count; i++) {
+    const star = new Star(stars);
+    starInstances.push(star);
+  }
+}
+
+// Inject required CSS for star animations
+function injectStarCSS() {
+  const style = document.createElement("style");
+  style.textContent = `
+    .star {
+      position: absolute;
+      border-radius: 50%;
+      animation: twinkle ease-in-out infinite;
+    }
+    
+    @keyframes twinkle {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// More frequent meteor spawning with variable rates
+function trySpawnMeteor() {
+  const spawnChance = 0.12; // Increased spawn rate
+  if (Math.random() < spawnChance) {
+    const stars = document.getElementById("stars");
+    const newMeteor = new Meteor(stars);
+    meteorInstances.push(newMeteor);
+  }
+}
+
+// Enhanced animation loop
+function animateStars() {
+  starInstances.forEach((star) => star.update());
+
+  // Update meteors and remove dead ones
+  for (let i = meteorInstances.length - 1; i >= 0; i--) {
+    if (!meteorInstances[i].update()) {
+      meteorInstances.splice(i, 1);
+    }
+  }
+
+  requestAnimationFrame(animateStars);
+}
+
+// Meteor burst effect
+function createMeteorBurst() {
+  for (let i = 0; i < 3; i++) {
+    setTimeout(() => {
+      const stars = document.getElementById("stars");
+      const newMeteor = new Meteor(stars);
+      meteorInstances.push(newMeteor);
+    }, i * 200);
+  }
+}
+
+// Initialize everything
+function init() {
+  injectStarCSS();
+  createStars();
+  animateStars();
+
+  // More frequent meteor spawning
+  setInterval(trySpawnMeteor, 2000);
+
+  // Add occasional meteor bursts
+  setInterval(createMeteorBurst, 15000);
+}
+
+// Start when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}