import * as THREE from 'https://esm.sh/three@0.161.0/es2022/three.development.mjs'; // import { GameLoop } from 'GameLoop.js'; // import { Environment } from 'Environment.js'; // import { Santa } from 'Santa.js'; // import { Obstacles } from 'Obstacles.js'; // import { Effects } from 'Effects.js'; // import { Snow } from 'Snow.js'; // Create UI elements dynamically // Extract what we need from THREE const { // Geometry types BoxGeometry, SphereGeometry, CylinderGeometry, ConeGeometry, IcosahedronGeometry, BufferGeometry, RingGeometry, TorusGeometry, PlaneGeometry, // Material types MeshStandardMaterial, MeshPhongMaterial, MeshBasicMaterial, PointsMaterial, // Rendering components AdditiveBlending, NearestFilter, PCFSoftShadowMap, FogExp2, // Core objects Mesh, Group, Points, Vector3, Color, WebGLRenderer, Scene, PerspectiveCamera, // Lights AmbientLight, DirectionalLight, PointLight, HemisphereLight, // Utilities and helpers Raycaster, MathUtils, TextureLoader, Clock, BufferAttribute, Float32BufferAttribute, // Animation AnimationMixer, // Constants DoubleSide, // Math utilities Quaternion, Euler, Matrix4 } = THREE; class Effects { constructor(scene) { this.scene = scene; // Particle arrays this.particles = []; this.trailTimer = 0; this.trailSpawnInterval = 0.05; // faster trail for better visual // Create particle systems for different effects this.createParticleSystems(); } spawnTrail(position) { const sparkleColors = [0xffd700, 0xffc107, 0xffff66]; for (let i = 0; i < 5; i++) { // More particles for denser trail const color = sparkleColors[Math.floor(Math.random() * sparkleColors.length)]; const sparkleMat = new MeshBasicMaterial({ // Changed to Basic for better performance color, transparent: true, opacity: 0.8 }); const sparkleGeom = new SphereGeometry(0.5, 6, 6); const sparkle = new Mesh(sparkleGeom, sparkleMat); sparkle.position.copy(position); // drift behind Santa sparkle.position.x -= 5; sparkle.userData.velocity = new Vector3( -Math.random() * 5, 2 + Math.random() * 3, (Math.random() - 0.5) * 4 ); sparkle.userData.life = 1.0; sparkle.userData.age = 0; this.scene.add(sparkle); this.particles.push(sparkle); } } spawnShockwave(position) { const ringGeom = new RingGeometry(0.1, 1.0, 32); const ringMat = new MeshStandardMaterial({ color: 0xffffff, flatShading: true, transparent: true, opacity: 1 }); const ring = new Mesh(ringGeom, ringMat); ring.position.copy(position); ring.rotation.x = -Math.PI / 2; ring.userData = { velocityScale: 4, life: 0.6, age: 0 }; this.scene.add(ring); this.particles.push(ring); } spawnExplosion(position) { // shockwave this.spawnShockwave(position); const colors = [0xffa500, 0xff4500, 0xffff00]; for (let i = 0; i < 12; i++) { const color = colors[Math.floor(Math.random() * colors.length)]; const pieceMat = new MeshStandardMaterial({ color, flatShading: true, transparent: true, opacity: 1 }); const pieceGeom = new BoxGeometry(1, 1, 1); const piece = new Mesh(pieceGeom, pieceMat); piece.position.copy(position); const v = new Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ) .normalize() .multiplyScalar(30); piece.userData.velocity = v; piece.userData.life = 2.0; piece.userData.age = 0; this.scene.add(piece); this.particles.push(piece); } } update(delta, santa) { if (!santa || !santa.position) { // Safety check - don't spawn trail if santa is not valid return; } // Sparkle trail this.trailTimer += delta; if (this.trailTimer >= this.trailSpawnInterval) { this.spawnTrail(santa.position); this.trailTimer = 0; } // Clean particles array of any nulls or undefined values before processing this.particles = this.particles.filter(p => p !== null && p !== undefined); // Explosion debris / shockwaves for (let i = 0; i < this.particles.length; i++) { const p = this.particles[i]; if (!p) { this.particles.splice(i, 1); i--; continue; } // Make sure userData exists if (!p.userData) { p.userData = {}; } p.userData.age = (p.userData.age || 0) + delta; // Check if geometry exists before accessing it if (p.geometry && p.geometry instanceof RingGeometry) { // shockwave const data = p.userData; const scale = 1 + data.velocityScale * data.age; p.scale.set(scale, scale, scale); const alpha = 1 - data.age / data.life; if (p.material) { p.material.opacity = alpha; } if (data.age >= data.life) { if (p.parent) { p.parent.remove(p); } else { this.scene.remove(p); } this.particles.splice(i, 1); i--; } } else if (p.userData.velocity) { // debris or sparkle p.position.add(p.userData.velocity.clone().multiplyScalar(delta)); if (p.userData.age >= p.userData.life) { if (p.parent) { p.parent.remove(p); } else { this.scene.remove(p); } this.particles.splice(i, 1); i--; } else { const alpha = 1 - p.userData.age / p.userData.life; if (p.material) { p.material.opacity = alpha; } } } } } createParticleSystems() { // Gift collection particles this.giftParticles = new Group(); this.scene.add(this.giftParticles); // Boost particles this.boostParticles = new Group(); this.scene.add(this.boostParticles); // Engine particles this.engineParticles = new Group(); this.scene.add(this.engineParticles); // Rock hit particles this.hitParticles = new Group(); this.scene.add(this.hitParticles); } // Create engine particles for Santa's sleigh createEngineParticles(position) { const particleCount = 50; const geometry = new BufferGeometry(); const positions = []; const colors = []; const sizes = []; // Position the particles for (let i = 0; i < particleCount; i++) { positions.push(0, 0, 0); // Gradient of colors from white to orange to red const color = new Color(); if (i < particleCount * 0.3) { color.setRGB(1, 1, 0.8); // White-yellow } else if (i < particleCount * 0.7) { color.setRGB(1, 0.6, 0.1); // Orange } else { color.setRGB(1, 0.2, 0.1); // Red } colors.push(color.r, color.g, color.b); sizes.push(Math.random() * 2 + 1); } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); const material = new PointsMaterial({ size: 3, vertexColors: true, blending: AdditiveBlending, transparent: true, opacity: 0.8, sizeAttenuation: true }); const particles = new Points(geometry, material); particles.position.copy(position); particles.userData = { velocities: Array(particleCount).fill().map(() => ({ x: (Math.random() - 0.5) * 0.5 - 2, y: (Math.random() - 0.5) * 0.5, z: (Math.random() - 0.5) * 0.5 })), age: 0, maxAge: 0.5 + Math.random() * 0.3 }; this.engineParticles.add(particles); this.particles.push({ mesh: particles, type: 'engine', update: this.updateEngineParticles.bind(this) }); return particles; } // Update engine particles updateEngineParticles(particle, delta) { if (!particle.mesh || !particle.mesh.geometry || !particle.mesh.userData) { // If mesh is missing or already disposed, mark for removal return true; } const positions = particle.mesh.geometry.attributes.position?.array; const velocities = particle.mesh.userData.velocities; const sizeAttribute = particle.mesh.geometry.attributes.size; const sizes = sizeAttribute?.array; if (!positions || !velocities || !sizes) { // Safety check in case attributes are not properly initialized return true; } for (let i = 0; i < positions.length / 3; i++) { positions[i * 3] += velocities[i].x * delta * 100; positions[i * 3 + 1] += velocities[i].y * delta * 100; positions[i * 3 + 2] += velocities[i].z * delta * 100; // Reduce size over time sizes[i] = Math.max(0.1, sizes[i] - delta * 5); } particle.mesh.geometry.attributes.position.needsUpdate = true; sizeAttribute.needsUpdate = true; // Age the particle particle.mesh.userData.age += delta; // Fade out based on age particle.mesh.material.opacity = Math.max(0, 1 - (particle.mesh.userData.age / particle.mesh.userData.maxAge)); // Return true if the particle should be removed return particle.mesh.userData.age >= particle.mesh.userData.maxAge; } // Create gift collection effect createGiftEffect(position) { const particleCount = 30; const geometry = new BufferGeometry(); const positions = []; const colors = []; const sizes = []; // Random colors for a festive effect const festiveColors = [ new Color(1, 0, 0), // Red new Color(0, 1, 0), // Green new Color(1, 0.8, 0), // Gold new Color(0, 0.6, 1), // Blue new Color(1, 0.4, 0.7) // Pink ]; for (let i = 0; i < particleCount; i++) { // Start particles at a small random offset from the center position positions.push( (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2 ); const colorIndex = Math.floor(Math.random() * festiveColors.length); const color = festiveColors[colorIndex]; colors.push(color.r, color.g, color.b); sizes.push(Math.random() * 3 + 2); // Slightly smaller particles } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); const material = new PointsMaterial({ size: 3, vertexColors: true, blending: AdditiveBlending, transparent: true, opacity: 0.8, sizeAttenuation: true, depthWrite: false, // Prevent z-fighting/white box issues }); const particles = new Points(geometry, material); particles.position.copy(position); particles.userData = { velocities: Array(particleCount).fill().map(() => ({ x: (Math.random() - 0.5) * 20, y: (Math.random() - 0.5) * 20 + 10, // More upward momentum z: (Math.random() - 0.5) * 20 })), age: 0, maxAge: 1.0 }; this.giftParticles.add(particles); this.particles.push({ mesh: particles, type: 'gift', update: this.updateGiftParticles.bind(this) }); return particles; } // Update gift particles updateGiftParticles(particle, delta) { if (!particle.mesh || !particle.mesh.geometry || !particle.mesh.userData) { // If mesh is missing or already disposed, mark for removal return true; } const positions = particle.mesh.geometry.attributes.position?.array; const velocities = particle.mesh.userData.velocities; const sizeAttribute = particle.mesh.geometry.attributes.size; const sizes = sizeAttribute?.array; if (!positions || !velocities || !sizes) { // Safety check in case attributes are not properly initialized return true; } for (let i = 0; i < positions.length / 3; i++) { positions[i * 3] += velocities[i].x * delta; positions[i * 3 + 1] += velocities[i].y * delta; positions[i * 3 + 2] += velocities[i].z * delta; // Apply gravity velocities[i].y -= delta * 20; // Apply drag to slow particles gradually velocities[i].x *= 0.98; velocities[i].z *= 0.98; // Reduce size over time if sizes attribute exists if (sizes && i < sizes.length) { sizes[i] = Math.max(0.1, sizes[i] - delta * 2); } } // Set needsUpdate flags particle.mesh.geometry.attributes.position.needsUpdate = true; if (sizes) { particle.mesh.geometry.attributes.size.needsUpdate = true; } // Age the particle particle.mesh.userData.age += delta; // Fade out based on age if (particle.mesh.material) { particle.mesh.material.opacity = Math.max(0, 1 - (particle.mesh.userData.age / particle.mesh.userData.maxAge)); } // Return true if the particle should be removed return particle.mesh.userData.age >= particle.mesh.userData.maxAge; } // Create boost effect createBoostEffect(position) { const particleCount = 40; const geometry = new BufferGeometry(); const positions = []; const colors = []; const sizes = []; for (let i = 0; i < particleCount; i++) { positions.push(0, 0, 0); // Gradient from white to blue const intensity = Math.random(); const color = new Color( 0.7 + intensity * 0.3, 0.7 + intensity * 0.3, 1.0 ); colors.push(color.r, color.g, color.b); sizes.push(Math.random() * 3 + 2); } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); const material = new PointsMaterial({ size: 3, vertexColors: true, blending: AdditiveBlending, transparent: true, opacity: 0.9, sizeAttenuation: true }); const particles = new Points(geometry, material); particles.position.copy(position); particles.userData = { velocities: Array(particleCount).fill().map(() => ({ x: (Math.random() - 0.5) * 25, y: (Math.random() - 0.5) * 25, z: (Math.random() - 0.5) * 25 })), age: 0, maxAge: 1.2 }; this.boostParticles.add(particles); this.particles.push({ mesh: particles, type: 'boost', update: this.updateBoostParticles.bind(this) }); return particles; } // Update boost particles updateBoostParticles(particle, delta) { if (!particle.mesh || !particle.mesh.geometry || !particle.mesh.userData) { // If mesh is missing or already disposed, mark for removal return true; } const positions = particle.mesh.geometry.attributes.position?.array; const velocities = particle.mesh.userData.velocities; const sizeAttribute = particle.mesh.geometry.attributes.size; const sizes = sizeAttribute?.array; if (!positions || !velocities || !sizes) { // Safety check in case attributes are not properly initialized return true; } for (let i = 0; i < positions.length / 3; i++) { positions[i * 3] += velocities[i].x * delta; positions[i * 3 + 1] += velocities[i].y * delta; positions[i * 3 + 2] += velocities[i].z * delta; // Slow down over time velocities[i].x *= 0.95; velocities[i].y *= 0.95; velocities[i].z *= 0.95; // Pulse size const ageRatio = particle.mesh.userData.age / particle.mesh.userData.maxAge; const pulseFactor = 1 - Math.abs(Math.sin(ageRatio * Math.PI * 4)); sizes[i] = Math.max(0.5, sizes[i] * (0.98 + pulseFactor * 0.04)); } particle.mesh.geometry.attributes.position.needsUpdate = true; sizeAttribute.needsUpdate = true; // Age the particle particle.mesh.userData.age += delta; // Fade out based on age particle.mesh.material.opacity = Math.max(0, 1 - (particle.mesh.userData.age / particle.mesh.userData.maxAge)); // Return true if the particle should be removed return particle.mesh.userData.age >= particle.mesh.userData.maxAge; } // Create rock hit effect createHitEffect(position) { const particleCount = 20; const geometry = new BufferGeometry(); const positions = []; const colors = []; const sizes = []; for (let i = 0; i < particleCount; i++) { positions.push(0, 0, 0); // Gray to red colors for rock debris const color = new Color( 0.6 + Math.random() * 0.4, 0.2 + Math.random() * 0.2, 0.1 + Math.random() * 0.1 ); colors.push(color.r, color.g, color.b); sizes.push(Math.random() * 2 + 1); } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); const material = new PointsMaterial({ size: 2, vertexColors: true, blending: AdditiveBlending, transparent: true, opacity: 0.8, sizeAttenuation: true }); const particles = new Points(geometry, material); particles.position.copy(position); particles.userData = { velocities: Array(particleCount).fill().map(() => ({ x: (Math.random() - 0.5) * 15, y: (Math.random() - 0.3) * 15, // More upward z: (Math.random() - 0.5) * 15 })), age: 0, maxAge: 0.8 }; this.hitParticles.add(particles); this.particles.push({ mesh: particles, type: 'hit', update: this.updateHitParticles.bind(this) }); return particles; } // Update hit particles updateHitParticles(particle, delta) { if (!particle.mesh || !particle.mesh.geometry || !particle.mesh.userData) { // If mesh is missing or already disposed, mark for removal return true; } const positions = particle.mesh.geometry.attributes.position?.array; const velocities = particle.mesh.userData.velocities; if (!positions || !velocities) { // Safety check in case attributes are not properly initialized return true; } for (let i = 0; i < positions.length / 3; i++) { positions[i * 3] += velocities[i].x * delta; positions[i * 3 + 1] += velocities[i].y * delta; positions[i * 3 + 2] += velocities[i].z * delta; // Apply gravity velocities[i].y -= delta * 30; } particle.mesh.geometry.attributes.position.needsUpdate = true; // Age the particle particle.mesh.userData.age += delta; // Fade out based on age particle.mesh.material.opacity = Math.max(0, 1 - (particle.mesh.userData.age / particle.mesh.userData.maxAge)); // Return true if the particle should be removed return particle.mesh.userData.age >= particle.mesh.userData.maxAge; } // Update all particle systems update(delta) { // Clean up particles arrays first // Remove any particles that are undefined, null, or missing properties this.particles = this.particles.filter(particle => particle && (particle.userData || (particle.mesh && particle.mesh.userData)) ); // Update all particle effects for (let i = 0; i < this.particles.length; i++) { const particle = this.particles[i]; if (!particle) { this.particles.splice(i, 1); i--; continue; } // Special case for custom particle systems that have their own update methods if (particle.type && typeof particle.update === 'function') { // If the update function returns true, the particle should be removed if (particle.update(particle, delta)) { // Remove the particle system from the scene if (particle.mesh) { if (particle.mesh.parent) { particle.mesh.parent.remove(particle.mesh); } // Clean up geometry and materials if (particle.mesh.geometry) { particle.mesh.geometry.dispose(); } if (particle.mesh.material) { if (Array.isArray(particle.mesh.material)) { particle.mesh.material.forEach(mat => mat.dispose()); } else { particle.mesh.material.dispose(); } } } // Remove from particles array this.particles.splice(i, 1); i--; continue; } } // Handle standard particle types if (!particle.userData) continue; // Update age particle.userData.age = (particle.userData.age || 0) + delta; // Handle different particle types if (particle.userData.type === 'smoke') { // Update smoke particles if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; continue; } // Move smoke upward and fade out if (particle.userData.velocity) { particle.position.add(particle.userData.velocity.clone().multiplyScalar(delta)); } // Gradually slow down if (particle.userData.velocity) { particle.userData.velocity.multiplyScalar(0.95); } // Fade out const progress = particle.userData.age / particle.userData.life; particle.material.opacity = 0.7 * (1 - progress); // Expand slightly const scale = 1 + progress * 2; particle.scale.set(scale, scale, scale); } else if (particle.userData.type === 'boost_trail') { // Update boost trail particles if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; continue; } // Move based on velocity if (particle.userData.velocity) { particle.position.add(particle.userData.velocity.clone().multiplyScalar(delta)); } // Fade out and grow const progress = particle.userData.age / particle.userData.life; particle.material.opacity = 0.8 * (1 - progress); // Expand particles as they age const scale = 1 + progress * 3; // Grow to 4x original size particle.scale.set(scale, scale, scale); // Apply slight upward force particle.userData.velocity.y += 2 * delta; } else if (particle.userData.type === 'explosion_ring') { // Update explosion ring if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; continue; } // Expand ring const scale = 1 + particle.userData.scaleSpeed * particle.userData.age; particle.scale.set(scale, scale, scale); // Fade out const progress = particle.userData.age / particle.userData.life; particle.material.opacity = 0.8 * (1 - progress); } else if (particle.userData.type === 'explosion_debris') { // Update explosion debris if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; continue; } // Apply gravity and move particle.userData.velocity.y -= 9.8 * delta * 5; // Stronger gravity for effect particle.position.add(particle.userData.velocity.clone().multiplyScalar(delta)); // Apply rotation if (particle.userData.rotationSpeed) { particle.rotation.x += particle.userData.rotationSpeed.x * delta; particle.rotation.y += particle.userData.rotationSpeed.y * delta; particle.rotation.z += particle.userData.rotationSpeed.z * delta; } // Fade out near end of life const progress = particle.userData.age / particle.userData.life; if (progress > 0.7) { particle.material.opacity = 1 - ((progress - 0.7) / 0.3); } } else if (particle.userData.type === 'glowing_particles') { // Update glowing particles if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; continue; } // Fade out const progress = particle.userData.age / particle.userData.life; particle.material.opacity = 0.8 * (1 - progress); // Make particles drift outward slightly const positions = particle.geometry.attributes.position.array; for (let j = 0; j < positions.length; j += 3) { const x = positions[j]; const y = positions[j + 1]; const z = positions[j + 2]; // Move outward from center const dir = new Vector3(x, y, z).sub(particle.position).normalize(); positions[j] += dir.x * delta * 5; positions[j + 1] += dir.y * delta * 5; positions[j + 2] += dir.z * delta * 5; } particle.geometry.attributes.position.needsUpdate = true; } else if (particle.geometry instanceof RingGeometry) { // Handle existing shockwave rings const data = particle.userData; const scale = 1 + data.velocityScale * data.age; particle.scale.set(scale, scale, scale); const alpha = 1 - data.age / data.life; if (particle.material) { particle.material.opacity = alpha; } if (data.age >= data.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; } } else if (particle.userData.velocity) { // Handle existing debris or sparkle particles particle.position.add(particle.userData.velocity.clone().multiplyScalar(delta)); if (particle.userData.age >= particle.userData.life) { this.scene.remove(particle); this.particles.splice(i, 1); i--; } else { const alpha = 1 - particle.userData.age / particle.userData.life; if (particle.material) { particle.material.opacity = alpha; } } } } // Expire old effects while (this.particles.length > 200) { const oldestParticle = this.particles.shift(); if (oldestParticle && oldestParticle.parent) { this.scene.remove(oldestParticle); } } } // Camera shake effect cameraShake(camera, intensity = 1.0, duration = 0.5) { const originalPosition = camera.position.clone(); let elapsed = 0; let shaking = true; // Store the original update function const originalUpdate = camera.userData.update || (() => {}); // Create a new update function that includes the shake camera.userData.update = (delta) => { // Call the original update first originalUpdate(delta); if (shaking) { elapsed += delta; if (elapsed < duration) { const strength = intensity * (1 - elapsed / duration); const offsetX = (Math.random() - 0.5) * strength; const offsetY = (Math.random() - 0.5) * strength; camera.position.x = originalPosition.x + offsetX; camera.position.y = originalPosition.y + offsetY; } else { // Reset position and stop shaking camera.position.copy(originalPosition); shaking = false; // Restore original update function camera.userData.update = originalUpdate; } } }; } // Create a flash effect (for hits, boosts, etc.) screenFlash(camera, color = { r: 1, g: 1, b: 1 }, intensity = 0.8, duration = 0.3) { // This would ideally be implemented with a post-processing effect // For now, we'll assume we have a flash mesh in front of the camera const flashColor = new Color(color.r, color.g, color.b); console.log(`Flash effect: color=${flashColor.getHexString()}, intensity=${intensity}, duration=${duration}`); } // Create a new fire effect for Santa's sleigh createFireEffect(position) { const particleCount = 60; const geometry = new BufferGeometry(); const positions = []; const colors = []; const sizes = []; // Position the particles for (let i = 0; i < particleCount; i++) { positions.push(0, 0, 0); // Fire colors from yellow to orange to red const color = new Color(); if (i < particleCount * 0.2) { color.setRGB(1, 0.9, 0.3); // Yellow } else if (i < particleCount * 0.6) { color.setRGB(1, 0.5, 0.1); // Orange } else { color.setRGB(0.9, 0.2, 0.1); // Red } colors.push(color.r, color.g, color.b); sizes.push(Math.random() * 3 + 2); } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); const material = new PointsMaterial({ size: 3, vertexColors: true, blending: AdditiveBlending, transparent: true, opacity: 0.9, sizeAttenuation: true }); const particles = new Points(geometry, material); particles.position.copy(position); particles.userData = { velocities: Array(particleCount).fill().map(() => ({ x: (Math.random() - 0.5) * 0.8 - 3, // Mainly going backward y: Math.random() * 2, // Going upward z: (Math.random() - 0.5) * 0.8 })), age: 0, maxAge: 0.2 + Math.random() * 0.2, // Short-lived for rapid regeneration lastEmitTime: 0, emitRate: 0.01 // Emit new particles frequently }; this.scene.add(particles); this.particles.push({ mesh: particles, type: 'fire', update: this.updateFireParticles.bind(this) }); return particles; } // Update fire particles to create flickering flame effect updateFireParticles(particle, delta) { if (!particle.mesh || !particle.mesh.geometry || !particle.mesh.userData) { // If mesh is missing or already disposed, mark for removal return true; } const positions = particle.mesh.geometry.attributes.position?.array; const velocities = particle.mesh.userData.velocities; const sizeAttribute = particle.mesh.geometry.attributes.size; const sizes = sizeAttribute?.array; const colorAttribute = particle.mesh.geometry.attributes.color; const colors = colorAttribute?.array; if (!positions || !velocities || !sizes || !colors) { // Safety check in case attributes are not properly initialized return true; } // Continuously emit new particles particle.mesh.userData.lastEmitTime += delta; if (particle.mesh.userData.lastEmitTime > particle.mesh.userData.emitRate) { particle.mesh.userData.lastEmitTime = 0; // Reset some particles to origin for continuous fire effect for (let i = 0; i < positions.length / 3; i++) { // Only reset a percentage of particles each emission if (Math.random() < 0.2) { positions[i * 3] = (Math.random() - 0.5) * 0.5; positions[i * 3 + 1] = (Math.random() - 0.5) * 0.5; positions[i * 3 + 2] = (Math.random() - 0.5) * 0.5; // Randomize velocity slightly for variation velocities[i] = { x: (Math.random() - 0.5) * 0.8 - 3, y: Math.random() * 2, z: (Math.random() - 0.5) * 0.8 }; // Randomize size for flicker effect sizes[i] = Math.random() * 3 + 2; // Update color based on position in flame const colorIndex = i * 3; if (i < positions.length / 3 * 0.2) { colors[colorIndex] = 1.0; // R colors[colorIndex + 1] = 0.9; // G colors[colorIndex + 2] = 0.3; // B } else if (i < positions.length / 3 * 0.6) { colors[colorIndex] = 1.0; // R colors[colorIndex + 1] = 0.5; // G colors[colorIndex + 2] = 0.1; // B } else { colors[colorIndex] = 0.9; // R colors[colorIndex + 1] = 0.2; // G colors[colorIndex + 2] = 0.1; // B } } } } // Update existing particles for (let i = 0; i < positions.length / 3; i++) { positions[i * 3] += velocities[i].x * delta * 20; positions[i * 3 + 1] += velocities[i].y * delta * 20; positions[i * 3 + 2] += velocities[i].z * delta * 20; // Apply slight flicker to sizes for fire effect if (Math.random() < 0.1) { sizes[i] *= 0.9 + Math.random() * 0.2; } // Decrease size as particles move away const distFromOrigin = Math.sqrt( positions[i * 3] * positions[i * 3] + positions[i * 3 + 1] * positions[i * 3 + 1] + positions[i * 3 + 2] * positions[i * 3 + 2] ); // Fade out particles as they move away if (distFromOrigin > 8) { sizes[i] *= 0.95; } } particle.mesh.geometry.attributes.position.needsUpdate = true; sizeAttribute.needsUpdate = true; colorAttribute.needsUpdate = true; return false; // Fire particles are never removed, they're continuously regenerated } // Intensify engine particles for high altitude mode intensifyEngineParticles(engineParticle) { if (!engineParticle) return; // Get the particle system if (engineParticle.children && engineParticle.children.length > 0) { for (const child of engineParticle.children) { if (child instanceof Points && child.geometry && child.geometry.attributes) { // Safely access size attribute const sizes = child.geometry.attributes.size; if (!sizes) continue; const originalSizes = child.userData.originalSizes || new Float32Array(sizes.array); // Store original sizes if not already stored if (!child.userData.originalSizes) { child.userData.originalSizes = originalSizes.slice(); } // Increase particle sizes by 50% for (let i = 0; i < sizes.count; i++) { sizes.array[i] = originalSizes[i] * 1.5; } sizes.needsUpdate = true; // Make particles emit faster if (child.userData.emitRate) { child.userData.originalEmitRate = child.userData.originalEmitRate || child.userData.emitRate; child.userData.emitRate = child.userData.originalEmitRate * 1.8; } // Increase particle count if (child.userData.maxParticles) { child.userData.originalMaxParticles = child.userData.originalMaxParticles || child.userData.maxParticles; child.userData.maxParticles = child.userData.originalMaxParticles * 1.5; } } } } } // Return engine particles to normal normalizeEngineParticles(engineParticle) { if (!engineParticle) return; // Get the particle system if (engineParticle.children && engineParticle.children.length > 0) { for (const child of engineParticle.children) { if (child instanceof Points && child.geometry && child.geometry.attributes) { // Reset to original sizes if stored const sizes = child.geometry.attributes.size; if (sizes && child.userData.originalSizes) { for (let i = 0; i < sizes.count; i++) { sizes.array[i] = child.userData.originalSizes[i]; } sizes.needsUpdate = true; } // Reset emit rate if (child.userData.originalEmitRate) { child.userData.emitRate = child.userData.originalEmitRate; } // Reset particle count if (child.userData.originalMaxParticles) { child.userData.maxParticles = child.userData.originalMaxParticles; } } } } } // Intensify fire particles for high altitude mode intensifyFireParticles(fireParticle) { if (!fireParticle) return; // Similar to engine particles, increase intensity of fire if (fireParticle.children && fireParticle.children.length > 0) { for (const child of fireParticle.children) { if (child instanceof Points && child.geometry && child.geometry.attributes) { // Increase size of particles const sizes = child.geometry.attributes.size; if (!sizes) continue; const originalSizes = child.userData.originalSizes || new Float32Array(sizes.array); // Store original sizes if not already stored if (!child.userData.originalSizes) { child.userData.originalSizes = originalSizes.slice(); } // Increase size by 50% for (let i = 0; i < sizes.count; i++) { sizes.array[i] = originalSizes[i] * 1.5; } sizes.needsUpdate = true; // Change color to be more vibrant with blue tint const colors = child.geometry.attributes.color; if (colors) { const originalColors = child.userData.originalColors || new Float32Array(colors.array); // Store original colors if not already stored if (!child.userData.originalColors) { child.userData.originalColors = originalColors.slice(); } for (let i = 0; i < colors.count; i++) { const colorIndex = i * 3; // Add blue to the flames for a hotter look colors.array[colorIndex] = originalColors[colorIndex]; // R (keep same) colors.array[colorIndex + 1] = Math.max(0, originalColors[colorIndex + 1] - 0.2); // G (reduce slightly) colors.array[colorIndex + 2] = Math.min(1, originalColors[colorIndex + 2] + 0.4); // B (increase) } colors.needsUpdate = true; } // Make particles faster if (child.userData.emitRate) { child.userData.originalEmitRate = child.userData.originalEmitRate || child.userData.emitRate; child.userData.emitRate = child.userData.originalEmitRate * 0.6; // Faster emission } } } } } // Return fire particles to normal normalizeFireParticles(fireParticle) { if (!fireParticle) return; if (fireParticle.children && fireParticle.children.length > 0) { for (const child of fireParticle.children) { if (child instanceof Points && child.geometry && child.geometry.attributes) { // Reset particle sizes if stored const sizes = child.geometry.attributes.size; if (sizes && child.userData.originalSizes) { for (let i = 0; i < sizes.count; i++) { sizes.array[i] = child.userData.originalSizes[i]; } sizes.needsUpdate = true; } // Reset particle colors if stored const colors = child.geometry.attributes.color; if (colors && child.userData.originalColors) { for (let i = 0; i < colors.count; i++) { const colorIndex = i * 3; colors.array[colorIndex] = child.userData.originalColors[colorIndex]; colors.array[colorIndex + 1] = child.userData.originalColors[colorIndex + 1]; colors.array[colorIndex + 2] = child.userData.originalColors[colorIndex + 2]; } colors.needsUpdate = true; } // Reset emission rate if (child.userData.originalEmitRate) { child.userData.emitRate = child.userData.originalEmitRate; } } } } } // Create smoke effect for crashing sleigh createSmokeEffect(position) { const smokeCount = 10; const smokeGeometry = new BufferGeometry(); const smokePositions = []; const smokeSizes = []; const smokeColors = []; // Create smoke particles with varying colors (gray to black) for (let i = 0; i < smokeCount; i++) { // Position near the given point with small randomization smokePositions.push( position.x + (Math.random() - 0.5) * 5, position.y + (Math.random() - 0.5) * 5, position.z + (Math.random() - 0.5) * 5 ); // Sizes from small to large smokeSizes.push(Math.random() * 4 + 3); // Grayscale colors from dark gray to light gray const shade = Math.random() * 0.7 + 0.2; // 0.2 to 0.9 smokeColors.push(shade, shade, shade); } smokeGeometry.setAttribute('position', new Float32BufferAttribute(smokePositions, 3)); smokeGeometry.setAttribute('size', new Float32BufferAttribute(smokeSizes, 1)); smokeGeometry.setAttribute('color', new Float32BufferAttribute(smokeColors, 3)); const smokeMaterial = new PointsMaterial({ size: 5, transparent: true, opacity: 0.7, vertexColors: true, blending: AdditiveBlending, sizeAttenuation: true }); const smokeParticles = new Points(smokeGeometry, smokeMaterial); this.scene.add(smokeParticles); // Add physics properties smokeParticles.userData = { type: 'smoke', age: 0, life: 1.5, velocity: new Vector3( Math.random() * 5 - 2.5, Math.random() * 10 + 5, Math.random() * 5 - 2.5 ) }; this.particles.push(smokeParticles); return smokeParticles; } // Create explosion effect when sleigh hits ground createExplosionEffect(position) { // Create a shockwave ring const ringGeometry = new RingGeometry(0.1, 1, 32); const ringMaterial = new MeshStandardMaterial({ color: 0xff5500, emissive: 0xff3300, emissiveIntensity: 1.0, transparent: true, opacity: 0.8 }); const ring = new Mesh(ringGeometry, ringMaterial); ring.position.copy(position); ring.lookAt(new Vector3(0, 1, 0)); // Orient ring to be parallel to ground ring.userData = { type: 'explosion_ring', age: 0, life: 1.0, scaleSpeed: 70 }; this.scene.add(ring); this.particles.push(ring); // Add many debris particles const debrisCount = 50; for (let i = 0; i < debrisCount; i++) { const debrisGeometry = new BoxGeometry( Math.random() * 3 + 1, Math.random() * 3 + 1, Math.random() * 3 + 1 ); // Random colors for debris (reds, oranges, yellows) const r = Math.random() * 0.5 + 0.5; // 0.5 to 1.0 const g = Math.random() * 0.5; // 0 to 0.5 const b = Math.random() * 0.2; // 0 to 0.2 const debrisMaterial = new MeshStandardMaterial({ color: new Color(r, g, b), emissive: new Color(r * 0.8, g * 0.8, b * 0.8), emissiveIntensity: 0.8, roughness: 0.7, metalness: 0.3 }); const debris = new Mesh(debrisGeometry, debrisMaterial); debris.position.copy(position); // Random velocity in all directions, but mainly upward const speed = Math.random() * 30 + 20; const angle = Math.random() * Math.PI * 2; const height = Math.random() * 0.8 + 0.2; // Mostly upward const velocity = new Vector3( Math.sin(angle) * speed * Math.sqrt(1 - height * height), height * speed, Math.cos(angle) * speed * Math.sqrt(1 - height * height) ); debris.userData = { type: 'explosion_debris', age: 0, life: 1.5 + Math.random(), velocity: velocity, rotationSpeed: { x: Math.random() * 5 - 2.5, y: Math.random() * 5 - 2.5, z: Math.random() * 5 - 2.5 } }; this.scene.add(debris); this.particles.push(debris); } // Add additional glowing particles this.createGlowingParticles(position, 100, 1.0, 2.0, [0xff3300, 0xff7700, 0xffaa00]); // Camera effects this.cameraShake(this.scene.userData.camera, 3.0, 1.5); this.screenFlash(this.scene.userData.camera, { r: 1, g: 0.5, b: 0.2 }, 0.8, 0.7); return true; } // Helper method to create glowing particles for explosions createGlowingParticles(position, count, minLife, maxLife, colors) { const geometry = new BufferGeometry(); const positions = []; const sizes = []; const colorAttrs = []; for (let i = 0; i < count; i++) { // Random position in sphere const radius = Math.random() * 20 + 5; const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI; positions.push( position.x + radius * Math.sin(phi) * Math.cos(theta), position.y + radius * Math.sin(phi) * Math.sin(theta), position.z + radius * Math.cos(phi) ); // Random size sizes.push(Math.random() * 3 + 1); // Random color from provided colors const color = new Color(colors[Math.floor(Math.random() * colors.length)]); colorAttrs.push(color.r, color.g, color.b); } geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); geometry.setAttribute('color', new Float32BufferAttribute(colorAttrs, 3)); const material = new PointsMaterial({ size: 5, transparent: true, opacity: 0.8, vertexColors: true, blending: AdditiveBlending, sizeAttenuation: true }); const particles = new Points(geometry, material); // Add physics for particles particles.userData = { type: 'glowing_particles', age: 0, life: minLife + Math.random() * (maxLife - minLife) }; this.scene.add(particles); this.particles.push(particles); return particles; } // Create boost trail effect for high altitude mode createBoostTrailEffect(position) { const trailGeometry = new BufferGeometry(); const particleCount = 20; const positions = []; const colors = []; const sizes = []; // Create particles at the given position with small randomization for (let i = 0; i < particleCount; i++) { positions.push( position.x + (Math.random() - 0.5) * 3, position.y + (Math.random() - 0.5) * 3, position.z + (Math.random() - 0.5) * 3 ); // Size variation sizes.push(Math.random() * 3 + 2); // Color variation - bright oranges and yellows const r = Math.random() * 0.2 + 0.8; // 0.8-1.0 const g = Math.random() * 0.4 + 0.4; // 0.4-0.8 const b = Math.random() * 0.2; // 0-0.2 colors.push(r, g, b); } trailGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); trailGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); trailGeometry.setAttribute('color', new Float32BufferAttribute(colors, 3)); const trailMaterial = new PointsMaterial({ size: 4, transparent: true, opacity: 0.8, vertexColors: true, blending: AdditiveBlending, sizeAttenuation: true }); const trail = new Points(trailGeometry, trailMaterial); this.scene.add(trail); // Add physics properties trail.userData = { type: 'boost_trail', age: 0, life: 0.6 + Math.random() * 0.4, // 0.6-1.0 second lifetime velocity: new Vector3( -Math.random() * 10 - 10, // Strong backward velocity (Math.random() - 0.5) * 5, (Math.random() - 0.5) * 5 ) }; this.particles.push(trail); return trail; } } class Environment { constructor(scene) { this.radius = 1000; this.rotationSpeed = 0.3; // Base rotation speed for anticlockwise movement this.travelSpeed = 50; // Base distance increment // Difficulty scaling parameters this.baseRotationSpeed = 0.3; this.baseTreeScale = 1.0; this.difficultyInterval = 1000; // Every 1000m traveled, increase difficulty this.maxRotationSpeedMultiplier = 2.5; // Maximum rotation speed multiplier // Store scene reference this.scene = scene; // Create texture loader const textureLoader = new TextureLoader(); // Create an earth group to hold all elements this.earthGroup = new Group(); scene.add(this.earthGroup); // Create the main Earth sphere with enhanced detail const segments = 256; const earthGeom = new SphereGeometry(this.radius, segments, segments); // Use perlin-style noise to create surface details on the sphere const vertices = earthGeom.attributes.position; const normals = earthGeom.attributes.normal; // We'll create more pronounced bumps on the surface for better visual interest const bumpHeight = 30; // Increased bump height for more visible terrain // Create a new attribute for deformed positions const positions = new Float32Array(vertices.count * 3); for (let i = 0; i < vertices.count; i++) { const x = vertices.getX(i); const y = vertices.getY(i); const z = vertices.getZ(i); // Only add noise to the top portion of the sphere (the visible snowy area) const vertexHeight = y / this.radius; // Normalized height if (vertexHeight > 0.5) { // Extended snow coverage for better visibility // Create a multi-layered fractal noise pattern based on position const noiseX1 = Math.sin(x * 0.01) * Math.sin(z * 0.01); const noiseY1 = Math.sin(x * 0.02) * Math.sin(z * 0.02); const noiseZ1 = Math.sin(x * 0.015) * Math.sin(z * 0.015); // Second layer of noise at a different frequency const noiseX2 = Math.sin(x * 0.03) * Math.sin(z * 0.025) * 0.5; const noiseY2 = Math.sin(x * 0.04) * Math.sin(z * 0.035) * 0.5; const noiseZ2 = Math.sin(x * 0.035) * Math.sin(z * 0.03) * 0.5; // Combine noise layers const noiseX = noiseX1 + noiseX2; const noiseY = noiseY1 + noiseY2; const noiseZ = noiseZ1 + noiseZ2; // Intensity increases toward the top const intensity = MathUtils.smoothstep(vertexHeight, 0.5, 0.95); // Get the normal at this vertex const nx = normals.getX(i); const ny = normals.getY(i); const nz = normals.getZ(i); // Apply the noise along the normal direction for natural snow drifts positions[i * 3] = x + nx * noiseX * bumpHeight * intensity; positions[i * 3 + 1] = y + ny * noiseY * bumpHeight * intensity; positions[i * 3 + 2] = z + nz * noiseZ * bumpHeight * intensity; } else { // Keep lower parts of the sphere smooth positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; } } // Update geometry with our modified positions earthGeom.setAttribute('position', new BufferAttribute(positions, 3)); earthGeom.computeVertexNormals(); // Recalculate normals for proper lighting // Create a subtle layered material for the snow effect const snowMaterial = new MeshPhongMaterial({ color: 0xffffff, shininess: 70, specular: 0x6b88c9, emissive: 0x3a4a6d, emissiveIntensity: 0.2, flatShading: false }); this.earthMesh = new Mesh(earthGeom, snowMaterial); this.earthGroup.add(this.earthMesh); // Add a subtle glow at the top edge for a more defined snow cap const rimGeometry = new SphereGeometry( this.radius + 0.5, // Just slightly larger 64, 64, 0, Math.PI * 2, 0, Math.PI * 0.3 // Only top portion ); const rimMaterial = new MeshStandardMaterial({ color: 0xffffff, metalness: 0.1, roughness: 0.6, transparent: true, opacity: 0.4 }); const rimMesh = new Mesh(rimGeometry, rimMaterial); this.earthGroup.add(rimMesh); // Add distant mountain ranges for better depth perception this.addMountainRanges(); // Add snow drifts and ice formations for more realistic terrain this.addSnowDrifts(); // Add Christmas trees only on the top surface of the Earth this.addChristmasTrees(); // Create atmospheric fog layer just above the surface (not the square particles) this.addAtmosphericFog(); // Position the Earth lower to maintain the horizon appearance this.earthGroup.position.set(0, -800, 0); // Create a ground fog effect for atmospheric depth this.createGroundFog(); // track distance this.distanceTraveled = 0; } // Create dense fog layer near the ground for better depth perception createGroundFog() { // Create a particles system for ground fog with soft appearance const fogCount = 1000; // Reduced count const fogGeometry = new BufferGeometry(); const positions = []; const sizes = []; // Create fog particles in a flat layer above the visible snow surface const fogBounds = { x: 2000, z: 1000, minY: -780, // Just above where the earth is positioned maxY: -750, }; for (let i = 0; i < fogCount; i++) { // Random positions in a flat layer positions.push( (Math.random() - 0.5) * fogBounds.x, fogBounds.minY + Math.random() * (fogBounds.maxY - fogBounds.minY), (Math.random() - 0.5) * fogBounds.z - 200 // More visible in front ); // Varied smaller sizes for softer fog appearance sizes.push(Math.random() * 15 + 8); } fogGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); fogGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); // Use a softer, more transparent material for fog const fogMaterial = new PointsMaterial({ color: 0xccddff, // Slightly blue tint size: 15, transparent: true, opacity: 0.1, // More transparent sizeAttenuation: true, blending: AdditiveBlending }); this.groundFog = new Points(fogGeometry, fogMaterial); this.scene.add(this.groundFog); } // Add mountain ranges for more visual depth addMountainRanges() { // Create several geometric mountain peaks const mountainCount = 10; // Mountain material with subtle blue tint for distant appearance const mountainMaterial = new MeshPhongMaterial({ color: 0xeeeeff, shininess: 50, specular: 0x6b88c9, flatShading: true }); // Create mountain group const mountainGroup = new Group(); for (let i = 0; i < mountainCount; i++) { // Determine position on a circular path const angle = (i / mountainCount) * Math.PI * 2; const distance = this.radius * 0.9; // Mountains positioned on surface // Calculate position on sphere surface const x = Math.sin(angle) * distance; const z = Math.cos(angle) * distance; const y = 0; // Will be positioned relative to surface // Random height for variety const height = 40 + Math.random() * 60; const width = 80 + Math.random() * 40; // Create geometric cone for mountain const mountainGeom = new ConeGeometry( width, height, 5 + Math.floor(Math.random() * 3) // Random segment count for variety ); const mountain = new Mesh(mountainGeom, mountainMaterial); // Position mountain and align to sphere surface const surfacePos = new Vector3(x, y, z); this.alignToSurface(mountain, surfacePos); // Add to mountain group mountainGroup.add(mountain); } // Add entire mountain range to earth group this.earthGroup.add(mountainGroup); } // Add snow drifts for more realistic terrain addSnowDrifts() { // Create organic-looking snow formations const driftCount = 15; // Snow drift material const driftMaterial = new MeshPhongMaterial({ color: 0xffffff, shininess: 40, specular: 0xaabbff, flatShading: true }); // Create drift group const driftGroup = new Group(); for (let i = 0; i < driftCount; i++) { // Determine position on sphere surface const angle = (i / driftCount) * Math.PI * 2; const distance = this.radius * 0.95; // Distribute only on top portion of sphere (where snow would be) const phi = Math.random() * Math.PI * 0.2; // 0 to 36 degrees from top const theta = Math.random() * Math.PI * 2; // All around // Convert to Cartesian coordinates const x = distance * Math.sin(phi) * Math.cos(theta); const y = distance * Math.cos(phi); // Top is positive y const z = distance * Math.sin(phi) * Math.sin(theta); // Create organic shape for snow drift using deformed sphere const driftGeom = new SphereGeometry( 20 + Math.random() * 30, // Random size 8, 6 ); // Deform geometry for natural snow drift appearance const driftVertices = driftGeom.attributes.position; for (let j = 0; j < driftVertices.count; j++) { const vx = driftVertices.getX(j); const vy = driftVertices.getY(j); const vz = driftVertices.getZ(j); // Apply noise deformation const noise = Math.sin(vx * 0.2) * Math.sin(vz * 0.2) * 5; driftVertices.setX(j, vx + noise * (Math.random() - 0.5)); driftVertices.setY(j, vy + noise * (Math.random() - 0.5)); driftVertices.setZ(j, vz + noise * (Math.random() - 0.5)); } driftGeom.computeVertexNormals(); const drift = new Mesh(driftGeom, driftMaterial); // Position drift and align to sphere surface const surfacePos = new Vector3(x, y, z); this.alignToSurface(drift, surfacePos); // Random scale for variety const scale = 0.5 + Math.random() * 0.5; drift.scale.set(scale, scale * 0.6, scale); // Add to drift group driftGroup.add(drift); } // Add entire drift group to earth group this.earthGroup.add(driftGroup); } // Add atmospheric fog for better depth perception addAtmosphericFog() { // Create a thin layer of fog using a soft particle material const fogCount = 500; // Reduced count const fogGeometry = new BufferGeometry(); const positions = []; const sizes = []; // Create fog particles only on the visible top portion of the sphere for (let i = 0; i < fogCount; i++) { // Use spherical coordinates to distribute over the top of the sphere const phi = Math.random() * Math.PI * 0.25; // 0 to 45 degrees from top const theta = Math.random() * Math.PI * 2; // All around // Add small height offset from surface const radius = this.radius + 5 + Math.random() * 20; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.cos(phi); // Top is positive y const z = radius * Math.sin(phi) * Math.sin(theta); positions.push(x, y, z); // Smaller sizes to avoid square appearance sizes.push(Math.random() * 8 + 3); } fogGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); fogGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); // Use a very soft, transparent material to avoid square appearance const fogMaterial = new PointsMaterial({ color: 0xaabbff, size: 8, transparent: true, opacity: 0.15, // More transparent sizeAttenuation: true, blending: AdditiveBlending }); const fogParticles = new Points(fogGeometry, fogMaterial); this.earthGroup.add(fogParticles); } // Helper to align object to the sphere surface alignToSurface(object, position) { // Default orientation - Y is up const UP = new Vector3(0, 1, 0); // Get normal at this position (for a sphere, it's just normalized position) const normal = position.clone().normalize(); // Create rotation to align object's up direction with surface normal object.position.copy(position); object.lookAt(normal.clone().add(position)); // Apply additional rotation to make the object point outward from the sphere object.rotateX(-Math.PI/2); } // Helper function to create correct surface normals calculateSurfaceNormal(position) { // For a sphere, the normal is simply the normalized position vector from center return position.clone().normalize(); } // Create and place Christmas trees only on the top surface of the Earth addChristmasTrees() { // Define materials for pine trees const trunkMaterial = new MeshStandardMaterial({ color: 0x5d2906, roughness: 0.9, metalness: 0.0 }); const leafMaterial = new MeshStandardMaterial({ color: 0x0a5022, // Dark green roughness: 0.8, metalness: 0.0 }); // Material for trees further back - slightly blue tinted for atmospheric perspective const distantLeafMaterial = new MeshStandardMaterial({ color: 0x0a4530, roughness: 0.8, metalness: 0.0 }); // Create a few different tree sizes for variety const treeScales = [ { scale: 3, count: 40 }, // Small trees (more common) { scale: 5, count: 30 }, // Medium trees { scale: 7, count: 20 } // Large trees ]; // Create decorations for some trees (small colored spheres) const decorationColors = [0xff0000, 0xffff00, 0x0000ff, 0xff00ff, 0x00ffff]; const decorationMaterial = new MeshPhongMaterial({ emissive: 0xffffff, emissiveIntensity: 0.5, roughness: 0.3, metalness: 0.8 }); const decorationGeometry = new SphereGeometry(0.5, 6, 6); // Place trees on top surface only treeScales.forEach(({ scale, count }) => { for (let i = 0; i < count; i++) { // Create a whole tree as a group const treeGroup = new Group(); // Create trunk (cylinder) const trunkHeight = scale * 1.0; const trunkRadius = scale * 0.15; const trunkGeometry = new CylinderGeometry( trunkRadius * 0.7, // Top radius (slightly narrower) trunkRadius, // Bottom radius trunkHeight, 8 // Segments ); const trunk = new Mesh(trunkGeometry, trunkMaterial); trunk.position.y = trunkHeight / 2; treeGroup.add(trunk); // Create pine tree layers (cones) const leafLayers = 4; const leafHeight = scale * 1.8 / leafLayers; const baseLeafRadius = scale * 0.8; // Use distant or regular leaf material based on tree position const useDistantMaterial = Math.random() > 0.6; // 40% trees with distant material const actualLeafMaterial = useDistantMaterial ? distantLeafMaterial : leafMaterial; for (let j = 0; j < leafLayers; j++) { const layerRadius = baseLeafRadius * (1 - j * 0.2); // Each layer gets smaller const coneGeometry = new ConeGeometry( layerRadius, leafHeight, 8 // Segments ); const layer = new Mesh(coneGeometry, actualLeafMaterial); // Position each layer, lowest at the bottom, highest at the top layer.position.y = trunkHeight + j * leafHeight * 0.8; treeGroup.add(layer); } // Add decorations to more trees (60% chance) if (Math.random() < 0.6) { const decorationCount = Math.floor(Math.random() * 6) + 3; // 3-8 decorations for (let d = 0; d < decorationCount; d++) { // Pick a random color for this decoration const color = decorationColors[Math.floor(Math.random() * decorationColors.length)]; const decMat = decorationMaterial.clone(); decMat.color.setHex(color); decMat.emissive.setHex(color); const decoration = new Mesh(decorationGeometry, decMat); // Position around the tree in a spiral pattern const decorAngle = (d / decorationCount) * Math.PI * 2; const decorLayer = Math.random() * leafLayers; const decorDist = baseLeafRadius * 0.7 * (1 - decorLayer * 0.15); decoration.position.set( Math.sin(decorAngle) * decorDist, trunkHeight + decorLayer * leafHeight * 0.7, Math.cos(decorAngle) * decorDist ); treeGroup.add(decoration); } } // Position trees only on the top surface of the Earth // Use a much larger range for phi to place trees over more of the visible area const phi = Math.random() * 0.3; // 0 to 0.3 radians (about 0-17 degrees from top) const theta = Math.random() * Math.PI * 2; // Any direction around // Convert to Cartesian coordinates const treeRadius = this.radius + 2; // Position slightly above surface for better visibility const x = treeRadius * Math.sin(phi) * Math.cos(theta); const y = treeRadius * Math.cos(phi); // Y is up const z = treeRadius * Math.sin(phi) * Math.sin(theta); const treePosition = new Vector3(x, y, z); // Position the tree treeGroup.position.copy(treePosition); // Calculate the surface normal at this position (for a sphere it's just normalized position) const normal = treePosition.clone().normalize(); // Create a rotation to align the tree's UP direction (Y+) with the surface normal // This ensures the tree stands upright on the surface const upVector = new Vector3(0, 1, 0); treeGroup.up.copy(upVector); // Use lookAt to orient the tree - we look from the tree position toward the normal direction // This makes the tree stand perpendicular to the surface const target = treePosition.clone().add(normal); treeGroup.lookAt(target); // Random slight rotation around the normal axis for variety treeGroup.rotateOnAxis(normal, Math.random() * Math.PI * 2); // Add the tree to the Earth group this.earthGroup.add(treeGroup); } }); } update(delta) { // Calculate current difficulty multiplier based on distance traveled const difficultyLevel = Math.floor(this.distanceTraveled / this.difficultyInterval); const rotationMultiplier = Math.min( this.maxRotationSpeedMultiplier, 1.0 + difficultyLevel * 0.1 // Increase by 10% for every 1000m traveled ); // Apply rotation speed with difficulty multiplier this.earthGroup.rotation.y += delta * this.baseRotationSpeed * rotationMultiplier; // For a subtly changing landscape, gently undulate snow particles if (this.groundFog) { const positions = this.groundFog.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { // Add subtle undulation to the ground fog positions[i + 1] += Math.sin(this.distanceTraveled * 0.01 + i * 0.01) * 0.1; // Keep within bounds if (positions[i + 1] < -780) positions[i + 1] = -780; if (positions[i + 1] > -750) positions[i + 1] = -750; } this.groundFog.geometry.attributes.position.needsUpdate = true; } // Increment the distance traveled this.travelSpeed = 50 * (1 + difficultyLevel * 0.05); // Increase travel speed gradually this.distanceTraveled += this.travelSpeed * delta; } // Get current difficulty multiplier - used by obstacles system getDifficultyMultiplier() { const difficultyLevel = Math.floor(this.distanceTraveled / this.difficultyInterval); return 1.0 + difficultyLevel * 0.1; } } class GameLoop { constructor(renderer, scene, camera, environment, santa, obstacles, effects, snow) { this.renderer = renderer; this.scene = scene; this.camera = camera; this.environment = environment; this.santa = santa; this.obstacles = obstacles; this.effects = effects; this.snow = snow; this.clock = new Clock(); this.gameOver = false; this.isPaused = false; // UI elements this.scoreElement = document.getElementById('score'); this.distanceElement = document.getElementById('distance'); this.energyElement = document.getElementById('energy'); this.restartBtn = document.getElementById('restart'); this.gameOverElement = document.getElementById('game-over'); // Hide game over initially if (this.gameOverElement) { this.gameOverElement.style.display = 'none'; } } start() { this.clock.start(); requestAnimationFrame(() => this.animate()); } pause() { this.isPaused = true; } resume() { if (this.isPaused) { this.isPaused = false; this.clock.start(); requestAnimationFrame(() => this.animate()); } } animate() { if (this.isPaused) return; try { const delta = this.clock.getDelta(); // Update game components with safety checks if (this.environment) this.environment.update(delta); if (this.santa) this.santa.update(delta); if (this.obstacles) this.obstacles.update(delta); if (this.effects && this.santa) this.effects.update(delta, this.santa); // Update snow system if (this.snow) { this.snow.update(delta); } // Check camera for camera shake updates if (this.camera && this.camera.userData && this.camera.userData.update) { this.camera.userData.update(delta); } // Get current game state let gameState = { score: 0, distance: 0, energy: 100, isGameOver: false }; if (this.santa && typeof this.santa.getGameState === 'function') { gameState = this.santa.getGameState(); } // Check for game over if (gameState.isGameOver && !this.gameOver) { this.gameOver = true; this.handleGameOver(); } // Update UI this.updateUI(gameState); // Render with safety checks if (this.renderer && this.scene && this.camera) { // Force clear to make sure we're not seeing stale frames this.renderer.clear(true, true, true); // Make sure all scene objects have correct visibility this.scene.traverse(object => { if (object.isMesh || object.isGroup) { object.visible = true; } }); // Make sure camera is looking at the right area if (this.santa && this.santa.position) { // Point camera toward santa with slight offset const targetPos = this.santa.position.clone(); targetPos.x += 30; // Look ahead this.camera.lookAt(targetPos); } // Render scene this.renderer.render(this.scene, this.camera); // Log render for debugging if (!this.hasLoggedRender && this.santa) { console.log("Render debug info:", { cameraPos: this.camera.position, santaPos: this.santa.position, obstaclesCount: this.obstacles ? this.obstacles.objects.length : 0, sceneChildren: this.scene.children.length }); this.hasLoggedRender = true; } } else { console.error("Missing renderer, scene or camera:", { renderer: !!this.renderer, scene: !!this.scene, camera: !!this.camera }); } // Continue animation loop if not game over if (!this.gameOver) { requestAnimationFrame(() => this.animate()); } } catch (error) { console.error("Error in animation loop:", error); // Try to continue the loop despite the error if (!this.gameOver) { setTimeout(() => { requestAnimationFrame(() => this.animate()); }, 1000); // Wait a second before trying again } } } updateUI(gameState) { // Update score display if (this.scoreElement) { this.scoreElement.textContent = `Score: ${gameState.score}`; } // Update distance display if (this.distanceElement) { this.distanceElement.textContent = `Distance: ${gameState.distance}`; } // Update energy bar if (this.energyElement) { const energyPercent = gameState.energy; this.energyElement.style.width = `${energyPercent}%`; // Change color based on energy level if (energyPercent < 30) { this.energyElement.style.backgroundColor = '#ff4444'; } else if (energyPercent < 60) { this.energyElement.style.backgroundColor = '#ffaa44'; } else { this.energyElement.style.backgroundColor = '#44ff88'; } } } handleGameOver() { console.log('Game Over!'); // Show game over UI if (this.gameOverElement) { this.gameOverElement.style.display = 'block'; } // Show restart button if (this.restartBtn) { this.restartBtn.style.display = 'block'; } // Apply dramatic camera effect if (this.effects) { this.effects.cameraShake(this.camera, 2.0, 1.0); this.effects.screenFlash(this.camera, { r: 1, g: 0.3, b: 0.3 }, 0.7, 0.5); } } reset() { // Reset game state this.gameOver = false; this.isPaused = false; // Reset game components this.santa.reset(); this.obstacles.clearAll(); // Hide game over UI if (this.gameOverElement) { this.gameOverElement.style.display = 'none'; } // Hide restart button if (this.restartBtn) { this.restartBtn.style.display = 'none'; } // Restart clock and animation this.clock.start(); requestAnimationFrame(() => this.animate()); } } class Obstacles { constructor(scene, environment) { this.scene = scene; this.environment = environment; this.objects = []; this.spawnTimer = 0; this.nextSpawnInterval = 1.5; // Track batch spawning for gifts this.batchSpawnTimer = 0; this.nextBatchInterval = 5.0; // Time between gift batches (seconds) this.isBatchActive = false; this.currentBatchCount = 0; this.maxBatchCount = 0; // Track vertical spawn range for gameplay area this.minSpawnY = 400; // Slightly lower than top of Earth this.maxSpawnY = 600; // Middle of screen // Horizontal spawn location (far enough to not be visible) this.spawnX = 300; // Closer to center so objects are more visible // Define types probabilities this.typeWeights = { rock: 40, // Reduced to have more collectible items gift: 30, // Increased for more collectibles boost: 30 // Increased for better gameplay }; // Track hit counter for game over this.playerHits = 0; this.maxHits = 3; } spawnObject(type = null) { // If type is not specified, pick one based on weights if (!type) { // Adjust weights based on difficulty level const difficultyMultiplier = this.environment.getDifficultyMultiplier(); const weights = { ...this.typeWeights }; // Increase gift chance with difficulty weights.gift = Math.min(25, Math.floor(5 * difficultyMultiplier)); // Increase boost chance with difficulty weights.boost = Math.min(25, Math.floor(10 * difficultyMultiplier)); // Adjust rock chance to maintain relative proportions weights.rock = 100 - weights.gift - weights.boost; if (this.isBatchActive) { weights.gift = 100; // Force gift spawning during a batch weights.rock = 0; weights.boost = 0; } const totalWeight = Object.values(weights).reduce((sum, w) => sum + w, 0); const rand = Math.random() * totalWeight; let cumulativeWeight = 0; for (const [objType, weight] of Object.entries(weights)) { cumulativeWeight += weight; if (rand <= cumulativeWeight) { type = objType; break; } } } // Get current difficulty for velocity scaling const difficultyMultiplier = this.environment.getDifficultyMultiplier(); // Create the object based on type let obj; const matParams = { flatShading: true }; if (type === 'rock') { // Rock obstacles (previously was "obstacle") const subType = Math.floor(Math.random() * 3); // 0=rock1, 1=rock2, 2=spike if (subType === 0) { // Spherical rock with improved detail const rockGroup = new Group(); const rockMat = new MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1, ...matParams }); // Use higher detail for better appearance const rockGeo = new IcosahedronGeometry(5, 1); const rock = new Mesh(rockGeo, rockMat); rockGroup.add(rock); // Add small details for visual interest const bump1 = new Mesh( new IcosahedronGeometry(1.5, 0), rockMat ); bump1.position.set(2, 3, 1); const bump2 = new Mesh( new IcosahedronGeometry(2, 0), rockMat ); bump2.position.set(-2, -2, 2); rockGroup.add(bump1, bump2); // Add consistent rotation speed for this obstacle rockGroup.userData = { radius: 5.5, // Slightly increased radius for collision type: 'rock', rotationSpeed: { x: MathUtils.randFloatSpread(1), y: MathUtils.randFloatSpread(1), z: MathUtils.randFloatSpread(1) }, // Base velocity adjusted by difficulty velocity: new Vector3(-100 * difficultyMultiplier, 0, 0) }; obj = rockGroup; } else if (subType === 1) { // Jagged rock with better shape const rockGroup = new Group(); const rockMat = new MeshStandardMaterial({ color: 0x7a7a7a, roughness: 0.9, metalness: 0.1, ...matParams }); const rock1 = new Mesh(new IcosahedronGeometry(4, 1), rockMat); const rock2 = new Mesh(new IcosahedronGeometry(3, 1), rockMat); const rock3 = new Mesh(new IcosahedronGeometry(2.5, 0), rockMat); rock1.position.set(0, 0, 0); rock2.position.set(2, 1, 1); rock3.position.set(-1.5, 2, -1); rock2.rotation.set(0.5, 0.5, 0.5); rock3.rotation.set(-0.3, 0.2, 0.4); rockGroup.add(rock1, rock2, rock3); // Add consistent rotation speed for this obstacle rockGroup.userData = { radius: 6, // Increased radius for better collision type: 'rock', rotationSpeed: { x: MathUtils.randFloatSpread(1.2), y: MathUtils.randFloatSpread(1.2), z: MathUtils.randFloatSpread(1.2) }, // Base velocity adjusted by difficulty velocity: new Vector3(-110 * difficultyMultiplier, 0, 0) }; obj = rockGroup; } else { // Pointed rock const rockGroup = new Group(); const rockMat = new MeshStandardMaterial({ color: 0x666666, roughness: 0.7, metalness: 0.2, ...matParams }); const rock = new Mesh(new ConeGeometry(3, 7, 6), rockMat); rock.rotation.z = Math.PI / 2; // Point horizontally // Add base to make it look more like an asteroid const base = new Mesh( new IcosahedronGeometry(3.5, 0), rockMat ); base.position.set(-3, 0, 0); rockGroup.add(rock, base); // Add consistent rotation speed for this obstacle rockGroup.userData = { radius: 5, // Proper collision radius type: 'rock', rotationSpeed: { x: MathUtils.randFloatSpread(1.5), y: MathUtils.randFloatSpread(1.5), z: MathUtils.randFloatSpread(1.5) }, // Base velocity adjusted by difficulty velocity: new Vector3(-120 * difficultyMultiplier, 0, 0) }; obj = rockGroup; } } else if (type === 'gift') { // Gift - a colorful present with improved design const giftGroup = new Group(); const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff]; const giftColor = colors[Math.floor(Math.random() * colors.length)]; const giftMat = new MeshStandardMaterial({ color: giftColor, metalness: 0.2, roughness: 0.5, ...matParams }); const gift = new Mesh(new BoxGeometry(3, 3, 3), giftMat); giftGroup.add(gift); // Add ribbon with better 3D appearance const ribbonMat = new MeshStandardMaterial({ color: 0xffffff, metalness: 0.3, roughness: 0.5, emissive: 0xffffff, emissiveIntensity: 0.2 }); const hRibbon = new Mesh( new BoxGeometry(3.2, 0.5, 0.5), ribbonMat ); const vRibbon = new Mesh( new BoxGeometry(0.5, 3.2, 0.5), ribbonMat ); // Add bow on top const bow1 = new Mesh( new BoxGeometry(0.8, 0.8, 0.3), ribbonMat ); bow1.position.set(0, 1.8, 0.5); bow1.rotation.z = Math.PI / 4; const bow2 = new Mesh( new BoxGeometry(0.8, 0.8, 0.3), ribbonMat ); bow2.position.set(0, 1.8, 0.5); bow2.rotation.z = -Math.PI / 4; hRibbon.position.y = 0; vRibbon.position.y = 0; giftGroup.add(hRibbon, vRibbon, bow1, bow2); // Add consistent rotation speed for this gift giftGroup.userData = { radius: 4, // Increased collision radius for better detection type: 'gift', rotationSpeed: { x: MathUtils.randFloatSpread(2), y: MathUtils.randFloatSpread(2), z: MathUtils.randFloatSpread(2) }, // For glowing/pulsing effect originalScale: 1, pulsePhase: Math.random() * Math.PI * 2, // Base velocity adjusted by difficulty, but slower than rocks velocity: new Vector3(-80 * difficultyMultiplier, 0, 0) }; obj = giftGroup; } else { // Boost - a glowing orb with improved design const boostGroup = new Group(); // Main sphere const boostMat = new MeshStandardMaterial({ color: 0x00ffff, emissive: 0x00ffff, emissiveIntensity: 0.5, metalness: 0.8, roughness: 0.2, ...matParams }); const boost = new Mesh(new SphereGeometry(2.5, 16, 16), boostMat); boostGroup.add(boost); // Add outer ring const ringMat = new MeshStandardMaterial({ color: 0x80ffff, emissive: 0x80ffff, emissiveIntensity: 0.7, transparent: true, opacity: 0.7 }); const ring = new Mesh( new THREE.TorusGeometry(3.5, 0.5, 8, 24), ringMat ); ring.rotation.x = Math.PI / 2; boostGroup.add(ring); // Add consistent rotation speed for this boost boostGroup.userData = { radius: 3.5, type: 'boost', rotationSpeed: { x: MathUtils.randFloatSpread(3), y: MathUtils.randFloatSpread(3), z: MathUtils.randFloatSpread(3) }, // Base velocity adjusted by difficulty velocity: new Vector3(-90 * difficultyMultiplier, 0, 0) }; obj = boostGroup; } if (obj) { // Generate random starting position const posY = this.minSpawnY + Math.random() * (this.maxSpawnY - this.minSpawnY); // Set Z position based on object type let posZ = 0; // For gifts and boosts, set Z to 0 to be on the same plane as Santa if (type === 'gift' || type === 'boost') { posZ = 0; } else { // For rocks, randomize Z position for more varied appearance posZ = (Math.random() - 0.5) * 30; } obj.position.set(this.spawnX, posY, posZ); this.scene.add(obj); this.objects.push(obj); return obj; } return null; } // Spawn a batch of gifts - modified to always use arc formation spawnGiftBatch() { console.log('Starting gift batch'); this.isBatchActive = true; this.currentBatchCount = 0; // Get current difficulty to determine batch size const difficultyMultiplier = this.environment.getDifficultyMultiplier(); this.maxBatchCount = Math.floor(8 + difficultyMultiplier * 2); // More gifts at higher difficulty // Start with the first gift this.continueGiftBatch(); } // Continue spawning the current gift batch - focused on arc formation continueGiftBatch() { this.currentBatchCount++; // Add some height variation to the gifts const centerY = this.minSpawnY + (this.maxSpawnY - this.minSpawnY) / 2; const heightVariation = 50; // Get current difficulty const difficultyMultiplier = this.environment.getDifficultyMultiplier(); // Spawn in different patterns based on batch progress // Pattern transitions as batch progresses if (this.currentBatchCount < 3) { // Pattern 1: Straight line const y = centerY + Math.sin(this.currentBatchCount * 0.5) * heightVariation; this.spawnObject('gift'); } else if (this.currentBatchCount < 6) { // Pattern 2: Vertical stack const stackHeight = 20; const baseY = centerY - stackHeight; const y = baseY + (this.currentBatchCount - 3) * stackHeight; this.spawnObject('gift'); } else if (this.currentBatchCount < 9) { // Pattern 3: Diagonal line const y = centerY - heightVariation + (this.currentBatchCount - 6) * (heightVariation * 2 / 3); this.spawnObject('gift'); } else { // End the batch if we've spawned enough this.isBatchActive = false; this.currentBatchCount = 0; // Spawn a bonus boost at the end of a gift batch const boostY = centerY + Math.random() * 40 - 20; this.spawnObject('boost'); } } update(delta) { // Update spawning timers this.spawnTimer += delta; this.batchSpawnTimer += delta; // Get current difficulty multiplier from environment const difficultyMultiplier = this.environment.getDifficultyMultiplier(); // Handle gift batch spawning - more frequent at higher difficulty const batchInterval = this.nextBatchInterval / difficultyMultiplier; if (this.batchSpawnTimer >= batchInterval && !this.isBatchActive) { this.spawnGiftBatch(); this.batchSpawnTimer = 0; this.nextBatchInterval = (5 + Math.random() * 5) / difficultyMultiplier; // 5-10 seconds between batches, reduced by difficulty } // If a batch is active, spawn objects at a faster rate const spawnInterval = this.isBatchActive ? 0.1 / difficultyMultiplier : // Faster gift spawn as difficulty increases (1.0 + Math.random() * 1.2) / difficultyMultiplier; // Faster obstacle spawn as difficulty increases // Spawn regular objects if (this.spawnTimer >= this.nextSpawnInterval) { if (this.isBatchActive) { this.continueGiftBatch(); } else { this.spawnObject(); // Regular spawn (rocks/boosts) } this.spawnTimer = 0; this.nextSpawnInterval = spawnInterval; } // Update all objects - slower movement to improve visibility const speedMultiplier = difficultyMultiplier * 0.8; // Reduced speed for better visibility for (let i = 0; i < this.objects.length; i++) { const obj = this.objects[i]; // Skip updating if object is no longer in scene or is invalid if (!obj || !obj.userData) continue; // Ensure object is visible and properly lit obj.visible = true; if (obj.material) { obj.material.needsUpdate = true; } // Make sure objects are within the visible area on z-axis if (Math.abs(obj.position.z) > 100) { obj.position.z = Math.random() * 40 - 20; // Keep within -20 to 20 } // Make sure objects come from the side if (obj.position.x > 500) { obj.position.x = 300 + Math.random() * 50; // Keep incoming objects closer } // Move object based on its velocity if (obj.userData.velocity) { // Scale velocity with difficulty const adjustedVelocity = obj.userData.velocity.clone().multiplyScalar(speedMultiplier); obj.position.add(adjustedVelocity.multiplyScalar(delta)); } // Apply rotation if defined if (obj.userData.rotationSpeed) { obj.rotation.x += obj.userData.rotationSpeed.x * delta * 2; obj.rotation.y += obj.userData.rotationSpeed.y * delta * 2; obj.rotation.z += obj.userData.rotationSpeed.z * delta * 2; } // Special effects for gifts (pulsing glow) if (obj.userData.type === 'gift') { // Initialize pulse phase if not exists if (obj.userData.pulsePhase === undefined) { obj.userData.pulsePhase = 0; } // Make gifts pulse more dramatically obj.userData.pulsePhase += delta * 4; const pulseFactor = 1 + Math.sin(obj.userData.pulsePhase) * 0.15; obj.scale.set(pulseFactor, pulseFactor, pulseFactor); // Make gifts slightly glow or emit light obj.traverse(child => { if (child.isMesh && child.material) { if (!child.userData.originalEmissive) { child.userData.originalEmissive = child.material.emissive ? child.material.emissive.clone() : new Color(0, 0, 0); } if (child.material.emissive) { const glowIntensity = 0.3 + Math.sin(obj.userData.pulsePhase) * 0.2; child.material.emissive.setRGB(glowIntensity, glowIntensity, glowIntensity); } } }); } // Special effects for boosts (rotating rings) if (obj.userData.type === 'boost' && obj.children.length > 1) { // Rotate the outer ring independently obj.children[1].rotation.z += delta * 3; // Faster rotation // Make boost glow more intensely obj.traverse(child => { if (child.isMesh && child.material) { if (!child.userData.originalEmissive) { child.userData.originalEmissive = child.material.emissive ? child.material.emissive.clone() : new Color(0, 0, 0); } if (child.material.emissive) { const time = performance.now() * 0.001; const glowIntensity = 0.5 + Math.sin(time * 5) * 0.3; child.material.emissive.setRGB(0, glowIntensity, glowIntensity); } } }); } // Remove objects that go off-screen to the left if (obj.position.x < -200) { // Shortened removal distance for better performance this.scene.remove(obj); this.objects.splice(i, 1); i--; continue; } // Check if objects are too far below/above playing area and remove them if (obj.position.y < this.minSpawnY - 100 || obj.position.y > this.maxSpawnY + 100) { this.scene.remove(obj); this.objects.splice(i, 1); i--; } } } // Reset hit counter resetHits() { this.playerHits = 0; } // Check if game over (3 hits) isGameOver() { return this.playerHits >= this.maxHits; } // Register a hit registerHit() { this.playerHits++; return this.playerHits; } // Clear all objects (for restart) clearAll() { for (const obj of this.objects) { this.scene.remove(obj); } this.objects = []; this.resetHits(); } } class Santa extends Group { constructor(scene, camera, obstacles, effects) { super(); this.scene = scene; this.camera = camera; this.obstacles = obstacles; this.effects = effects; // Set specific movement constraints as required this.minY = 360; this.maxY = 550; this.minX = 15; this.maxX = 30; // Set initial position to the specified starting point const startX = 25; const startY = 400; const startZ = 0; // Movement physics - use the existing position from Group this.position.set(startX, startY, startZ); // Set initial position to specified point this.velocity = new Vector3(0, 0, 0); this.targetPosition = new Vector3(startX, startY, startZ); this.acceleration = new Vector3(0, 0, 0); this.maxSpeed = 200; // Reduced from 300 for better control this.friction = 0.95; // Increased from 0.92 for smoother deceleration // Movement effects this.tiltAngle = 0; this.maxTiltAngle = 0.3; this.engineParticles = null; // Track player state this.score = 0; this.energy = 100; this.isGameOver = false; this.invulnerable = false; this.invulnerableTimer = 0; // Energy system constants this.maxEnergy = 100; this.baseEnergyConsumptionRate = 100 / 60; // Energy depletes in 1 minute (100/60 per second) this.highAltitudeEnergyMultiplier = 2.0; // 2x energy consumption at high altitude (changed from 1.5) this.highAltitudeThreshold = 500; // Y-position threshold for high altitude this.isHighAltitude = false; // Track high altitude state this.energyGainOnGift = 10; // Energy gain per gift collected // Position logging this.positionLogTimer = 0; this.positionLogInterval = 1; // Log position every second // Create Santa's sleigh this.createSleigh(); // For collision detection - increase radius to better match visual size this.boundingRadius = 15; // Increased from 12 for better collision detection this.raycaster = new Raycaster(); // Make sure this Group is added to the scene scene.add(this); // Initialize engine particles and fire effect if (this.effects) { this.createEngineParticles(); this.createFireEffect(); } // Set up camera tracking this.setupCameraTracking(); } // New method for setting up camera tracking behavior setupCameraTracking() { // Store the initial camera position as reference this.initialCameraPosition = this.camera.position.clone(); // Store the initial player position as reference this.initialPlayerPosition = this.position.clone(); // Camera offset for dynamic positioning this.cameraOffset = new Vector3(0, 0, 0); // Camera smoothing parameters this.cameraLagSpeed = 3.0; // How fast the camera catches up (higher = faster) this.cameraMaxOffset = new Vector3(15, 30, 25); // Maximum offset in each direction // Store last acceleration for camera effects this.lastAcceleration = new Vector3(0, 0, 0); // Initialize camera look target - initially look at player this.cameraLookTarget = this.position.clone(); // Initialize camera momentum this.cameraMomentum = new Vector3(0, 0, 0); } // Handle window resize to update movement constraints - no longer needed as we use fixed ranges handleResize() { // Keep Santa within bounds if they're outside after resize this.position.x = Math.max(this.minX, Math.min(this.maxX, this.position.x)); this.position.y = Math.max(this.minY, Math.min(this.maxY, this.position.y)); this.sleighGroup.position.copy(this.position); } createSleigh() { // Create sleigh group this.sleighGroup = new Group(); // Create sleigh body const bodyMaterial = new MeshStandardMaterial({ color: 0xcc0000, roughness: 0.5, metalness: 0.1 }); const sleighBase = new Mesh( new BoxGeometry(16, 2, 8), bodyMaterial ); // Create sleigh sides const sideMaterial = new MeshStandardMaterial({ color: 0x990000, roughness: 0.7, metalness: 0.0 }); const leftSide = new Mesh( new BoxGeometry(12, 4, 1), sideMaterial ); leftSide.position.set(0, 3, 3.5); const rightSide = new Mesh( new BoxGeometry(12, 4, 1), sideMaterial ); rightSide.position.set(0, 3, -3.5); // Create Santa figure (simplified) const santaBody = new Mesh( new BoxGeometry(4, 5, 3), new MeshStandardMaterial({ color: 0xcc0000 }) ); santaBody.position.set(0, 5.5, 0); const santaHead = new Mesh( new BoxGeometry(2, 2, 2), new MeshStandardMaterial({ color: 0xffccaa }) ); santaHead.position.set(0, 9, 0); const santaHat = new Mesh( new BoxGeometry(2, 2, 2), new MeshStandardMaterial({ color: 0xcc0000 }) ); santaHat.position.set(0, 10.5, 0); santaHat.scale.set(1, 0.8, 1); // Engine/thruster at the back const engine = new Mesh( new BoxGeometry(2, 3, 4), new MeshStandardMaterial({ color: 0x444444, roughness: 0.3, metalness: 0.8 }) ); engine.position.set(-8, 2, 0); // Add all parts to group this.sleighGroup.add(sleighBase, leftSide, rightSide, santaBody, santaHead, santaHat, engine); // Add to scene this.scene.add(this.sleighGroup); // Position the sleigh this.sleighGroup.position.copy(this.position); } // Add engine particles effect createEngineParticles() { if (!this.effects) return; // Calculate engine position (at the back of the sleigh) const enginePosition = new Vector3(-8, 2, 0); // Convert to world position this.sleighGroup.localToWorld(enginePosition.clone()); // Create engine particles through Effects class this.engineParticles = this.effects.createEngineParticles(enginePosition); } // New method to create fire effect for Santa's sleigh createFireEffect() { if (!this.effects) return; // Calculate fire position (at the back of the sleigh) const firePosition = new Vector3(-8, 1, 0); // Convert to world position this.sleighGroup.localToWorld(firePosition.clone()); // Create fire particles through Effects class this.fireParticles = this.effects.createFireEffect(firePosition); } // Set target position from mouse coordinates setTargetFromMouse(mouseX, mouseY) { // Convert mouse coordinates (0 to 1) to the specific range const y = this.minY + mouseY * (this.maxY - this.minY); // Map mouse X position to the specific X range const x = this.minX + mouseX * (this.maxX - this.minX); this.targetPosition.set(x, y, 0); // Apply some direct position control for more responsive feel // Reduce direct control weight for smoother movement const directControlWeight = 0.15; // Reduced from 0.3 for smoother movement const blendedY = this.position.y * (1 - directControlWeight) + y * directControlWeight; // Update position with blended control for more responsive feel this.position.y = Math.max(this.minY, Math.min(this.maxY, blendedY)); // Update sleigh immediately for better responsiveness this.sleighGroup.position.copy(this.position); // Update camera target immediately for responsive camera feel this.updateCameraTarget(); } // New method to update camera position based on player movement updateCamera(delta) { // Skip camera updates if game is over if (this.isGameOver) { // For game over, create a dramatic pulling back effect this.cameraMomentum.z += 50 * delta; this.camera.position.z += this.cameraMomentum.z * delta; // Also tilt camera downward to see santa falling this.camera.lookAt(this.sleighGroup.position); return; } // Calculate target camera position based on player movement // 1. Base position is the initial camera position const targetCameraPos = this.initialCameraPosition.clone(); // 2. Calculate player movement from initial position const playerOffset = new Vector3().subVectors(this.position, this.initialPlayerPosition); // 3. Calculate camera offset based on player position // The camera should follow the player vertically with some damping this.cameraOffset.y = MathUtils.lerp( this.cameraOffset.y, playerOffset.y * 0.5, // Half the player's vertical movement delta * this.cameraLagSpeed ); // Limit the vertical offset this.cameraOffset.y = Math.max( -this.cameraMaxOffset.y, Math.min(this.cameraMaxOffset.y, this.cameraOffset.y) ); // 4. Add subtle camera offset based on player's velocity // This creates a "leading" effect where camera slightly anticipates movement const velocityInfluence = 0.05; const velocityOffset = new Vector3( this.velocity.x * velocityInfluence, this.velocity.y * velocityInfluence, 0 ); // 5. Add subtle rotational offset based on player's tilt // When santa tilts up, camera should look slightly up too const tiltOffset = new Vector3( 0, this.tiltAngle * 10, // Amplify the tilt effect 0 ); // 6. Add momentum to camera for smoother movement // Calculate acceleration between frames for momentum const accelDiff = new Vector3().subVectors(this.acceleration, this.lastAcceleration); this.lastAcceleration.copy(this.acceleration); // Add some of this acceleration to camera momentum this.cameraMomentum.add(accelDiff.multiplyScalar(0.1)); // Apply damping to momentum this.cameraMomentum.multiplyScalar(0.95); // 7. Combine all offsets and apply to camera position targetCameraPos.add(this.cameraOffset); targetCameraPos.add(velocityOffset); targetCameraPos.add(tiltOffset); targetCameraPos.add(this.cameraMomentum); // 8. Smooth camera movement this.camera.position.lerp(targetCameraPos, delta * 3); // 9. Update camera look target this.updateCameraTarget(); } // Update where the camera is looking updateCameraTarget() { // Calculate a target ahead of the player const lookAheadDistance = 20; // Look slightly ahead const targetLookPoint = this.sleighGroup.position.clone().add( new Vector3(lookAheadDistance, this.tiltAngle * 20, 0) ); // Smoothly blend to the new look target this.cameraLookTarget.lerp(targetLookPoint, 0.1); // Make the camera look at the target this.camera.lookAt(this.cameraLookTarget); } // Check for collisions with obstacles checkCollisions() { if (this.isGameOver) return; // Get Santa's world position from the sleigh group const santaPosition = this.sleighGroup.position.clone(); // Array to track objects to remove to avoid modification during iteration const objectsToRemove = []; // Store Santa's dimensions for 2D collision const santaSizeX = 20; // Width of Santa's sleigh const santaSizeY = 12; // Height of Santa's sleigh // Define proximity ranges const proximityRange = 100; // How close objects need to be to get highlighted const proximityRangeY = 50; // Vertical proximity for highlighting // Check each obstacle for (const object of this.obstacles.objects) { // Skip objects that are marked for removal if (object.userData.markedForRemoval) continue; const objectPosition = object.position.clone(); const objType = object.userData.type; // Check if object is close enough for visual highlighting (only for collectibles) if ((objType === 'gift' || objType === 'boost') && objectPosition.x > santaPosition.x - proximityRange && objectPosition.x < santaPosition.x + proximityRange && Math.abs(objectPosition.y - santaPosition.y) < proximityRangeY) { // Add highlighting if not already highlighted if (!object.userData.isHighlighted) { this.highlightCollectible(object); object.userData.isHighlighted = true; } } else if (object.userData.isHighlighted) { // Remove highlighting if object moves away this.removeHighlightFromCollectible(object); object.userData.isHighlighted = false; } // For gifts and boosts, use a more forgiving 2D collision check based on screen position if (objType === 'gift' || objType === 'boost') { // Calculate horizontal and vertical distances in 2D space (ignoring Z) const dx = Math.abs(santaPosition.x - objectPosition.x); const dy = Math.abs(santaPosition.y - objectPosition.y); // Get object radius or default const objectRadius = object.userData.radius || 5; // Check if the 2D distance is within collection range // Use a more generous collision box for gifts/boosts if (dx < (santaSizeX/2 + objectRadius) && dy < (santaSizeY/2 + objectRadius)) { // Mark the object for collision handling object.userData.markedForRemoval = true; objectsToRemove.push(object); console.log(`2D Collision detected with ${objType} at dx=${dx.toFixed(2)}, dy=${dy.toFixed(2)}`); } } // For rocks, use the original 3D distance check for more precise collisions else { // Calculate 3D distance const dx = santaPosition.x - objectPosition.x; const dy = santaPosition.y - objectPosition.y; const dz = santaPosition.z - objectPosition.z; // Use squared distance for performance (avoid square root) const distanceSquared = dx * dx + dy * dy + dz * dz; // Get collision radius (squared) const objectRadius = object.userData.radius || 5; const collisionRadius = this.boundingRadius + objectRadius; const radiusSquared = collisionRadius * collisionRadius; // Check for collision if (distanceSquared < radiusSquared) { // Mark the object for collision handling object.userData.markedForRemoval = true; objectsToRemove.push(object); console.log(`3D Collision detected with ${objType} at distance ${Math.sqrt(distanceSquared).toFixed(2)}, required: ${collisionRadius}`); } } } // Handle collisions after the iteration to avoid modification issues for (const object of objectsToRemove) { this.handleCollision(object); } } // Add highlight to collectible objects as they approach Santa highlightCollectible(object) { // Store original material properties if (!object.userData.originalEmissive) { // Store for each mesh in the group object.traverse(child => { if (child.isMesh && child.material) { child.userData.originalEmissive = child.material.emissive ? child.material.emissive.clone() : new Color(0, 0, 0); child.userData.originalEmissiveIntensity = child.material.emissiveIntensity || 0; // Add glow effect const type = object.userData.type; if (type === 'gift') { child.material.emissive = new Color(1, 1, 0.5); // Golden glow } else if (type === 'boost') { child.material.emissive = new Color(0.2, 0.4, 1); // Blue glow } child.material.emissiveIntensity = 0.8; // Make object slightly larger child.userData.originalScale = child.scale.clone(); child.scale.multiplyScalar(1.2); } }); // Also store effect for the whole group object.userData.originalScale = object.scale.clone(); // Add subtle pulsing animation if (!object.userData.pulsePhase) { object.userData.pulsePhase = 0; } } } // Remove highlight from collectible objects as they move away removeHighlightFromCollectible(object) { // Restore original material properties object.traverse(child => { if (child.isMesh && child.material) { if (child.userData.originalEmissive) { child.material.emissive.copy(child.userData.originalEmissive); child.material.emissiveIntensity = child.userData.originalEmissiveIntensity; } // Restore original scale if (child.userData.originalScale) { child.scale.copy(child.userData.originalScale); } } }); } // Handle hit with obstacle handleCollision(object) { if (this.isGameOver || this.invulnerable) { return; } const objType = object.userData.type; console.log(`Handling collision with ${objType}`); if (objType === 'rock') { // Handle rock collision - flash screen, play sound, apply knockback if (this.effects) { this.effects.screenFlash(this.camera, { r: 1, g: 0.3, b: 0.3 }, 0.3); this.effects.cameraShake(this.camera, 1.0, 0.3); } // Play sound effect this.playSound('collision'); // Calculate knockback direction const knockbackDir = this.position.clone().sub(object.position).normalize(); this.velocity.add(knockbackDir.multiplyScalar(100)); // Make player briefly invulnerable this.invulnerable = true; this.invulnerableTimer = 0; // Register hit with obstacle system - if max hits reached, game over const hits = this.obstacles.registerHit(); console.log(`Hits: ${hits}/${this.obstacles.maxHits}`); // Energy penalty on collision this.energy = Math.max(0, this.energy - 20); // Check if energy is depleted if (this.energy <= 0) { this.triggerGameOver(); } } else if (objType === 'gift') { // Gift collection console.log('Gift collected!'); // Add score & trigger effect this.score += 100; // Increase energy when collecting a gift this.energy = Math.min(this.maxEnergy, this.energy + this.energyGainOnGift); // Store gift position before removing for effect const giftPosition = object.position.clone(); // Remove the gift first this.removeObject(object); // Add visual effect after removal this.triggerGiftEffect(giftPosition); // Play collect sound this.playSound('collect'); } else if (objType === 'boost') { // Boost collection - add rapid velocity & create visual effect console.log('Boost collected!'); // Add score this.score += 50; // Apply velocity boost const boostDir = new Vector3(-1, 0, 0).normalize(); this.velocity.add(boostDir.multiplyScalar(-100)); // Store boost position before removing for effect const boostPosition = object.position.clone(); // Remove the boost first this.removeObject(object); // Add visual effect after removal this.triggerBoostEffect(boostPosition); // Play boost sound this.playSound('boost'); } } // Trigger gift collection effect triggerGiftEffect(position) { if (!this.effects) return; // Create gift particles at the gift position this.effects.createGiftEffect(position); // Apply camera shake this.effects.cameraShake(this.camera, 0.5, 0.3); // Add screen flash this.effects.screenFlash(this.camera, { r: 1, g: 0.8, b: 0.4 }, 0.5, 0.2); } // Trigger energy boost effect triggerBoostEffect(position) { if (!this.effects) return; // Create boost particles at the boost position this.effects.createBoostEffect(position); // Apply camera shake this.effects.cameraShake(this.camera, 0.8, 0.4); // Add screen flash this.effects.screenFlash(this.camera, { r: 0.3, g: 0.7, b: 1.0 }, 0.6, 0.3); } update(delta) { if (this.isGameOver) { // Game over state - accelerate downward for crash this.velocity.multiplyScalar(0.96); this.velocity.y -= 300 * delta; // Stronger gravity pull // Add rotation for crash effect this.sleighGroup.rotation.z += delta * 3; this.sleighGroup.rotation.x += delta * 2; // Move toward Earth center slightly const earthDirection = new Vector3(0, -1, 0); this.velocity.add(earthDirection.multiplyScalar(50 * delta)); // Apply velocity this.position.add(this.velocity.clone().multiplyScalar(delta)); this.sleighGroup.position.copy(this.position); // Add smoke/fire trail to crashing sleigh if (this.effects) { if (Math.random() < 0.3) { const smokePos = this.position.clone(); smokePos.x += (Math.random() - 0.5) * 5; smokePos.y += (Math.random() - 0.5) * 5; smokePos.z += (Math.random() - 0.5) * 5; this.effects.createSmokeEffect(smokePos); } } // Make sleigh vanish if it falls below minimum height if (this.position.y < this.minY - 200) { this.sleighGroup.visible = false; // Create explosion when hitting the ground if (!this.crashExplosionTriggered && this.effects) { this.effects.createExplosionEffect(this.position.clone()); this.crashExplosionTriggered = true; } } // Update camera in game over state this.updateCamera(delta); return; } // Log position at regular intervals this.positionLogTimer += delta; if (this.positionLogTimer >= this.positionLogInterval) { console.log(`Santa position: x=${this.position.x.toFixed(2)}, y=${this.position.y.toFixed(2)}, z=${this.position.z.toFixed(2)}`); this.positionLogTimer = 0; } // Update invulnerability if (this.invulnerable) { this.invulnerableTimer += delta; this.sleighGroup.visible = Math.floor(this.invulnerableTimer * 10) % 2 === 0; if (this.invulnerableTimer > 1.5) { this.invulnerable = false; this.sleighGroup.visible = true; } } // Update high altitude blinking effect if (this.sleighGroup.userData.blinking) { this.sleighGroup.userData.blinkTime += delta; const blinkCycle = this.sleighGroup.userData.blinkTime % this.sleighGroup.userData.blinkRate; this.sleighGroup.visible = blinkCycle < this.sleighGroup.userData.blinkDuration; } // Update boost trail effect if (this.boostTrailActive) { this.boostTrailTimer += delta; if (this.boostTrailTimer >= this.boostTrailInterval) { // Create boost trail particles if (this.effects) { // Calculate position behind the sleigh const trailPos = this.position.clone(); trailPos.x -= 10 + Math.random() * 5; trailPos.y += (Math.random() - 0.5) * 5; trailPos.z += (Math.random() - 0.5) * 5; this.effects.createBoostTrailEffect(trailPos); } this.boostTrailTimer = 0; } } // Calculate direction to target const direction = this.targetPosition.clone().sub(this.position); // Add acceleration toward target - reduce multiplier for smoother movement this.acceleration.copy(direction); this.acceleration.multiplyScalar(5); // Reduced from 10 for smoother acceleration // Apply acceleration to velocity this.velocity.add(this.acceleration.clone().multiplyScalar(delta)); // Apply friction this.velocity.multiplyScalar(this.friction); // Limit maximum speed if (this.velocity.length() > this.maxSpeed) { this.velocity.normalize().multiplyScalar(this.maxSpeed); } // Apply velocity to position - use .add instead of reassigning this.position.add(this.velocity.clone().multiplyScalar(delta)); // Restrict to game bounds this.position.y = Math.max(this.minY, Math.min(this.maxY, this.position.y)); this.position.x = Math.max(this.minX, Math.min(this.maxX, this.position.x)); // Update sleigh position this.sleighGroup.position.copy(this.position); // Add tilt based on vertical movement const targetTilt = -this.velocity.y / this.maxSpeed * this.maxTiltAngle; this.tiltAngle += (targetTilt - this.tiltAngle) * 0.1; this.sleighGroup.rotation.z = this.tiltAngle; // Add subtle roll based on horizontal movement const rollAmount = -this.velocity.x / this.maxSpeed * 0.3; this.sleighGroup.rotation.y = rollAmount; // Check if in high altitude mode const wasHighAltitude = this.isHighAltitude; this.isHighAltitude = this.position.y > this.highAltitudeThreshold; // Update engine visual effects based on altitude if (this.isHighAltitude !== wasHighAltitude) { if (this.isHighAltitude) { this.activateHighAltitudeEffects(); } else { this.deactivateHighAltitudeEffects(); } } // Update engine particles position if they exist if (this.engineParticles && this.effects) { // Calculate the position at the back of the sleigh const enginePos = new Vector3(-8, 2, 0); this.sleighGroup.localToWorld(enginePos); this.engineParticles.position.copy(enginePos); } // Update fire particles position if they exist if (this.fireParticles && this.effects) { // Calculate the position at the back of the sleigh const firePos = new Vector3(-8, 1, 0); this.sleighGroup.localToWorld(firePos); this.fireParticles.position.copy(firePos); } // Update camera position to follow player this.updateCamera(delta); // Check for collisions this.checkCollisions(); // Calculate energy consumption based on altitude const energyConsumptionRate = this.baseEnergyConsumptionRate * (this.isHighAltitude ? this.highAltitudeEnergyMultiplier : 1.0); // Gradually decrease energy over time this.energy = Math.max(0, this.energy - energyConsumptionRate * delta); // Check if energy is depleted if (this.energy <= 0 && !this.isGameOver) { this.triggerGameOver(); } } // Trigger game over state triggerGameOver() { console.log('Game over triggered - out of energy!'); this.isGameOver = true; this.crashExplosionTriggered = false; // Apply effects if (this.effects) { this.effects.screenFlash(this.camera, { r: 0.2, g: 0.0, b: 0.0 }, 0.7, 0.5); this.effects.cameraShake(this.camera, 2.0, 1.0); } // Start with initial downward velocity for crash this.velocity.y = -50; // Create smoke/fire effect immediately if (this.effects) { this.effects.createSmokeEffect(this.position.clone()); } } // Activate high altitude visual effects activateHighAltitudeEffects() { console.log('Activating high altitude mode'); // Intensify engine particles if (this.engineParticles && this.effects) { this.effects.intensifyEngineParticles(this.engineParticles); } // Intensify fire particles if (this.fireParticles && this.effects) { this.effects.intensifyFireParticles(this.fireParticles); } // Start blinking effect for sleigh this.sleighGroup.userData.blinking = true; this.sleighGroup.userData.blinkTime = 0; this.sleighGroup.userData.blinkRate = 0.2; // Blink every 0.2 seconds this.sleighGroup.userData.blinkDuration = 0.1; // Visible for 0.1 seconds // Add glow effect to sleigh this.sleighGroup.children.forEach(part => { if (part.material) { // Store original emissive properties part.userData.originalEmissive = part.userData.originalEmissive || part.material.emissive.clone(); part.userData.originalEmissiveIntensity = part.userData.originalEmissiveIntensity || part.material.emissiveIntensity || 0; // Add glow part.material.emissive.set(0xffaa22); part.material.emissiveIntensity = 0.5; } }); // Start boost trail effect this.boostTrailActive = true; this.boostTrailTimer = 0; this.boostTrailInterval = 0.05; // Trail particle every 0.05 seconds } // Deactivate high altitude visual effects deactivateHighAltitudeEffects() { console.log('Deactivating high altitude mode'); // Return engine particles to normal if (this.engineParticles && this.effects) { this.effects.normalizeEngineParticles(this.engineParticles); } // Return fire particles to normal if (this.fireParticles && this.effects) { this.effects.normalizeFireParticles(this.fireParticles); } // Stop blinking effect this.sleighGroup.userData.blinking = false; this.sleighGroup.visible = true; // Remove glow effect this.sleighGroup.children.forEach(part => { if (part.material && part.userData.originalEmissive) { part.material.emissive.copy(part.userData.originalEmissive); part.material.emissiveIntensity = part.userData.originalEmissiveIntensity; } }); // Stop boost trail effect this.boostTrailActive = false; } // Helper method to remove objects from scene and obstacles array removeObject(object) { const index = this.obstacles.objects.indexOf(object); if (index !== -1) { // Properly remove the object and all its children from the scene first this.scene.remove(object); // Remove from obstacles array this.obstacles.objects.splice(index, 1); // Make sure the object is completely disposed if (object.geometry) object.geometry.dispose(); if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } // Handle children (for gift groups, etc.) if (object.children) { for (let i = object.children.length - 1; i >= 0; i--) { const child = object.children[i]; if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(material => material.dispose()); } else { child.material.dispose(); } } } } } } // Play sound effect helper playSound(soundType) { // This could be implemented to play actual sounds if audio system is added console.log(`Playing sound: ${soundType}`); } // Reset for new game reset() { // Reset to starting position this.position.set(25, 400, 0); this.velocity.set(0, 0, 0); this.targetPosition.set(25, 400, 0); this.acceleration.set(0, 0, 0); this.score = 0; this.energy = this.maxEnergy; this.isGameOver = false; this.invulnerable = false; this.invulnerableTimer = 0; this.isHighAltitude = false; this.crashExplosionTriggered = false; this.boostTrailActive = false; // Reset sleigh this.sleighGroup.position.copy(this.position); this.sleighGroup.rotation.set(0, 0, 0); this.sleighGroup.visible = true; // Make sure blinking is disabled this.sleighGroup.userData.blinking = false; // Reset any materials this.sleighGroup.children.forEach(part => { if (part.material && part.userData.originalEmissive) { part.material.emissive.copy(part.userData.originalEmissive); part.material.emissiveIntensity = part.userData.originalEmissiveIntensity; } }); // Reset camera this.camera.position.copy(this.initialCameraPosition); this.cameraOffset.set(0, 0, 0); this.cameraMomentum.set(0, 0, 0); this.lastAcceleration.set(0, 0, 0); this.cameraLookTarget.copy(this.position); this.camera.lookAt(this.cameraLookTarget); // Re-create engine particles if (this.effects) { this.createEngineParticles(); this.createFireEffect(); } } // Get current game state getGameState() { return { score: this.score, distance: Math.floor(this.obstacles.environment.distanceTraveled), energy: this.energy, isGameOver: this.isGameOver }; } } class Snow { constructor(scene) { this.scene = scene; // Create a circular texture for snow particles this.createSnowTexture(); // Create snow systems with different layers for depth this.createBackgroundSnow(); this.createForegroundSnow(); } createSnowTexture() { // Create a canvas to draw the snow particle texture const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const context = canvas.getContext('2d'); // Clear the canvas context.fillStyle = 'black'; context.fillRect(0, 0, canvas.width, canvas.height); // Draw a radial gradient (soft circle) for the snowflake const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = canvas.width / 2 - 2; const gradient = context.createRadialGradient( centerX, centerY, 0, centerX, centerY, radius ); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.8)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); context.fillStyle = gradient; context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.fill(); // Create a texture from the canvas const textureLoader = new TextureLoader(); this.snowTexture = textureLoader.load(canvas.toDataURL()); this.snowTexture.minFilter = NearestFilter; } createBackgroundSnow() { // Create distant background snow particles const snowCount = 4000; const snowGeometry = new BufferGeometry(); const positions = []; const sizes = []; // Create snow particles spanning the width of the game area const snowBounds = { x: 2000, y: 1500, z: 1200, minY: 200, // Start above the visible area maxY: 1800 // High enough to continuously fall }; // Generate random positions for (let i = 0; i < snowCount; i++) { positions.push( (Math.random() - 0.5) * snowBounds.x, snowBounds.minY + Math.random() * (snowBounds.maxY - snowBounds.minY), (Math.random() - 0.5) * snowBounds.z - 600 // Position in background ); // Varied sizes for more realistic snow sizes.push(Math.random() * 2 + 0.8); } snowGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); snowGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); // Create snow material with soft appearance using our texture const snowMaterial = new PointsMaterial({ color: 0xffffff, size: 2, transparent: true, opacity: 0.6, blending: AdditiveBlending, sizeAttenuation: true, map: this.snowTexture, depthWrite: false }); // Create the particle system this.backgroundSnow = new Points(snowGeometry, snowMaterial); this.scene.add(this.backgroundSnow); // Store velocities for each snowflake this.backgroundVelocities = []; for (let i = 0; i < snowCount; i++) { this.backgroundVelocities.push( (Math.random() - 0.5) * 8, // X drift (side to side) -20 - Math.random() * 15, // Y falling speed (downward) (Math.random() - 0.5) * 2 // Z drift (minimal depth change) ); } // Store bounds for recycling particles this.backgroundBounds = snowBounds; } createForegroundSnow() { // Create closer, more visible snow particles const snowCount = 600; const snowGeometry = new BufferGeometry(); const positions = []; const sizes = []; // Create snow particles in foreground const snowBounds = { x: 500, y: 1200, z: 300, minY: 200, maxY: 1600 }; // Generate random positions for (let i = 0; i < snowCount; i++) { positions.push( (Math.random() - 0.5) * snowBounds.x, snowBounds.minY + Math.random() * (snowBounds.maxY - snowBounds.minY), (Math.random() - 0.5) * snowBounds.z + 100 // Position in foreground ); // Larger sizes for foreground snow sizes.push(Math.random() * 4 + 2); } snowGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); snowGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1)); // Create snow material with brighter appearance and our texture const snowMaterial = new PointsMaterial({ color: 0xffffff, size: 4, transparent: true, opacity: 0.8, blending: AdditiveBlending, sizeAttenuation: true, map: this.snowTexture, depthWrite: false }); // Create the particle system this.foregroundSnow = new Points(snowGeometry, snowMaterial); this.scene.add(this.foregroundSnow); // Store velocities for each snowflake this.foregroundVelocities = []; for (let i = 0; i < snowCount; i++) { this.foregroundVelocities.push( (Math.random() - 0.5) * 15, // X drift (more side to side) -40 - Math.random() * 30, // Y falling speed (faster) (Math.random() - 0.5) * 5 // Z drift (slight depth change) ); } // Store bounds for recycling particles this.foregroundBounds = snowBounds; } update(delta) { // Update background snow if (this.backgroundSnow && this.backgroundSnow.geometry && this.backgroundSnow.geometry.attributes && this.backgroundSnow.geometry.attributes.position && this.backgroundSnow.geometry.attributes.position.array) { const positions = this.backgroundSnow.geometry.attributes.position.array; if (!this.backgroundVelocities || positions.length / 3 > this.backgroundVelocities.length / 3) { // Safety check - recreate velocities if missing or sizes don't match const count = positions.length / 3; this.backgroundVelocities = []; for (let i = 0; i < count; i++) { this.backgroundVelocities.push( (Math.random() - 0.5) * 8, // X drift -20 - Math.random() * 15, // Y falling speed (Math.random() - 0.5) * 2 // Z drift ); } } for (let i = 0; i < positions.length; i += 3) { // Make sure the index is valid const velIndex = Math.floor(i/3) * 3; if (velIndex >= this.backgroundVelocities.length) continue; // Apply velocity positions[i] += this.backgroundVelocities[velIndex] * delta; // x positions[i + 1] += this.backgroundVelocities[velIndex + 1] * delta; // y positions[i + 2] += this.backgroundVelocities[velIndex + 2] * delta; // z // Add gentle swirl for more natural movement const swirl = Math.sin(positions[i + 1] * 0.01) * delta * 3; positions[i] += swirl; // Add slight wobble for realistic fluttering const wobble = Math.cos(positions[i] * 0.02 + this.backgroundVelocities[velIndex + 1]) * delta * 1.5; positions[i] += wobble; // Reset if snowflake falls below visible area (-100 is below visible ground) if (positions[i + 1] < -100 && this.backgroundBounds) { positions[i] = (Math.random() - 0.5) * this.backgroundBounds.x; positions[i + 1] = this.backgroundBounds.maxY; positions[i + 2] = (Math.random() - 0.5) * this.backgroundBounds.z - 600; // Randomize velocity for variety this.backgroundVelocities[velIndex] = (Math.random() - 0.5) * 8; this.backgroundVelocities[velIndex + 1] = -20 - Math.random() * 15; this.backgroundVelocities[velIndex + 2] = (Math.random() - 0.5) * 2; } } this.backgroundSnow.geometry.attributes.position.needsUpdate = true; } // Update foreground snow if (this.foregroundSnow && this.foregroundSnow.geometry && this.foregroundSnow.geometry.attributes && this.foregroundSnow.geometry.attributes.position && this.foregroundSnow.geometry.attributes.position.array) { const positions = this.foregroundSnow.geometry.attributes.position.array; if (!this.foregroundVelocities || positions.length / 3 > this.foregroundVelocities.length / 3) { // Safety check - recreate velocities if missing or sizes don't match const count = positions.length / 3; this.foregroundVelocities = []; for (let i = 0; i < count; i++) { this.foregroundVelocities.push( (Math.random() - 0.5) * 15, // X drift -40 - Math.random() * 30, // Y falling speed (Math.random() - 0.5) * 5 // Z drift ); } } for (let i = 0; i < positions.length; i += 3) { // Make sure the index is valid const velIndex = Math.floor(i/3) * 3; if (velIndex >= this.foregroundVelocities.length) continue; // Apply velocity positions[i] += this.foregroundVelocities[velIndex] * delta; // x positions[i + 1] += this.foregroundVelocities[velIndex + 1] * delta; // y positions[i + 2] += this.foregroundVelocities[velIndex + 2] * delta; // z // Add stronger swirl for more visible movement const swirl = Math.sin(positions[i + 1] * 0.02) * delta * 6; positions[i] += swirl; // Add pronounced wobble for realistic fluttering const wobble = Math.cos(positions[i] * 0.03 + this.foregroundVelocities[velIndex + 1]) * delta * 3; positions[i] += wobble; // Reset if snowflake falls below visible area if (positions[i + 1] < -100 && this.foregroundBounds) { positions[i] = (Math.random() - 0.5) * this.foregroundBounds.x; positions[i + 1] = this.foregroundBounds.maxY; positions[i + 2] = (Math.random() - 0.5) * this.foregroundBounds.z + 100; // Randomize velocity for variety this.foregroundVelocities[velIndex] = (Math.random() - 0.5) * 15; this.foregroundVelocities[velIndex + 1] = -40 - Math.random() * 30; this.foregroundVelocities[velIndex + 2] = (Math.random() - 0.5) * 5; } } this.foregroundSnow.geometry.attributes.position.needsUpdate = true; } } } function createUI() { // Add CSS styles const style = document.createElement('style'); style.textContent = ` body { margin: 0; overflow: hidden; background: #000; font-family: sans-serif; } canvas { display: block; } #ui { position: absolute; top: 10px; left: 10px; color: #fff; z-index: 999; pointer-events: none; } #score, #distance { font-size: 1.2rem; margin-bottom: 5px; } /* Energy bar styles */ #energy-container { width: 200px; height: 15px; background-color: #333; border-radius: 8px; overflow: hidden; margin-bottom: 10px; } #energy { width: 100%; height: 100%; background-color: #44ff88; transition: width 0.3s, background-color 0.3s; } #restart { pointer-events: auto; margin-top: 10px; font-size: 1rem; padding: 0.5rem 1rem; background: #cc0000; color: #fff; border: none; border-radius: 4px; cursor: pointer; display: none; /* hidden until game over */ } #restart:hover { background: #ff0000; } /* Game over message */ #game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 3rem; font-weight: bold; text-shadow: 0 0 10px #ff0000; display: none; text-align: center; pointer-events: none; } #game-over p { font-size: 1.5rem; margin-top: 10px; } /* Start screen */ #start-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; } #start-screen h1 { color: #fff; font-size: 3rem; margin-bottom: 2rem; text-align: center; text-shadow: 0 0 10px #ff0000; } #start-button { font-size: 1.5rem; padding: 1rem 2rem; background: #cc0000; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } #start-button:hover { background: #ff0000; } `; document.head.appendChild(style); // Create UI container const uiContainer = document.createElement('div'); uiContainer.id = 'ui'; // Create score element const scoreElement = document.createElement('div'); scoreElement.id = 'score'; scoreElement.textContent = 'Score: 0'; uiContainer.appendChild(scoreElement); // Create distance element const distanceElement = document.createElement('div'); distanceElement.id = 'distance'; distanceElement.textContent = 'Distance: 0'; uiContainer.appendChild(distanceElement); // Create energy container and bar const energyContainer = document.createElement('div'); energyContainer.id = 'energy-container'; const energyBar = document.createElement('div'); energyBar.id = 'energy'; energyContainer.appendChild(energyBar); uiContainer.appendChild(energyContainer); // Create restart button const restartButton = document.createElement('button'); restartButton.id = 'restart'; restartButton.textContent = 'Restart'; uiContainer.appendChild(restartButton); // Create game over message const gameOverElement = document.createElement('div'); gameOverElement.id = 'game-over'; gameOverElement.textContent = 'GAME OVER'; // Create start screen const startScreen = document.createElement('div'); startScreen.id = 'start-screen'; const gameTitle = document.createElement('h1'); gameTitle.textContent = 'Santa Sleigh Arc Runner'; startScreen.appendChild(gameTitle); const startButton = document.createElement('button'); startButton.id = 'start-button'; startButton.textContent = 'Start Game'; startScreen.appendChild(startButton); // Add elements to the document document.body.appendChild(uiContainer); document.body.appendChild(gameOverElement); document.body.appendChild(startScreen); return { scoreElement, distanceElement, energyBar, restartButton, gameOverElement, startScreen, startButton }; } // Create UI before starting the game const uiElements = createUI(); // Initialize game without starting it function initGame() { try { console.log("Initializing game with Three.js version:", THREE.REVISION); // Define time of day settings const timeOfDaySettings = { morning: { backgroundColor: 0x87ceeb, // Sky blue fogColor: 0x87ceeb, ambientColor: 0xc4e0f9, ambientIntensity: 0.5, directionalColor: 0xffffee, directionalIntensity: 1.2, fillColor: 0xfff0e5, fillIntensity: 0.4 }, afternoon: { backgroundColor: 0x1a2b43, // Deep blue fogColor: 0x1a2b43, ambientColor: 0x6b88c9, ambientIntensity: 0.4, directionalColor: 0xffffee, directionalIntensity: 1.0, fillColor: 0xccccff, fillIntensity: 0.4 }, sunset: { backgroundColor: 0xff7e33, // Orange sunset fogColor: 0xff7e33, ambientColor: 0xffb18c, ambientIntensity: 0.3, directionalColor: 0xffaa66, directionalIntensity: 0.8, fillColor: 0xffe0bb, fillIntensity: 0.5 }, night: { backgroundColor: 0x0d1530, // Dark blue night fogColor: 0x0d1530, ambientColor: 0x2a3c61, ambientIntensity: 0.2, directionalColor: 0xaabbff, directionalIntensity: 0.5, fillColor: 0x4466aa, fillIntensity: 0.3 } }; // Function to randomly select a time of day function getRandomTimeOfDay() { const times = Object.keys(timeOfDaySettings); const randomIndex = Math.floor(Math.random() * times.length); return times[randomIndex]; } // Current time of day let currentTimeOfDay = getRandomTimeOfDay(); // Function to apply time of day settings function applyTimeOfDaySettings(scene, timeOfDay) { const settings = timeOfDaySettings[timeOfDay]; // Apply to scene background and fog scene.background = new Color(settings.backgroundColor); scene.fog = new FogExp2(settings.fogColor, 0.0015); // Update lights if (scene.userData.ambientLight) { scene.userData.ambientLight.color.setHex(settings.ambientColor); scene.userData.ambientLight.intensity = settings.ambientIntensity; } if (scene.userData.directionalLight) { scene.userData.directionalLight.color.setHex(settings.directionalColor); scene.userData.directionalLight.intensity = settings.directionalIntensity; } if (scene.userData.fillLight) { scene.userData.fillLight.color.setHex(settings.fillColor); scene.userData.fillLight.intensity = settings.fillIntensity; } // Store current time of day scene.userData.currentTimeOfDay = timeOfDay; console.log(`Time of day set to: ${timeOfDay}`); } // Create renderer with post-processing capabilities let renderer; try { // Check if WebGL is supported if (!window.WebGLRenderingContext) { throw new Error("WebGL not supported"); } // Try creating a renderer with antialiasing renderer = new WebGLRenderer({ antialias: true, powerPreference: "high-performance", alpha: true, // Try with transparent background canvas: document.createElement('canvas') }); console.log("WebGL Renderer created successfully"); } catch (err) { console.error("Error creating WebGL renderer:", err); // Fallback to basic renderer try { renderer = new WebGLRenderer({ antialias: false, precision: 'lowp' }); console.log("Fallback renderer created"); } catch (fallbackErr) { console.error("Critical rendering error:", fallbackErr); throw new Error("Could not initialize WebGL renderer: " + fallbackErr.message); } } // Configure renderer renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Optimize for performance renderer.shadowMap.enabled = true; renderer.shadowMap.type = PCFSoftShadowMap; renderer.setClearColor(0x000000, 1); // Force depth testing to ensure proper z-ordering renderer.getContext().clearDepth(1.0); renderer.getContext().enable(renderer.getContext().DEPTH_TEST); renderer.getContext().depthFunc(renderer.getContext().LEQUAL); // Enable alpha blending for transparent objects renderer.getContext().enable(renderer.getContext().BLEND); renderer.getContext().blendFunc( renderer.getContext().SRC_ALPHA, renderer.getContext().ONE_MINUS_SRC_ALPHA ); // Add the renderer to the document document.body.appendChild(renderer.domElement); // Ensure the canvas is positioned correctly (might be hidden or misaligned) renderer.domElement.style.position = 'fixed'; renderer.domElement.style.top = '0'; renderer.domElement.style.left = '0'; renderer.domElement.style.width = '100%'; renderer.domElement.style.height = '100%'; renderer.domElement.style.zIndex = '0'; // Behind UI elements // Force renderer to clear the canvas renderer.clear(); // Check renderer capabilities and status console.log("Renderer initialized:", { domElement: renderer.domElement, context: renderer.getContext(), size: `${renderer.domElement.width}x${renderer.domElement.height}`, vr: renderer.xr ? "supported" : "not supported", }); // Scene setup with atmospheric fog const scene = new Scene(); // Camera: positioned to get a good view of Santa with Earth below const camera = new PerspectiveCamera( 45, // Restore original narrower FOV window.innerWidth / window.innerHeight, 1, 5000 ); // Restore original camera position camera.position.set(-50, 450, 120); camera.lookAt(new Vector3(30, 400, 0)); // Look slightly ahead of Santa scene.userData.camera = camera; // Enhanced lighting to match the reference image // Ambient light for base illumination const ambientLight = new AmbientLight(0x6b88c9, 0.4); // Subtle blue tint scene.add(ambientLight); scene.userData.ambientLight = ambientLight; // Main directional light (from above/behind like in reference) const directionalLight = new DirectionalLight(0xffffee, 1.0); directionalLight.position.set(200, 600, -400); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 10; directionalLight.shadow.camera.far = 1200; directionalLight.shadow.camera.left = -500; directionalLight.shadow.camera.right = 500; directionalLight.shadow.camera.top = 500; directionalLight.shadow.camera.bottom = -500; scene.add(directionalLight); scene.userData.directionalLight = directionalLight; // Add soft fill light from front to illuminate Santa const fillLight = new DirectionalLight(0xccccff, 0.4); fillLight.position.set(-100, 200, 300); scene.add(fillLight); scene.userData.fillLight = fillLight; // Add subtle rim light to highlight edges const rimLight = new DirectionalLight(0xffffee, 0.3); rimLight.position.set(100, 100, -300); scene.add(rimLight); scene.userData.rimLight = rimLight; // Apply initial time of day settings applyTimeOfDaySettings(scene, currentTimeOfDay); // Core game components - initialize in correct order with required dependencies const environment = new Environment(scene); const effects = new Effects(scene); const obstacles = new Obstacles(scene, environment); // Create Santa with all dependencies const santa = new Santa(scene, camera, obstacles, effects); // Create the snow system for falling snow const snow = new Snow(scene); // Log scene contents to help debug console.log("Scene children:", scene.children); console.log("Santa position:", santa.position); console.log("Camera position:", camera.position); // Create custom game loop with UI elements class CustomGameLoop extends GameLoop { constructor(renderer, scene, camera, environment, santa, obstacles, effects, snow, uiElements) { super(renderer, scene, camera, environment, santa, obstacles, effects, snow); // Override UI elements with our dynamically created ones this.scoreElement = uiElements.scoreElement; this.distanceElement = uiElements.distanceElement; this.energyElement = uiElements.energyBar; this.restartBtn = uiElements.restartButton; this.gameOverElement = uiElements.gameOverElement; // Hide game over initially if (this.gameOverElement) { this.gameOverElement.style.display = 'none'; } } } // Create game loop but don't start it yet const gameLoop = new CustomGameLoop( renderer, scene, camera, environment, santa, obstacles, effects, snow, uiElements ); // Use relative mouse position for smoother control function onPointerMove(event) { // Calculate relative position from 0 to 1 const y = 1 - (event.clientY / window.innerHeight); const x = event.clientX / window.innerWidth; // Use the new setTargetFromMouse method santa.setTargetFromMouse(x, y); } window.addEventListener('pointermove', onPointerMove); // Touch controls for mobile function onTouchMove(event) { if (event.touches.length > 0) { const touch = event.touches[0]; const y = 1 - (touch.clientY / window.innerHeight); const x = touch.clientX / window.innerWidth; // Use the new setTargetFromMouse method santa.setTargetFromMouse(x, y); // Prevent scrolling event.preventDefault(); } } window.addEventListener('touchmove', onTouchMove, { passive: false }); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Restart button event listener uiElements.restartButton.addEventListener('click', () => { // Change time of day randomly on restart currentTimeOfDay = getRandomTimeOfDay(); applyTimeOfDaySettings(scene, currentTimeOfDay); // Use the reset method instead of reloading the page gameLoop.reset(); }); // Start button event listener uiElements.startButton.addEventListener('click', () => { // Hide start screen uiElements.startScreen.style.display = 'none'; // Start the game loop gameLoop.start(); }); // Function to render the start screen function renderStartScreen() { try { console.log("Rendering start screen..."); // Make sure all objects in the scene are visible scene.traverse(object => { if (object.isMesh || object.isGroup) { object.visible = true; } }); // Debug log scene details console.log("Scene information:", { childCount: scene.children.length, cameraPos: camera.position, rendererSize: `${renderer.domElement.width}x${renderer.domElement.height}` }); // Force clear with all buffers renderer.clear(true, true, true); // Render scene renderer.render(scene, camera); // Continue loop if (uiElements.startScreen.style.display !== 'none') { requestAnimationFrame(renderStartScreen); } else { console.log("Start screen hidden, stopping render loop"); } } catch (error) { console.error("Error rendering start screen:", error); // Try to continue anyway if (uiElements.startScreen.style.display !== 'none') { setTimeout(() => { requestAnimationFrame(renderStartScreen); }, 1000); } } } // Start rendering the scene (but not the game loop) renderStartScreen(); // Make the game loop available to outside code return { gameLoop, scene, camera, santa, environment, obstacles, effects, snow, currentTimeOfDay, getRandomTimeOfDay, applyTimeOfDaySettings }; } catch (error) { console.error('Error initializing game:', error); return null; } } // Initialize the game try { const game = initGame(); console.log("Game initialized successfully."); if (game && game.renderer) { // Add debug functions to window window.debugGame = function() { console.log("Running debug render..."); if (game.scene && game.camera) { console.log("Scene children count:", game.scene.children.length); console.log("Camera position:", game.camera.position); console.log("Santa position:", game.santa ? game.santa.position : "Santa not found"); // Force a render game.renderer.render(game.scene, game.camera); return "Debug render completed"; } return "Scene or camera not available"; }; // Create a fallback render loop in case the normal loop isn't working window.startFallbackRender = function() { console.log("Starting fallback render loop"); let isRunning = true; function animate() { if (!isRunning) return; if (game.renderer && game.scene && game.camera) { game.renderer.render(game.scene, game.camera); } requestAnimationFrame(animate); } animate(); return function stopFallback() { isRunning = false; console.log("Fallback render stopped"); }; }; // Try a debug render immediately window.debugGame(); // Auto-start fallback renderer if debug parameter is in URL if (window.location.search.includes('debug=true')) { window.fallbackStop = window.startFallbackRender(); } // Fix z-index and positioning issues if (game.renderer && game.renderer.domElement) { // Ensure the canvas is properly positioned const canvas = game.renderer.domElement; canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.zIndex = '0'; // Behind UI // Make sure canvas is in the correct position in the DOM document.body.insertBefore(canvas, document.body.firstChild); // Fix any UI elements to be on top of the canvas const uiElements = document.querySelectorAll('#ui, #score, #distance, #energy-container, #restart, #game-over, #start-screen'); uiElements.forEach(el => { if (el) { el.style.position = 'relative'; el.style.zIndex = '10'; } }); console.log("Canvas positioning fixed"); } } // Expose game to window for debugging window.santaGame = game; } catch (error) { console.error("Failed to initialize game:", error); // Display error message to user const errorDiv = document.createElement('div'); errorDiv.style.position = 'absolute'; errorDiv.style.top = '50%'; errorDiv.style.left = '50%'; errorDiv.style.transform = 'translate(-50%, -50%)'; errorDiv.style.color = 'white'; errorDiv.style.fontFamily = 'sans-serif'; errorDiv.style.fontSize = '16px'; errorDiv.style.textAlign = 'center'; errorDiv.style.backgroundColor = 'rgba(255, 0, 0, 0.8)'; errorDiv.style.padding = '20px'; errorDiv.style.borderRadius = '5px'; errorDiv.style.zIndex = '9999'; errorDiv.innerHTML = `

Error Loading Game

Please try refreshing the page.

Technical details: ${error.message}

`; document.body.appendChild(errorDiv); }