diff --git a/src/js/animation/Meteor.js b/src/js/animation/Meteor.js index 0244eb3..a141e80 100644 --- a/src/js/animation/Meteor.js +++ b/src/js/animation/Meteor.js @@ -7,34 +7,34 @@ class Meteor { this.life = 1.0; this.particles = []; - // Enhanced color palette this.colorType = Math.floor(Math.random() * 4); this.colors = this.getMeteorColors(); - // Get container dimensions for pixel-based positioning this.containerRect = container.getBoundingClientRect(); // Start from random edge with PIXEL-based positioning const edge = Math.floor(Math.random() * 4); - if (edge === 0) { - // Top - this.x = Math.random() * this.containerRect.width; - this.y = -20; - } else if (edge === 1) { - // Right - this.x = this.containerRect.width + 20; - this.y = Math.random() * this.containerRect.height; - } else if (edge === 2) { - // Bottom - this.x = Math.random() * this.containerRect.width; - this.y = this.containerRect.height + 20; - } else { - // Left - this.x = -20; - this.y = Math.random() * this.containerRect.height; + switch (edge) { + case 0: + // Top + this.x = Math.random() * this.containerRect.width; + this.y = -20; + case 1: + // Right + this.x = this.containerRect.width + 20; + this.y = Math.random() * this.containerRect.height; + case 2: + // Bottom + this.x = Math.random() * this.containerRect.width; + this.y = this.containerRect.height + 20; + case 3: + // Left + this.x = -20; + this.y = Math.random() * this.containerRect.height; + default: + console.log("Error creating Meteor direction"); } - // More dynamic movement patterns const centerX = this.containerRect.width / 2 + (Math.random() - 0.5) * 200; const centerY = this.containerRect.height / 2 + (Math.random() - 0.5) * 200; this.angle = @@ -84,7 +84,6 @@ class Meteor { const size = Math.random() * 4 + 10; const colors = this.colors; - // Create enhanced meteor head with multiple layers const head = document.createElement("div"); head.style.width = `${size}px`; head.style.height = `${size}px`; @@ -127,7 +126,6 @@ class Meteor { this.container.appendChild(this.element); - // Add trail particles this.createTrailParticles(); } @@ -159,7 +157,6 @@ class Meteor { } createTrailParticles() { - // Create initial trail particles for (let i = 0; i < 5; i++) { this.addTrailParticle(); } @@ -196,12 +193,10 @@ class Meteor { } update() { - // Smooth pixel-based movement this.x += this.dx; this.y += this.dy; this.life -= 0.005; - // Use pixel positioning for smooth movement this.element.style.left = `${this.x}px`; this.element.style.top = `${this.y}px`; this.element.style.opacity = this.life; @@ -216,7 +211,6 @@ class Meteor { } }); - // Add new trail particles periodically if (Math.random() < 0.3) { this.addTrailParticle(); } @@ -239,7 +233,6 @@ class Meteor { } } - // Enhanced removal condition with fading if ( this.x < -50 || this.x > this.containerRect.width + 50 || @@ -260,7 +253,6 @@ class Meteor { } remove() { - // Add explosion effect when meteor dies if (this.life > 0.3) { this.createExplosion(); } diff --git a/src/js/animation/Star.js b/src/js/animation/Star.js index 013bfc7..53b21f2 100644 --- a/src/js/animation/Star.js +++ b/src/js/animation/Star.js @@ -13,7 +13,6 @@ class Star { this.x = Math.random() * 100; this.y = Math.random() * 100; - // Add color variation this.color = this.getRandomStarColor(); this.init(); } diff --git a/src/js/animation/starBackground.js b/src/js/animation/starBackground.js index ffb2b8b..42b0d0d 100644 --- a/src/js/animation/starBackground.js +++ b/src/js/animation/starBackground.js @@ -1,14 +1,12 @@ 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 + const count = 400; stars.innerHTML = ""; starInstances.length = 0; @@ -18,7 +16,6 @@ function createStars() { } } -// Inject required CSS for star animations function injectStarCSS() { const style = document.createElement("style"); style.textContent = ` @@ -36,9 +33,8 @@ function injectStarCSS() { document.head.appendChild(style); } -// More frequent meteor spawning with variable rates function trySpawnMeteor() { - const spawnChance = 0.12; // Increased spawn rate + const spawnChance = 0.12; if (Math.random() < spawnChance) { const stars = document.getElementById("stars"); const newMeteor = new Meteor(stars); @@ -46,7 +42,6 @@ function trySpawnMeteor() { } } -// Enhanced animation loop function animateStars() { starInstances.forEach((star) => star.update()); @@ -60,7 +55,6 @@ function animateStars() { requestAnimationFrame(animateStars); } -// Meteor burst effect function createMeteorBurst() { for (let i = 0; i < 3; i++) { setTimeout(() => { @@ -71,20 +65,15 @@ function createMeteorBurst() { } } -// 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 {