// scene.js import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { GameScene } from 'https://play.rosebud.ai/assets/gamescene.js?AhKt' window.THREE = THREE window.OrbitControls = OrbitControls window.EffectComposer = EffectComposer window.RenderPass = RenderPass window.UnrealBloomPass = UnrealBloomPass window.SMAAPass = SMAAPass // Game constants export const GAME_CONSTANTS = { CAMERA: { FOV: 75, NEAR: 0.1, FAR: 1000, INITIAL_POSITION: new THREE.Vector3(100, 100, 200) }, CONTROLS: { MIN_DISTANCE: 50, MAX_DISTANCE: 500, MAX_POLAR_ANGLE: Math.PI / 2 }, RENDERER: { CLEAR_COLOR: 0x87CEEB, PIXEL_RATIO: window.devicePixelRatio }, ENEMY: { MIN_SPAWN_RADIUS: 330, MAX_SPAWN_RADIUS: 380, TARGET_RANGE: 100, BASE_RANGE: 100, BASE_SPAWN_INTERVAL: 2000, MIN_SPAWN_INTERVAL: 400, MAX_ENEMIES: 8, MAX_ENEMIES_LATE: 15 }, TOWER: { INITIAL_HEALTH: 10, DAMAGE: 1, SHOT_INTERVAL: 1000 }, DAY_LENGTH: 90 }; // Enemy parameters const ENEMY_PARAMS = { minSpawnRadius: 330, maxSpawnRadius: 380, spawnHeight: 330, spawnHeightVariation: 50 }; export class Enemy extends THREE.Mesh { static COLORS = { GREEN: 0x00ff00, BLUE: 0x0000ff, RED: 0xff0000, BLACK: 0x000000 }; static TYPE_PROPERTIES = { GREEN: { health: 1, speed: 15, mass: 2, scale: 1 }, BLUE: { health: 2, speed: 15, mass: 4, scale: 1 }, RED: { health: 3, speed: 15, mass: 6, scale: 1 }, BLACK: { health: 20, speed: 7.5, mass: 25, scale: 5 } }; constructor(type = 'GREEN') { const geometry = new THREE.SphereGeometry(10, 16, 16); const material = new THREE.MeshStandardMaterial({ color: Enemy.COLORS[type] }); super(geometry, material); const properties = Enemy.TYPE_PROPERTIES[type]; this.castShadow = true; this.receiveShadow = true; this.health = properties.health; this.originalHealth = properties.health; this.speed = properties.speed; this.mass = properties.mass; this.scale.set(properties.scale, properties.scale, properties.scale); this.velocity = new THREE.Vector3(); this.momentum = new THREE.Vector3(); this.recoveryRate = 0.15 - (properties.health * 0.02); this.bounce = { velocity: 0, dampening: 0.75, groundLevel: 10, isGrounded: false, initialHeight: 0, lastBounceHeight: 0, bounceThreshold: 0.5 }; this.knockback = { startPosition: null, targetPosition: null, progress: 0, duration: 0.3, active: false, easing: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t }; } spawn() { const angle = Math.random() * Math.PI * 2; const spawnRadius = ENEMY_PARAMS.minSpawnRadius + (Math.random() * (ENEMY_PARAMS.maxSpawnRadius - ENEMY_PARAMS.minSpawnRadius)); this.position.x = Math.cos(angle) * spawnRadius; const spawnHeight = ENEMY_PARAMS.spawnHeight + (Math.random() * ENEMY_PARAMS.spawnHeightVariation); this.position.y = spawnHeight; this.position.z = Math.sin(angle) * spawnRadius; this.bounce.initialHeight = spawnHeight; this.bounce.velocity = 0; this.bounce.isGrounded = false; } updateColor() { if (this.health > 2) { this.material.color.setHex(Enemy.COLORS.RED); } else if (this.health > 1) { this.material.color.setHex(Enemy.COLORS.BLUE); } else if (this.health > 0) { this.material.color.setHex(Enemy.COLORS.GREEN); } } takeDamage(amount) { const previousHealth = this.health; this.health = Math.max(0, this.health - amount); this.updateColor(); return this.health === 0; } getParticleColor() { const currentColor = this.material.color.getHex(); return Object.entries(Enemy.COLORS).find(([_, color]) => color === currentColor)[1]; } } // Initialize key states and power-up states const keysPressed = { up: false, down: false, left: false, right: false, jump: false }; // Initialize power-up states const powerUpStates = { doubleShot: false, speedBoost: false, damageBoost: false }; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; // Initialize global arrays and variables const archerTowers = []; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen // Initialize pause state let isPaused = false; const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = `

Loading... 0%

`; parentDiv.appendChild(loadingScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; // Initialize the scene const scene = new THREE.Scene(); // Game difficulty settings let currentDifficulty = 'Normal'; let difficultyTimeOffset = 0; const difficultyButtons = {}; // Game speed control let gameSpeedMultiplier = 1; // Score thresholds for SP rewards const scoreThresholds = [10, 20, 35, 50, 75, 100, 125, 150, 180]; // Clock for animation and day/night cycle const clock = new THREE.Clock(); // Particle System for death effects class ParticleSystem { constructor(color, count = 100) { this.particles = []; this.color = color; for (let i = 0; i < count; i++) { const geometry = new THREE.SphereGeometry(0.8, 12, 12); const material = new THREE.MeshBasicMaterial({ color: this.color, transparent: true, opacity: 1 }); const particle = new THREE.Mesh(geometry, material); particle.visible = false; particle.velocity = new THREE.Vector3(); particle.lifeTime = 0; this.particles.push(particle); scene.add(particle); } } emit(position) { this.particles.forEach(particle => { if (!particle.visible) { particle.position.copy(position); particle.visible = true; particle.scale.set(1, 1, 1); particle.material.opacity = 1; particle.lifeTime = 1; // Enhanced explosion velocity const angle = Math.random() * Math.PI * 2; const verticalAngle = Math.random() * Math.PI - Math.PI / 2; const speed = 15 + Math.random() * 20; // Increased speed range // Calculate velocities with spherical distribution particle.velocity.set( Math.cos(angle) * Math.cos(verticalAngle) * speed, Math.sin(verticalAngle) * speed * 1.5, // Increased vertical spread Math.sin(angle) * Math.cos(verticalAngle) * speed ); // Randomize initial positions slightly for more spread particle.position.add( new THREE.Vector3( (Math.random() - 0.5) * 3, (Math.random() - 0.5) * 3, (Math.random() - 0.5) * 3 ) ); } }); } update(delta) { this.particles.forEach(particle => { if (particle.visible) { particle.position.add(particle.velocity.clone().multiplyScalar(delta)); particle.velocity.y -= 25 * delta; // Enhanced gravity effect particle.lifeTime -= delta * 1.5; // Slower fade out // Add rotation for more dynamic movement particle.rotation.x += delta * particle.velocity.length() * 0.2; particle.rotation.z += delta * particle.velocity.length() * 0.2; // Fade out and scale down particle.material.opacity = particle.lifeTime; const scale = particle.lifeTime * particle.lifeTime; particle.scale.set(scale, scale, scale); if (particle.lifeTime <= 0) { particle.visible = false; } } }); } } // Create particle systems for different enemy types const greenParticles = new ParticleSystem(0x00ff00); const blueParticles = new ParticleSystem(0x0000ff); const redParticles = new ParticleSystem(0xff0000); const DAY_LENGTH = 90; // 90 seconds per day const sunRotationSpeed = (2 * Math.PI) / DAY_LENGTH; // Radians per second let dayTime = 0; // Track current time of day // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(100, 100, 200); // Better viewing angle camera.lookAt(0, 0, 0); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderer.setClearColor(0x87CEEB, 1); // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x63B8FF); // More vibrant sky blue const groundColor = new THREE.Color(0x98FB98); // Brighter green ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(2000, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, depthWrite: false, fog: false }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup // Initialize the camera controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 2; controls.minDistance = 50; controls.maxDistance = 500; // Create flat terrain function createTerrain() { const size = 1000; // Much larger terrain // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/Capture.PNG?gXpm'); texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; texture.encoding = THREE.sRGBEncoding; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Create distance rings and labels function createDistanceRings() { const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.3, side: THREE.DoubleSide }); // Create rings for each 50-unit interval up to 300 for (let radius = 50; radius <= 300; radius += 50) { // Create ring const ringGeometry = new THREE.TorusGeometry(radius, 0.5, 16, 100); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; // Rotate to lay flat ring.position.y = 0.2; // Slightly above ground scene.add(ring); // Create text label const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 128; canvas.height = 64; context.fillStyle = 'white'; context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(`${radius}U`, 64, 32); const texture = new THREE.CanvasTexture(canvas); const labelMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true, opacity: 0.8 }); const label = new THREE.Sprite(labelMaterial); // Position label next to ring const labelAngle = Math.PI / 4; // 45 degrees label.position.set( Math.cos(labelAngle) * radius, 5, // Height above ground Math.sin(labelAngle) * radius ); // Scale the label based on distance const baseScale = 10; const scaleMultiplier = 1 + (radius / 300); // Larger text for further distances label.scale.set(baseScale * scaleMultiplier, baseScale * scaleMultiplier / 2, 1); scene.add(label); } } // Setup improved lighting system // Add ambient light first const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); // Create Sun mesh const sunGeometry = new THREE.CircleGeometry(20, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffdd00, side: THREE.DoubleSide }); const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial); sunMesh.castShadow = false; scene.add(sunMesh); // Create Moon mesh const moonGeometry = new THREE.CircleGeometry(15, 32); const moonMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide }); const moonMesh = new THREE.Mesh(moonGeometry, moonMaterial); moonMesh.castShadow = false; scene.add(moonMesh); // Configure main directional (sun) light const sunLight = new THREE.DirectionalLight(0xffffee, 1.0); sunLight.position.set(100, 300, 100); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 1000; sunLight.shadow.camera.left = -500; sunLight.shadow.camera.right = 500; sunLight.shadow.camera.top = 500; sunLight.shadow.camera.bottom = -500; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light with adjusted intensities const hemiLight = new THREE.HemisphereLight( new THREE.Color(0x87CEEB), // Sky color new THREE.Color(0x707070), // Ground color 0.6 // Reduced intensity ); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); // Create moonlight const moonLight = new THREE.DirectionalLight(0xaaaaaa, 0.3); moonLight.position.set(-100, -300, 100); moonLight.castShadow = true; moonLight.shadow.mapSize.width = 2048; moonLight.shadow.mapSize.height = 2048; moonLight.shadow.camera.near = 10; moonLight.shadow.camera.far = 1000; moonLight.shadow.camera.left = -500; moonLight.shadow.camera.right = 500; moonLight.shadow.camera.top = 500; moonLight.shadow.camera.bottom = -500; moonLight.shadow.bias = -0.001; scene.add(moonLight); // Enemy parameters and game progression const enemyParams = { minSpawnRadius: 330, // Minimum spawn distance from tower maxSpawnRadius: 380, // Maximum spawn distance from tower targetRange: 100, // Initial tower target range baseRange: 100, // Base range value for calculating upgrades baseSpawnInterval: 2000, // Initial spawn interval (slower start) minSpawnInterval: 400, // Minimum spawn interval at peak difficulty maxEnemies: 8, // Initial max enemies maxEnemiesLate: 15, // Max enemies at peak difficulty gameStartTime: Date.now(), // Track when the game started }; // Create initial scene const terrain = createTerrain(); // Create distance rings createDistanceRings(); // Create range indicator ring const rangeRingGeometry = new THREE.TorusGeometry(enemyParams.targetRange, 0.8, 16, 100); const rangeRingMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, emissive: 0xffd700, emissiveIntensity: 0.6, transparent: true, opacity: 0.4, side: THREE.DoubleSide, metalness: 0.7, roughness: 0.3 }); const rangeRing = new THREE.Mesh(rangeRingGeometry, rangeRingMaterial); rangeRing.rotation.x = Math.PI / 2; // Rotate to lay flat on the ground rangeRing.position.y = 0.1; // Slightly above ground to prevent z-fighting scene.add(rangeRing); // Create a medieval tower function createTower() { const towerHeight = 30; const towerRadius = 5; // Create tower body const towerGeometry = new THREE.CylinderGeometry(towerRadius, towerRadius, towerHeight, 32); const texture = textureLoader.load('https://play.rosebud.ai/assets/Capture.PNG?gXpm'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(2, 4); // Adjust repeat for the tower body // Create array to store archer towers const archerTowers = []; const towerMaterial = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1 }); const towerBody = new THREE.Mesh(towerGeometry, towerMaterial); towerBody.castShadow = true; towerBody.receiveShadow = true; towerBody.position.y = towerHeight / 2; scene.add(towerBody); // Create the cone for the roof const roofGeometry = new THREE.ConeGeometry(towerRadius * 1.5, 10, 32); const roofTexture = textureLoader.load('https://play.rosebud.ai/assets/Capture.PNG?gXpm'); roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping; roofTexture.repeat.set(2, 1); // Adjust repeat for the roof const roofMaterial = new THREE.MeshStandardMaterial({ map: roofTexture, roughness: 0.8, metalness: 0.1 }); const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial); roofMesh.position.y = towerHeight + 5; roofMesh.castShadow = true; scene.add(roofMesh); // Create battlements on top const battlementWidth = 2; const battlementHeight = 2; const battlementGeometry = new THREE.BoxGeometry(battlementWidth, battlementHeight, battlementWidth); const battlementTexture = textureLoader.load('https://play.rosebud.ai/assets/Capture.PNG?gXpm'); battlementTexture.wrapS = battlementTexture.wrapT = THREE.RepeatWrapping; battlementTexture.repeat.set(1, 1); const battlementMaterial = new THREE.MeshStandardMaterial({ map: battlementTexture, roughness: 0.8, metalness: 0.1 }); for (let i = 0; i < 8; i++) { const battlement = new THREE.Mesh(battlementGeometry, battlementMaterial); battlement.position.y = towerHeight - 1; battlement.position.x = (towerRadius - 0.5) * Math.cos(i * Math.PI / 4); battlement.position.z = (towerRadius - 0.5) * Math.sin(i * Math.PI / 4); battlement.castShadow = true; battlement.receiveShadow = true; scene.add(battlement); } return { body: towerBody, roof: roofMesh }; } // Function to create an archer tower function createArcherTower() { const towerGroup = new THREE.Group(); // Create base platform (circular) const platformGeometry = new THREE.CylinderGeometry(3, 3, 1, 8); const platformMaterial = new THREE.MeshStandardMaterial({ map: textureLoader.load('https://play.rosebud.ai/assets/Capture.PNG?gXpm'), roughness: 0.8, metalness: 0.1 }); const platform = new THREE.Mesh(platformGeometry, platformMaterial); // Create small tower const miniTowerGeometry = new THREE.CylinderGeometry(2, 2, 8, 8); const miniTower = new THREE.Mesh(miniTowerGeometry, platformMaterial); miniTower.position.y = 4.5; // Create roof const roofGeometry = new THREE.ConeGeometry(2.5, 3, 8); const roof = new THREE.Mesh(roofGeometry, platformMaterial); roof.position.y = 10; // Add all parts to the group towerGroup.add(platform); towerGroup.add(miniTower); towerGroup.add(roof); // Set initial scale to 0 towerGroup.scale.set(0.1, 0.1, 0.1); return towerGroup; } // Global updateArcherTowers function const updateArcherTowers = (rateLevel) => { const targetCount = Math.max(0, rateLevel - 1); // Start spawning at rate level 2 // Add new towers if needed while (archerTowers.length < targetCount) { const tower = createArcherTower(); const angle = (archerTowers.length * Math.PI * 2) / 10; // Distribute around main tower const radius = 15; // Distance from main tower // Set position tower.position.x = Math.cos(angle) * radius; tower.position.z = Math.sin(angle) * radius; tower.position.y = 0; scene.add(tower); archerTowers.push(tower); // Animate tower appearing const targetScale = 0.5; const duration = 1.0; let startTime = Date.now(); const animateTower = () => { const elapsed = (Date.now() - startTime) / 1000; const progress = Math.min(elapsed / duration, 1); // Ease out cubic const scale = targetScale * (1 - Math.pow(1 - progress, 3)); tower.scale.set(scale, scale, scale); if (progress < 1) { requestAnimationFrame(animateTower); } }; animateTower(); } // Remove excess towers if rate level decreased while (archerTowers.length > targetCount) { const tower = archerTowers.pop(); scene.remove(tower); } }; // Visual upgrade elements array const visualUpgrades = { rate: [], // Array to hold rate upgrade visual elements damage: [], // Array to hold damage upgrade visual elements range: [] // Array to hold range upgrade visual elements }; // Function to create visual upgrade elements function createVisualUpgrade(type, level) { const upgrade = new THREE.Group(); switch (type) { case 'rate': // Create archer positions/platforms const platform = new THREE.Mesh( new THREE.CylinderGeometry(1, 1, 0.5, 8), new THREE.MeshStandardMaterial({ color: 0x8B4513 }) ); platform.position.y = 25 + (level * 2); // Stack platforms vertically platform.position.x = 4 * Math.cos(level * Math.PI / 2); platform.position.z = 4 * Math.sin(level * Math.PI / 2); upgrade.add(platform); break; case 'damage': // Create glowing crystal/weapon racks const crystal = new THREE.Mesh( new THREE.OctahedronGeometry(0.5), new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 0.5 }) ); crystal.position.y = 20 + (level * 3); crystal.position.x = 3 * Math.cos(level * Math.PI / 2); crystal.position.z = 3 * Math.sin(level * Math.PI / 2); upgrade.add(crystal); break; case 'range': // Create scout towers/viewing platforms const tower = new THREE.Mesh( new THREE.CylinderGeometry(0.5, 0.7, 2, 8), new THREE.MeshStandardMaterial({ color: 0x808080 }) ); tower.position.y = 15 + (level * 2.5); tower.position.x = 5 * Math.cos(level * Math.PI / 2); tower.position.z = 5 * Math.sin(level * Math.PI / 2); upgrade.add(tower); break; } upgrade.scale.set(0.1, 0.1, 0.1); // Start small scene.add(upgrade); return upgrade; } // Function to update visual upgrades function updateVisualUpgrades(type, level) { // Ensure array exists for this type if (!visualUpgrades[type]) visualUpgrades[type] = []; // Add new upgrade if needed if (level > visualUpgrades[type].length) { const newUpgrade = createVisualUpgrade(type, visualUpgrades[type].length); visualUpgrades[type].push(newUpgrade); } // Update all upgrades of this type visualUpgrades[type].forEach((upgrade, index) => { const targetScale = index < level ? 1.0 : 0.1; upgrade.scale.lerp(new THREE.Vector3(targetScale, targetScale, targetScale), 0.1); }); } // Create the tower const tower = createTower(); // Tower shooting parameters let towerDamage = 1; // Initial damage let killCount = 0; // Number of kills let shotInterval = 1000; // Time between shots in milliseconds let targetEnemyType = 'closest'; // Can be 'closest' or 'highestHP' let shootArrowInterval; // Declare shootArrowInterval let towerHealth = 10; // Tower's initial health // Function to choose the target enemy function chooseTargetEnemy(enemiesInRange) { let targetEnemy = null; let targetDistance = Infinity; enemiesInRange.forEach((enemy) => { const distance = enemy.position.distanceTo(tower.body.position); if (targetEnemyType === 'closest') { if (distance < targetDistance) { targetDistance = distance; targetEnemy = enemy; } } else if (targetEnemyType === 'highestHP') { if (!targetEnemy || enemy.health > targetEnemy.health || (enemy.health === targetEnemy.health && distance < targetDistance)) { targetDistance = distance; targetEnemy = enemy; } } }); return targetEnemy; } // Function to shoot arrows // Array to store active arrows and their flight data const activeArrows = []; function shootArrow() { if (!canShootArrow) return; // Filter enemies within range - increase detection range to match visual range const enemiesInRange = enemies.filter(enemy => { const distanceToTower = new THREE.Vector2(enemy.position.x, enemy.position.z).length(); return distanceToTower <= enemyParams.targetRange * 1.5; }); if (enemiesInRange.length === 0) { return; } // Sort enemies by distance for both primary and secondary targets const sortedEnemies = [...enemiesInRange].sort((a, b) => { const distA = new THREE.Vector2(a.position.x, a.position.z).length(); const distB = new THREE.Vector2(b.position.x, b.position.z).length(); return distA - distB; }); const primaryTarget = sortedEnemies[0]; const secondaryTarget = powerUpStates.doubleShot && sortedEnemies.length > 1 ? sortedEnemies[1] : null; if (primaryTarget) { canShootArrow = false; lastShotTime = Date.now(); console.log('Launching arrow at primary target'); // Base dimensions for arrow components const arrowRadius = 0.15 * 4; // 4x larger arrow const arrowLength = 4 * 4; // 4x longer arrow // Calculate the position at the bottom of the cone for shooting arrows const arrowPosition = new THREE.Vector3( tower.body.position.x, 30, // Tower height tower.body.position.z ); // Create and launch arrow at primary target createAndLaunchArrow(primaryTarget, arrowPosition); if (powerUpStates.doubleShot && secondaryTarget) { console.log('Double Shot active - launching arrow at secondary target'); createAndLaunchArrow(secondaryTarget, arrowPosition); } else if (powerUpStates.doubleShot) { console.log('Double Shot active but no secondary target available'); } // Helper function to create and launch arrow function createAndLaunchArrow(target, startPosition) { const arrowLength = 4; // Slightly shorter arrow const arrowGroup = createArrowMesh(arrowLength, currentDamageIndex); arrowGroup.position.copy(startPosition); scene.add(arrowGroup); // Calculate distance and flight time const distanceToTarget = startPosition.distanceTo(target.position); const baseSpeed = 100 * gameSpeedMultiplier; const minTime = 0.1; const maxTime = 0.5; const speedAdjustedMinTime = minTime / gameSpeedMultiplier; const speedAdjustedMaxTime = maxTime / gameSpeedMultiplier; let timeToHit; if (distanceToTarget <= 35) { timeToHit = Math.max(speedAdjustedMinTime, distanceToTarget / baseSpeed); } else if (distanceToTarget > 80) { const normalTime = (distanceToTarget / baseSpeed) * 0.5; const scaleFactor = 1 + (Math.min(distanceToTarget, 120) - 80) / 80; timeToHit = Math.min(speedAdjustedMaxTime, normalTime * scaleFactor); } else { timeToHit = (distanceToTarget / baseSpeed) * 0.5; } // Store arrow data activeArrows.push({ mesh: arrowGroup, target: target, startPos: startPosition.clone(), startTime: Date.now(), flightTime: timeToHit * 1000 }); } // Helper function to create arrow mesh function createArrowMesh(arrowLength, damageIndex) { const baseShaftRadius = arrowRadius * 4; const baseShaftLength = arrowLength * 0.7 * 4; const baseHeadRadius = arrowRadius * 2 * 4; const baseHeadLength = arrowLength * 0.2 * 4; const baseFletchingRadius = arrowRadius * 3 * 4; const baseFletchingLength = arrowLength * 0.1 * 4; const damageScale = Math.pow(2, damageIndex); const arrowGroup = new THREE.Group(); // Create shaft const shaftGeometry = new THREE.CylinderGeometry( baseShaftRadius * damageScale, baseShaftRadius * damageScale, baseShaftLength * damageScale, 8 ); const shaftMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const shaft = new THREE.Mesh(shaftGeometry, shaftMaterial); // Create head const headGeometry = new THREE.ConeGeometry( baseHeadRadius * damageScale, baseHeadLength * damageScale, 8 ); const headMaterial = new THREE.MeshStandardMaterial({ color: 0xC0C0C0 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = (baseShaftLength * damageScale) / 2; // Create fletching const fletchingGeometry = new THREE.ConeGeometry( baseFletchingRadius * damageScale, baseFletchingLength * damageScale, 3 ); const fletchingMaterial = new THREE.MeshStandardMaterial({ color: 0xFF0000 }); const fletching = new THREE.Mesh(fletchingGeometry, fletchingMaterial); fletching.position.y = -arrowLength * 0.35; fletching.rotation.x = Math.PI; arrowGroup.add(shaft); arrowGroup.add(head); arrowGroup.add(fletching); arrowGroup.rotation.x = Math.PI / 2; return arrowGroup; } // Remove redundant arrowPosition calculation since it's now defined above // Base dimensions for arrow components const baseShaftRadius = arrowRadius; const baseShaftLength = arrowLength * 0.7; const baseHeadRadius = arrowRadius * 2; const baseHeadLength = arrowLength * 0.2; const baseFletchingRadius = arrowRadius * 3; const baseFletchingLength = arrowLength * 0.1; // Calculate overall scale based on damage level (much larger scaling) const damageScale = Math.pow(2, currentDamageIndex); // Exponential growth: 1, 2, 4, 8, 16, etc. // Create arrow shaft with proportional scaling const shaftGeometry = new THREE.CylinderGeometry( baseShaftRadius * damageScale, baseShaftRadius * damageScale, baseShaftLength * damageScale, 8 ); const shaftMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // Brown wood color const shaft = new THREE.Mesh(shaftGeometry, shaftMaterial); // Create arrow head with proportional scaling const headGeometry = new THREE.ConeGeometry( baseHeadRadius * damageScale, baseHeadLength * damageScale, 8 ); const headMaterial = new THREE.MeshStandardMaterial({ color: 0xC0C0C0 }); // Silver color const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = (baseShaftLength * damageScale) / 2; // Position at front of shaft // Create arrow fletching (feathers) with proportional scaling const fletchingGeometry = new THREE.ConeGeometry( baseFletchingRadius * damageScale, baseFletchingLength * damageScale, 3 ); const fletchingMaterial = new THREE.MeshStandardMaterial({ color: 0xFF0000 }); // Red feathers const fletching = new THREE.Mesh(fletchingGeometry, fletchingMaterial); fletching.position.y = -arrowLength * 0.35; // Position at back of shaft fletching.rotation.x = Math.PI; // Flip the cone // Create arrow group const arrowGroup = new THREE.Group(); arrowGroup.add(shaft); arrowGroup.add(head); arrowGroup.add(fletching); arrowGroup.rotation.x = Math.PI / 2; // Rotate to point forward // Set initial position arrowGroup.position.copy(arrowPosition); scene.add(arrowGroup); // Calculate distance and flight time // Calculate distance to target const distanceToTarget = arrowPosition.distanceTo(primaryTarget.position); // Calculate time to hit based on distance with consistent scaling const baseSpeed = 100; // Increased base speed for better accuracy const minTime = 0.1; // Consistent minimum time const maxTime = 0.5; // Consistent maximum time // Adjust flight time based on game speed const speedAdjustedMinTime = minTime / gameSpeedMultiplier; const speedAdjustedMaxTime = maxTime / gameSpeedMultiplier; // Calculate distance-based time scaling let timeToHit; if (distanceToTarget <= 35) { // Close range: faster travel time timeToHit = Math.max(minTime, distanceToTarget / baseSpeed); } else if (distanceToTarget > 80) { // Long range: slower travel time (up to 1.5x but with reduced base time) const normalTime = (distanceToTarget / baseSpeed) * 0.5; // Reduce base time by half const scaleFactor = 1 + (Math.min(distanceToTarget, 120) - 80) / 80; // Max 1.5x timeToHit = Math.min(maxTime, normalTime * scaleFactor); } else { // Medium range: reduced time calculation (roughly half of original) timeToHit = (distanceToTarget / baseSpeed) * 0.5; } // Store arrow data activeArrows.push({ mesh: arrowGroup, target: primaryTarget, startPos: arrowPosition.clone(), startTime: Date.now(), flightTime: timeToHit * 1000, // Convert to milliseconds hasHit: false // Add hit flag }); } } // Helper function to calculate initial velocity for projectile motion function calculateInitialVelocity(start, end, time) { const dx = end.x - start.x; const dz = end.z - start.z; const dy = end.y - start.y; // Calculate required velocities for precise hitting const vx = dx / time; const vz = dz / time; // Calculate vertical velocity with gravity compensation // Using the equation: y = y0 + v0y*t - (1/2)gt^2 // Solving for v0y: v0y = (y - y0 + (1/2)gt^2)/t const g = 9.82; const vy = (dy + 0.5 * g * time * time) / time; // Calculate magnitude of velocity for distance scaling const velocityMagnitude = Math.sqrt(vx * vx + vy * vy + vz * vz); // Scale velocity based on distance const distanceScale = Math.min(2.0, Math.max(1.0, start.distanceTo(end) / 30)); return new THREE.Vector3( vx * distanceScale, vy * distanceScale, vz * distanceScale ); } // Function to handle arrow hits function handleArrowHit(arrow) { const enemy = arrow.target; const damageAmount = damageOptions[currentDamageIndex]; console.log('Arrow Hit:', { baseDamage: damageOptions[0], currentDamageIndex: currentDamageIndex, damageApplied: damageAmount, enemyHealthBefore: enemy.health, enemyType: enemy.material.color.getHex() === Enemy.COLORS.RED ? 'RED' : enemy.material.color.getHex() === Enemy.COLORS.BLUE ? 'BLUE' : 'GREEN' }); const isDead = enemy.takeDamage(damageAmount); console.log('After Hit:', { enemyHealthAfter: enemy.health, damageDealt: damageAmount, isDead: isDead }); // Calculate impact direction and apply knockback const arrowDirection = new THREE.Vector3().subVectors(enemy.position, arrow.mesh.position).normalize(); const knockbackForce = 25; const verticalFactor = Math.max(0.2, Math.abs(arrowDirection.y)); const horizontalFactor = Math.sqrt(1 - verticalFactor * verticalFactor); const impactForce = knockbackForce / enemy.mass; const knockbackVelocity = new THREE.Vector3( arrowDirection.x * impactForce * horizontalFactor, Math.max(arrowDirection.y, 0.1) * impactForce * verticalFactor, arrowDirection.z * impactForce * horizontalFactor ); enemy.momentum.add(knockbackVelocity); if (!enemy.bounce.isGrounded) { enemy.bounce.velocity = Math.max( enemy.bounce.velocity, knockbackVelocity.y * (1 / enemy.mass) ); } else { enemy.bounce.velocity = knockbackVelocity.y * (1 / enemy.mass); enemy.bounce.isGrounded = false; } enemy.knockback.startPosition = enemy.position.clone(); const targetPosition = enemy.position.clone().add( new THREE.Vector3(knockbackVelocity.x, 0, knockbackVelocity.z) ); enemy.knockback.targetPosition = targetPosition; enemy.knockback.progress = 0; enemy.knockback.duration = 0.3; enemy.knockback.active = true; if (arrow.target.health <= 0) { killCount++; if (killCount >= 100) { towerDamage++; killCount = 0; } } // Remove arrow scene.remove(arrow.mesh); activeArrows.splice(activeArrows.indexOf(arrow), 1); } // Function to update arrows function updateArrows() { for (let i = activeArrows.length - 1; i >= 0; i--) { const arrow = activeArrows[i]; if (arrow.hasHit) { scene.remove(arrow.mesh); activeArrows.splice(i, 1); continue; } const currentTime = Date.now(); const elapsedTime = (currentTime - arrow.startTime); const progress = Math.min((elapsedTime * gameSpeedMultiplier) / arrow.flightTime, 1); // Store previous position for collision checking const previousPosition = arrow.mesh.position.clone(); if (progress < 1) { // Calculate current position using linear interpolation for consistent speed const targetPos = arrow.target.position; const newPos = new THREE.Vector3(); // Linear motion for consistent speed newPos.x = arrow.startPos.x + (targetPos.x - arrow.startPos.x) * progress; newPos.z = arrow.startPos.z + (targetPos.z - arrow.startPos.z) * progress; // Improved ballistic arc calculation const distanceToTarget = arrow.startPos.distanceTo(targetPos); const maxArcHeight = Math.min(12, Math.max(4, distanceToTarget / 5)); // Use quadratic function for height to simulate gravity const heightProgress = 4 * progress * (1 - progress); // Quadratic curve peaks at 0.5 const heightOffset = maxArcHeight * heightProgress; newPos.y = arrow.startPos.y + (targetPos.y - arrow.startPos.y) * progress + heightOffset; // Check for ground collision if (newPos.y <= 0.5) { // Slightly above ground level to account for arrow size scene.remove(arrow.mesh); activeArrows.splice(i, 1); continue; } // Update arrow position arrow.mesh.position.copy(newPos); // Check for collision along arrow path const arrowVector = new THREE.Vector3().subVectors(newPos, previousPosition); const directionToTarget = new THREE.Vector3().subVectors(targetPos, previousPosition).normalize(); const dotProduct = arrowVector.dot(directionToTarget); // Calculate closest point along arrow path to target if (dotProduct > 0) { const closestPoint = previousPosition.clone().add(directionToTarget.multiplyScalar(dotProduct)); const distanceToClosest = closestPoint.distanceTo(targetPos); if (distanceToClosest <= 10 && !arrow.hasHit) { // Enemy radius for hit detection arrow.hasHit = true; handleArrowHit(arrow); break; } } // Update arrow orientation const direction = new THREE.Vector3().subVectors(targetPos, newPos).normalize(); const quaternion = new THREE.Quaternion(); quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction); arrow.mesh.quaternion.slerp(quaternion, 0.1); } else { // Arrow has reached target position const arrowPos = arrow.mesh.position; const targetPos = arrow.target.position; const enemyRadius = 10; // Match the enemy sphere radius // Calculate distance from arrow to enemy center, accounting for speed const distanceToTarget = arrowPos.distanceTo(targetPos); const speedMultiplierAdjustment = Math.min(2, Math.max(1, gameSpeedMultiplier)); const hitThreshold = enemyRadius * speedMultiplierAdjustment; if (distanceToTarget <= hitThreshold && !arrow.hasHit) { arrow.hasHit = true; handleArrowHit(arrow); break; } // Remove arrow if it missed scene.remove(arrow.mesh); activeArrows.splice(i, 1); } } } // Initialize shooting interval let canShootArrow = true; let lastShotTime = 0; function resetShootArrowTimer() { if (shootArrowInterval) { clearInterval(shootArrowInterval); } lastShotTime = Date.now(); shootArrowInterval = setInterval(() => { const currentTime = Date.now(); const adjustedInterval = shotInterval / gameSpeedMultiplier; if (currentTime - lastShotTime >= adjustedInterval) { canShootArrow = true; lastShotTime = currentTime; } }, 16); // Run at ~60fps to check more frequently } // Initialize the first shooting interval resetShootArrowTimer(); const enemies = []; // Array to hold the enemy objects // Enemy Spawn Manager Class class EnemySpawnManager { constructor() { this.spawnInterval = null; this.lastSpawnTime = Date.now(); this.baseSpawnInterval = 2000; this.minSpawnInterval = 400; this.maxEnemies = 8; this.maxEnemiesLate = 15; this.updateInterval = null; } calculateSpawnParameters() { const { difficulty, elapsedTime, adjustedTime } = calculateDifficulty(); // Calculate current spawn interval (gets shorter over time more aggressively) const currentSpawnInterval = Math.max( 100, // Reduced minimum spawn interval for higher difficulty this.baseSpawnInterval * Math.pow(0.95, Math.floor(elapsedTime / 10)) // Reduces by 5% every 10 seconds ); // Calculate number of enemies per wave const minutesElapsed = elapsedTime / 60; const baseEnemies = Math.floor(minutesElapsed * 2 + 1); // Double the base enemy increase rate const timeMultiplier = elapsedTime >= 300 ? 5 : // 5x spawn rate after 5 minutes elapsedTime >= 240 ? 3 : // 3x spawn rate after 4 minutes elapsedTime >= 180 ? 2 : 1; // 2x spawn rate after 3 minutes const difficultyMultiplier = (1 + (difficulty * 0.8)) * timeMultiplier; // Increased difficulty scaling const enemiesPerWave = Math.floor(baseEnemies * difficultyMultiplier); return { spawnInterval: Math.max(100, currentSpawnInterval / gameSpeedMultiplier), enemiesPerWave: enemiesPerWave }; } startSpawning() { this.stopSpawning(); // Clear any existing interval const spawnWave = () => { const { enemiesPerWave } = this.calculateSpawnParameters(); // Check if we can spawn more enemies const maxCurrentEnemies = enemies.length >= this.maxEnemiesLate ? this.maxEnemiesLate : this.maxEnemies; if (enemies.length < maxCurrentEnemies) { for (let i = 0; i < enemiesPerWave; i++) { if (enemies.length < maxCurrentEnemies) { const health = determineEnemyHealth(); createEnemy(health); } } } }; // Initial spawn spawnWave(); // Set up interval for continuous spawning const updateSpawn = () => { const { spawnInterval } = this.calculateSpawnParameters(); this.spawnInterval = setInterval(spawnWave, spawnInterval); }; updateSpawn(); // Update spawn parameters every 5 seconds setInterval(updateSpawn, 5000); } stopSpawning() { if (this.spawnInterval) { clearInterval(this.spawnInterval); this.spawnInterval = null; } } reset() { this.stopSpawning(); this.lastSpawnTime = Date.now(); this.startSpawning(); } } // Initialize spawn manager const spawnManager = new EnemySpawnManager(); // Function to calculate current difficulty and elapsed time function calculateDifficulty() { const rawElapsedTime = (Date.now() - enemyParams.gameStartTime) / 1000; // Raw time in seconds const adjustedElapsedTime = rawElapsedTime * gameSpeedMultiplier; // Time adjusted for game speed // Round to nearest 5% increment using adjusted time const difficultyPercentage = Math.floor(adjustedElapsedTime / 5) * 5; const calculatedDifficulty = Math.min(1, difficultyPercentage / 100); // Cap difficulty scaling at 1.0 return { difficulty: calculatedDifficulty, elapsedTime: rawElapsedTime, adjustedTime: adjustedElapsedTime, difficultyPercentage: difficultyPercentage // Rounded to nearest 5 }; } // Function to determine enemy health based on current difficulty function determineEnemyHealth() { const { difficulty, elapsedTime } = calculateDifficulty(); // After 5 minutes (300 seconds), spawn only black enemies if (elapsedTime >= 300) { return 20; // Always spawn black enemies after 5 minutes } // Between 3 and 5 minutes, gradually increase black enemy probability if (elapsedTime >= 180) { const timeAfterThreeMin = elapsedTime - 180; const blackProbability = Math.min(0.8, timeAfterThreeMin / 120); // Reaches 80% chance by 5 minutes if (Math.random() < blackProbability) { return 20; // Black enemy } } // Before 3 minutes, use modified early game progression const random = Math.random(); const redProb = Math.min(0.5, difficulty * 0.8); // Increased red enemy probability const blueProb = Math.min(0.3, difficulty * 0.5); // Adjusted blue enemy probability if (random < redProb) return 3; // Red enemy if (random < redProb + blueProb) return 2; // Blue enemy return 1; // Green enemy } // Function to create an enemy function createEnemy(health) { const type = health === 20 ? 'BLACK' : health === 3 ? 'RED' : health === 2 ? 'BLUE' : 'GREEN'; const enemy = new Enemy(type); enemy.spawn(); scene.add(enemy); enemies.push(enemy); return enemy; } // Function to spawn enemies one at a time function spawnEnemies() { if (enemies.length < 10) { // Limit number of enemies const health = Math.floor(Math.random() * 3) + 1; // Random health between 1 and 3 createEnemy(health); } } // UI Management Class class UIManager { static DEFAULT_STYLES = { container: { backgroundColor: 'rgba(0, 0, 0, 0.7)', borderRadius: '8px', color: 'white', padding: '8px', border: '1px solid rgba(255, 255, 255, 0.1)' }, button: { backgroundColor: 'rgba(255, 255, 255, 0.15)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.2)', borderRadius: '6px', cursor: 'pointer', padding: '4px 8px', transition: 'all 0.2s ease' }, text: { fontSize: '16px', color: 'white', textAlign: 'left', fontWeight: 'bold' } }; static createContainer(styles = {}) { const container = document.createElement('div'); Object.assign(container.style, this.DEFAULT_STYLES.container, styles); return container; } static createButton(text, styles = {}, onClick = null) { const button = document.createElement('button'); button.textContent = text; Object.assign(button.style, this.DEFAULT_STYLES.button, styles); if (onClick) button.addEventListener('click', onClick); return button; } static createText(text, styles = {}) { const textElement = document.createElement('div'); textElement.textContent = text; Object.assign(textElement.style, this.DEFAULT_STYLES.text, styles); return textElement; } static updateButtonState(button, enabled, activeStyles = {}, disabledStyles = {}) { const baseStyles = enabled ? { filter: 'brightness(1.2) saturate(1.5)', backgroundColor: 'rgba(40, 200, 70, 0.35)', transform: 'scale(1.05)', boxShadow: '0 0 8px rgba(40, 200, 70, 0.5)', border: '1px solid rgba(40, 200, 70, 0.5)', cursor: 'pointer' } : { filter: 'brightness(0.5) grayscale(1)', backgroundColor: 'rgba(128, 128, 128, 0.15)', transform: 'scale(1)', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)', border: '1px solid rgba(255, 255, 255, 0.2)', cursor: 'not-allowed' }; Object.assign(button.style, baseStyles, enabled ? activeStyles : disabledStyles ); button.disabled = !enabled; } } // Create main game UI container const gameUIContainer = UIManager.createContainer({ position: 'fixed', top: '10px', left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'flex-start', gap: '8px', zIndex: '1000', width: 'auto', padding: '6px', transition: 'transform 0.05s ease-out', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }); // Create upgrade window container const upgradeContainer = UIManager.createContainer({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', width: '122px', height: '60px', padding: '8px', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '8px', boxSizing: 'border-box' }); // Create stats container (Score and SP) const statsContainer = document.createElement('div'); Object.assign(statsContainer.style, { backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'white', padding: '8px', borderRadius: '8px', display: 'flex', flexDirection: 'column', gap: '4px', width: '122px', boxSizing: 'border-box', border: '1px solid rgba(255, 255, 255, 0.1)', justifyContent: 'space-between', height: '122px' }); // Create main control container const controlContainer = document.createElement('div'); Object.assign(controlContainer.style, { position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '4px', backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'white', padding: '8px', borderRadius: '8px', zIndex: '1000', width: '122px', border: '1px solid rgba(255, 255, 255, 0.1)' }); // Function to create a control block function createControlBlock(label, initialValue) { const container = document.createElement('div'); Object.assign(container.style, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: '4px', width: '100%', padding: '0px', minHeight: '16px' }); const display = document.createElement('span'); Object.assign(display.style, { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', minWidth: '32px', fontSize: '14px', lineHeight: '1.3', marginRight: '-2px', fontWeight: 'bold' }); display.innerHTML = `${label}
${initialValue}`; const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.flexDirection = 'column'; buttonContainer.style.gap = '1px'; const increaseButton = document.createElement('button'); increaseButton.style.width = '14px'; increaseButton.style.height = '14px'; increaseButton.style.backgroundSize = '80%'; increaseButton.style.backgroundPosition = 'center'; increaseButton.style.backgroundRepeat = 'no-repeat'; increaseButton.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; increaseButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; increaseButton.style.borderRadius = '6px'; increaseButton.style.cursor = 'not-allowed'; increaseButton.style.transition = 'all 0.2s ease'; increaseButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/up_chevron.png?xvRx')`; increaseButton.style.filter = 'brightness(0.5) grayscale(1)'; increaseButton.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)'; increaseButton.style.opacity = '0.8'; const decreaseButton = document.createElement('button'); decreaseButton.style.width = '14px'; decreaseButton.style.height = '14px'; decreaseButton.style.backgroundSize = '80%'; decreaseButton.style.backgroundPosition = 'center'; decreaseButton.style.backgroundRepeat = 'no-repeat'; decreaseButton.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; decreaseButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; decreaseButton.style.borderRadius = '6px'; decreaseButton.style.cursor = 'not-allowed'; decreaseButton.style.transition = 'all 0.2s ease'; decreaseButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/down_chevron.png?cGaf')`; decreaseButton.style.filter = 'brightness(0.5) grayscale(1)'; decreaseButton.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)'; buttonContainer.appendChild(increaseButton); buttonContainer.appendChild(decreaseButton); container.appendChild(display); container.appendChild(buttonContainer); return { container, display, increaseButton, decreaseButton }; } // Create containers first // Create a left column container for rate and damage const leftColumnContainer = document.createElement('div'); Object.assign(leftColumnContainer.style, { display: 'flex', flexDirection: 'column', gap: '4px' }); // Create a right column container for range and placeholder const rightColumnContainer = document.createElement('div'); Object.assign(rightColumnContainer.style, { display: 'flex', flexDirection: 'column', gap: '4px' }); // Create control blocks const rateControl = createControlBlock('Rate', '1'); const rangeControl = createControlBlock('Range', '1'); // Add controls to their respective columns leftColumnContainer.appendChild(rateControl.container); rightColumnContainer.appendChild(rangeControl.container); // Add columns to the control container controlContainer.appendChild(leftColumnContainer); controlContainer.appendChild(rightColumnContainer); // Remove this entire block as it's now handled above // Create health bar container with grid column span const healthBarContainer = document.createElement('div'); Object.assign(healthBarContainer.style, { gridColumn: '1 / -1', backgroundColor: 'rgba(0, 0, 0, 0.3)', padding: '5px', borderRadius: '4px', marginTop: '10px' }); // Create health bar const healthBar = document.createElement('div'); Object.assign(healthBar.style, { height: '15px', width: '100%', backgroundColor: '#ff0000', borderRadius: '2px', transition: 'width 0.3s ease-in-out', position: 'relative' }); // Create health text const healthText = document.createElement('div'); Object.assign(healthText.style, { position: 'absolute', width: 'auto', textAlign: 'center', color: 'white', fontSize: '12px', lineHeight: '1', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', userSelect: 'none', pointerEvents: 'none', zIndex: '1' }); healthText.textContent = `HP: ${towerHealth}/10`; // Append elements healthBar.appendChild(healthText); healthBarContainer.appendChild(healthBar); // Add health bar to control container controlContainer.appendChild(healthBarContainer); // Initialize game values first let score = 0; // Initialize score let skillPoints = 0; // Start with 0 skill points const reachedThresholds = new Set(); // Track which thresholds have been reached // Function to check score thresholds and award SP function checkScoreThresholds() { for (const threshold of scoreThresholds) { if (score >= threshold && !reachedThresholds.has(threshold)) { // Award SP based on threshold level (no bonus stacking) const thresholdIndex = scoreThresholds.indexOf(threshold); // Award 1 SP for first three thresholds, 2 SP for next three, etc. const spAward = Math.floor(thresholdIndex / 3) + 1; skillPoints += spAward; reachedThresholds.add(threshold); } } } const velocityOptions = [1, 2, 3, 4, 5]; // Velocity from slow to fast const rateOptions = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15]; // Rate from slow to fast, extended to rate 10 const damageOptions = [1, 1.5, 2, 3, 4]; // Damage from low to high, adjusted to start at 1 const rangeOptions = [1, 2, 3, 4, 5]; // Range multipliers (1x, 1.5x, 2.25x, 3.375x, 5.0625x) // Create score display const scoreDisplay = document.createElement('div'); scoreDisplay.textContent = 'Score: 0'; Object.assign(scoreDisplay.style, { fontSize: '16px', textAlign: 'left', lineHeight: '1', fontWeight: 'bold' }); // Create timer display const timerDisplay = document.createElement('div'); timerDisplay.textContent = 'Time: 00:00'; Object.assign(timerDisplay.style, { fontSize: '16px', textAlign: 'left', fontWeight: 'bold', cursor: 'pointer' }); // Add click handler for timer display (time speed Easter egg) timerDisplay.addEventListener('click', () => { gameSpeedMultiplier = gameSpeedMultiplier === 1 ? 5 : 1; timerDisplay.style.color = gameSpeedMultiplier === 5 ? '#4CAF50' : 'white'; }); // Create SP display with explicit initialization const spDisplay = document.createElement('div'); spDisplay.id = 'spDisplay'; // Add ID for easier debugging spDisplay.textContent = `SP: ${skillPoints}`; Object.assign(spDisplay.style, { fontSize: '16px', textAlign: 'left', color: 'white', fontWeight: 'bold', cursor: 'pointer' // Add cursor pointer to indicate clickability }); // Add click handler for SP display (developer easter egg) spDisplay.addEventListener('click', () => { skillPoints++; spDisplay.textContent = `SP: ${skillPoints}`; updateSP(); }); // Create pause button const pauseButton = document.createElement('button'); pauseButton.textContent = 'Pause'; Object.assign(pauseButton.style, { fontSize: '12px', padding: '4px 8px', backgroundColor: 'rgba(255, 255, 255, 0.15)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.2)', borderRadius: '4px', cursor: 'pointer', width: '100%', marginTop: '4px', transition: 'all 0.2s ease', fontWeight: '500', letterSpacing: '0.5px', height: '22px' }); // Append displays to stats container statsContainer.appendChild(scoreDisplay); statsContainer.appendChild(spDisplay); statsContainer.appendChild(timerDisplay); statsContainer.appendChild(pauseButton); let currentRateIndex = 0; let currentDamageIndex = 0; let currentRangeIndex = 0; // Create double shot button const doubleShotButton = UIManager.createButton('x2', { width: '100%', height: '24px', fontSize: '14px', fontWeight: 'bold', backgroundColor: 'rgba(128, 128, 128, 0.15)', filter: 'brightness(0.5) grayscale(1)', cursor: 'not-allowed', marginTop: '4px' }); doubleShotButton.addEventListener('click', () => { if (skillPoints >= 5 && !doubleShotButton.disabled) { skillPoints -= 5; updateSP(); powerUpStates.doubleShot = true; doubleShotButton.style.backgroundColor = 'rgba(40, 200, 70, 0.35)'; doubleShotButton.style.filter = 'brightness(1.2) saturate(1.5)'; doubleShotButton.disabled = true; doubleShotButton.style.cursor = 'not-allowed'; } }); // Add double shot button after health bar healthBarContainer.appendChild(doubleShotButton); // Continue with the rest of the UI setup gameUIContainer.appendChild(statsContainer); gameUIContainer.appendChild(controlContainer); // Initialize upgradeButtons array for compatibility const upgradeButtons = [doubleShotButton]; // Append containers to parent parentDiv.appendChild(gameUIContainer); // Start game loops // Rate of fire options // Update functions function updateSP() { // Update SP display with current value spDisplay.textContent = `SP: ${skillPoints}`; // Update upgrade buttons based on SP upgradeButtons.forEach(button => { if (!button.disabled) { if (skillPoints >= 5) { button.style.filter = 'brightness(1.2) saturate(1.5)'; button.style.backgroundColor = 'rgba(40, 200, 70, 0.35)'; button.style.cursor = 'pointer'; } else { button.style.filter = 'brightness(0.5) grayscale(1)'; button.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; button.style.cursor = 'not-allowed'; } } }); // Define upgrade configurations const upgrades = [{ name: 'rate', current: currentRateIndex, max: rateOptions.length - 1, button: rateControl.increaseButton }, { name: 'range', current: currentRangeIndex, max: rangeOptions.length - 1, button: rangeControl.increaseButton }]; // Update each upgrade button's state upgrades.forEach(upgrade => { const canUpgrade = upgrade.current < upgrade.max && skillPoints > 0; // Update visual state // Update visual state with filter for better graying out effect upgrade.button.style.opacity = '1.0'; // Update up arrow visual state if (upgrade.button === upgrade.button.parentElement.firstChild) { // Check if it's the up arrow if (canUpgrade) { upgrade.button.style.filter = 'brightness(1.2) saturate(1.5)'; upgrade.button.style.backgroundColor = 'rgba(40, 200, 70, 0.35)'; upgrade.button.style.transform = 'scale(1.05)'; upgrade.button.style.boxShadow = '0 0 8px rgba(40, 200, 70, 0.5)'; upgrade.button.style.border = '1px solid rgba(40, 200, 70, 0.5)'; } else { upgrade.button.style.filter = 'brightness(0.5) grayscale(1)'; upgrade.button.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; upgrade.button.style.transform = 'scale(1)'; upgrade.button.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)'; upgrade.button.style.border = '1px solid rgba(255, 255, 255, 0.2)'; } } // Update functional state upgrade.button.disabled = !canUpgrade; // Update button appearance based on state upgrade.button.style.cursor = canUpgrade ? 'pointer' : 'not-allowed'; }); // Log current state for debugging console.log('SP Update:', { currentSP: skillPoints, upgradeStates: upgrades.map(u => ({ type: u.name, canUpgrade: u.current < u.max && skillPoints > 0 })) }); } function updateRate() { rateControl.display.innerHTML = `Rate
${rateOptions[currentRateIndex]}`; rateControl.increaseButton.style.opacity = currentRateIndex < rateOptions.length - 1 ? '1.0' : '0.5'; // Update decrease button style const canDecrease = currentRateIndex > 0; if (canDecrease) { rateControl.decreaseButton.style.filter = 'brightness(1.2) saturate(1.5)'; rateControl.decreaseButton.style.backgroundColor = 'rgba(220, 53, 69, 0.35)'; rateControl.decreaseButton.style.transform = 'scale(1.05)'; rateControl.decreaseButton.style.boxShadow = '0 0 8px rgba(220, 53, 69, 0.5)'; rateControl.decreaseButton.style.border = '1px solid rgba(220, 53, 69, 0.5)'; } else { rateControl.decreaseButton.style.filter = 'brightness(0.5) grayscale(1)'; rateControl.decreaseButton.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; rateControl.decreaseButton.style.transform = 'scale(1)'; rateControl.decreaseButton.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)'; rateControl.decreaseButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; } rateControl.decreaseButton.style.cursor = canDecrease ? 'pointer' : 'not-allowed'; shotInterval = 2000 / rateOptions[currentRateIndex]; // 2000ms (2s) at rate 1, down to 400ms (0.4s) at rate 5 resetShootArrowTimer(); // Update shooting interval resetShootArrowTimer(); } // Event listeners for rate control rateControl.increaseButton.addEventListener('click', () => { if (currentRateIndex < 9 && skillPoints > 0) { // Allow up to index 9 (rate 10) currentRateIndex++; skillPoints--; updateRate(); updateSP(); updateArcherTowers(currentRateIndex); // Update archer towers based on new rate level } }); rateControl.decreaseButton.addEventListener('click', () => { if (currentRateIndex > 0) { currentRateIndex--; skillPoints++; updateRate(); updateSP(); } }); // Initialize controls let baseSpeedFactor = 50; function updateRange() { rangeControl.display.innerHTML = `Range
${rangeOptions[currentRangeIndex]}`; rangeControl.increaseButton.style.opacity = currentRangeIndex < rangeOptions.length - 1 && skillPoints > 0 ? '1.0' : '0.5'; // Update decrease button style const canDecrease = currentRangeIndex > 0; if (canDecrease) { rangeControl.decreaseButton.style.filter = 'brightness(1.2) saturate(1.5)'; rangeControl.decreaseButton.style.backgroundColor = 'rgba(220, 53, 69, 0.35)'; rangeControl.decreaseButton.style.transform = 'scale(1.05)'; rangeControl.decreaseButton.style.boxShadow = '0 0 8px rgba(220, 53, 69, 0.5)'; rangeControl.decreaseButton.style.border = '1px solid rgba(220, 53, 69, 0.5)'; } else { rangeControl.decreaseButton.style.filter = 'brightness(0.5) grayscale(1)'; rangeControl.decreaseButton.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; rangeControl.decreaseButton.style.transform = 'scale(1)'; rangeControl.decreaseButton.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)'; rangeControl.decreaseButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; } rangeControl.decreaseButton.style.cursor = canDecrease ? 'pointer' : 'not-allowed'; // Calculate new range with 1.5x multiplier for each level const newRange = enemyParams.baseRange * Math.pow(1.5, currentRangeIndex); enemyParams.targetRange = newRange; // Update the range ring geometry scene.remove(rangeRing); const newRangeRingGeometry = new THREE.TorusGeometry(enemyParams.targetRange, 0.8, 16, 100); rangeRing.geometry.dispose(); rangeRing.geometry = newRangeRingGeometry; scene.add(rangeRing); // Update range ring in scene scene.add(rangeRing); } // Event listeners for range control rangeControl.increaseButton.addEventListener('click', () => { if (currentRangeIndex < rangeOptions.length - 1 && skillPoints > 0) { currentRangeIndex++; skillPoints--; updateRange(); updateSP(); updateVisualUpgrades('range', currentRangeIndex); } }); rangeControl.decreaseButton.addEventListener('click', () => { if (currentRangeIndex > 0) { currentRangeIndex--; skillPoints++; updateRange(); updateSP(); } }); updateRate(); updateRange(); // Start spawning enemies spawnManager.startSpawning(); // Function to update enemies' position // Function to damage tower and update health bar function shakeUI() { const baseIntensity = 12; // Increased base shake intensity const duration = 400; // Increased duration const startTime = Date.now(); // Store original camera position at the start of shake const originalPosition = camera.position.clone(); // Elements to shake with their individual intensities const elementsToShake = [{ element: gameUIContainer, intensity: baseIntensity, baseTransform: 'translateX(-50%)' }, { element: statsContainer, intensity: baseIntensity * 1.2, baseTransform: 'none' }, { element: controlContainer, intensity: baseIntensity * 1.5, baseTransform: 'none' }, { element: healthBarContainer, intensity: baseIntensity * 2, baseTransform: 'none' }]; function updateShake() { const elapsed = Date.now() - startTime; const progress = elapsed / duration; if (elapsed < duration) { elementsToShake.forEach(({ element, intensity, baseTransform }) => { // Add decay to shake intensity const decayFactor = 1 - Math.min(1, progress * 1.5); const currentIntensity = intensity * decayFactor; // Create more dramatic shake effect const xShake = (Math.random() - 0.5) * currentIntensity * 2; const yShake = (Math.random() - 0.5) * currentIntensity * 2; const rotation = (Math.random() - 0.5) * currentIntensity * 0.5; // Add slight rotation // Apply transform with base transform consideration if (element === gameUIContainer) { element.style.transform = `translate(calc(-50% + ${xShake}px), ${yShake}px) rotate(${rotation}deg)`; } else { element.style.transform = `translate(${xShake}px, ${yShake}px) rotate(${rotation}deg)`; } }); // Store original camera position const originalPosition = camera.position.clone(); // Add camera shake effect with position-only changes const cameraShakeIntensity = baseIntensity * 0.2; const offsetX = (Math.random() - 0.5) * cameraShakeIntensity; const offsetY = (Math.random() - 0.5) * cameraShakeIntensity; const offsetZ = (Math.random() - 0.5) * cameraShakeIntensity; // Apply offset relative to camera's current orientation camera.position.set( originalPosition.x + offsetX, originalPosition.y + offsetY, originalPosition.z + offsetZ ); // Preserve camera orientation by updating lookAt camera.lookAt(0, 0, 0); requestAnimationFrame(updateShake); } else { // Reset only UI elements to their original positions elementsToShake.forEach(({ element, baseTransform }) => { element.style.transform = baseTransform; }); // Reset camera to its original position after shake camera.position.copy(originalPosition); camera.lookAt(0, 0, 0); // Clear the reference to originalPosition originalPosition.set(0, 0, 0); } } updateShake(); } function damageTower(amount) { if (towerHealth <= 0) return; // Don't process damage if tower is already destroyed towerHealth -= amount; towerHealth = Math.max(towerHealth, 0); // Prevent negative health shakeUI(); // Add screen shake when damage is received // Update health bar width and text healthBar.style.width = `${(towerHealth / 10) * 100}%`; healthText.textContent = `HP: ${towerHealth}/10`; // Update health bar color based on remaining health if (towerHealth > 7) { healthBar.style.backgroundColor = '#00ff00'; // Green } else if (towerHealth > 3) { healthBar.style.backgroundColor = '#ffff00'; // Yellow } else { healthBar.style.backgroundColor = '#ff0000'; // Red } if (towerHealth <= 0) { gameOverScreen.style.display = 'flex'; } } // Function to reset the game function resetGame() { // Reset spawn manager spawnManager.reset(); // Reset upgrade buttons upgradeButtons.forEach(button => { button.disabled = false; button.style.backgroundColor = 'rgba(128, 128, 128, 0.15)'; button.style.filter = 'brightness(0.5) grayscale(1)'; button.style.cursor = 'not-allowed'; }); // Reset tower health towerHealth = 10; // Remove all archer towers archerTowers.forEach(tower => { scene.remove(tower); }); archerTowers.length = 0; // Reset timer display timerDisplay.textContent = 'Time: 00:00'; healthBar.style.width = '100%'; healthText.textContent = 'HP: 10/10'; // Reset score and skill points score = 0; skillPoints = 0; scoreDisplay.textContent = 'Score: 0'; spDisplay.textContent = 'SP: 0'; reachedThresholds.clear(); // Reset enemy array and remove all enemies from scene while (enemies.length > 0) { const enemy = enemies.pop(); scene.remove(enemy); } // Reset arrows while (activeArrows.length > 0) { const arrow = activeArrows.pop(); scene.remove(arrow.mesh); } // Reset tower upgrades currentRateIndex = 0; currentDamageIndex = 0; currentRangeIndex = 0; // Reset visual upgrades Object.keys(visualUpgrades).forEach(type => { visualUpgrades[type].forEach(upgrade => { scene.remove(upgrade); }); visualUpgrades[type] = []; }); updateRate(); updateRange(); // Hide game over screen gameOverScreen.style.display = 'none'; // Reset enemy spawn system // Reset game start time and difficulty enemyParams.gameStartTime = Date.now(); currentDifficulty = 'Normal'; difficultyTimeOffset = 0; // Clear existing spawn interval and reset spawn system spawnManager.stopSpawning(); enemyParams.baseSpawnInterval = 2000; // Reset to initial spawn interval spawnManager.startSpawning(); } function updateEnemies(delta) { let enemyRemoved = false; // Process enemy deaths and tower damage first for (let i = enemies.length - 1; i >= 0; i--) { const enemy = enemies[i]; // Check if enemy has reached the tower const distanceToTower = enemy.position.distanceTo(new THREE.Vector3(0, enemy.position.y, 0)); if (distanceToTower < 5) { // Tower radius damageTower(1); scene.remove(enemy); enemies.splice(i, 1); enemyRemoved = true; continue; } // Remove enemy if health is depleted if (enemy.health <= 0) { // Emit particles based on enemy color const enemyColor = enemy.material.color; if (enemyColor.equals(new THREE.Color(0x00ff00))) { greenParticles.emit(enemy.position); } else if (enemyColor.equals(new THREE.Color(0x0000ff))) { blueParticles.emit(enemy.position); } else if (enemyColor.equals(new THREE.Color(0xff0000))) { redParticles.emit(enemy.position); } score += enemy.originalHealth; checkScoreThresholds(); scoreDisplay.textContent = `Score: ${score}`; updateSP(); scene.remove(enemy); enemies.splice(i, 1); enemyRemoved = true; } } // Then check for enemies in range and handle shooting const enemiesInRange = enemies.filter(enemy => { const distanceToTower = new THREE.Vector2(enemy.position.x, enemy.position.z).length(); return distanceToTower <= enemyParams.targetRange && enemy.health > 0; }); // Shoot if there are valid targets and we can shoot if (enemiesInRange.length > 0 && canShootArrow) { shootArrow(); } for (let i = enemies.length - 1; i >= 0; i--) { const enemy = enemies[i]; // Calculate direction to tower (at same height as enemy) // Handle knockback movement integrated with bounce if (enemy.knockback.active) { // Update knockback progress enemy.knockback.progress += delta / enemy.knockback.duration; if (enemy.knockback.progress >= 1) { // End knockback enemy.knockback.active = false; enemy.knockback.progress = 0; } else { // Apply horizontal knockback movement only const t = enemy.knockback.easing(enemy.knockback.progress); const newPosition = new THREE.Vector3(); newPosition.lerpVectors( enemy.knockback.startPosition, enemy.knockback.targetPosition, t ); // Only apply horizontal movement from knockback enemy.position.x = newPosition.x; enemy.position.z = newPosition.z; } } else { // Handle bouncing physics // Always calculate direction to tower, regardless of grounded state const targetPosition = new THREE.Vector3(0, enemy.position.y, 0); const direction = new THREE.Vector3(); direction.subVectors(targetPosition, enemy.position).normalize(); // Apply horizontal movement towards tower with consistent speed const moveSpeed = enemy.speed * delta; enemy.position.x += direction.x * moveSpeed; enemy.position.z += direction.z * moveSpeed; if (!enemy.bounce.isGrounded) { // Apply gravity and vertical bounce with smoothing enemy.bounce.velocity -= 98.1 * delta; const newY = enemy.position.y + enemy.bounce.velocity * delta; // Check for ground collision with smoothing if (newY <= enemy.bounce.groundLevel) { enemy.position.y = enemy.bounce.groundLevel; // Store bounce height for smooth transition enemy.bounce.lastBounceHeight = enemy.position.y - enemy.bounce.groundLevel; // Calculate bounce velocity with improved physics const impactVelocity = Math.abs(enemy.bounce.velocity); if (impactVelocity > enemy.bounce.bounceThreshold) { // Smooth bounce velocity calculation const bounceVelocity = -enemy.bounce.velocity * enemy.bounce.dampening; enemy.bounce.velocity = bounceVelocity; // Smoother horizontal deviation on bounce const bounceAngle = Math.random() * Math.PI * 2; const bounceForce = Math.min(impactVelocity * 0.03, 1.5); // Reduced horizontal force // Apply smooth horizontal movement enemy.position.x += Math.cos(bounceAngle) * bounceForce * delta; enemy.position.z += Math.sin(bounceAngle) * bounceForce * delta; } else { // Smooth transition to grounded state enemy.bounce.isGrounded = true; enemy.bounce.velocity = 0; } } else { enemy.position.y = newY; } } } // Check if enemy has reached the tower const distanceToTower = enemy.position.distanceTo(new THREE.Vector3(0, enemy.position.y, 0)); if (distanceToTower < 5) { // Tower radius damageTower(1); // Damage tower when enemy reaches it scene.remove(enemy); enemies.splice(i, 1); enemyRemoved = true; continue; } // Remove enemy if health is depleted if (enemy.health <= 0) { // Emit particles based on enemy color const enemyColor = enemy.material.color; if (enemyColor.equals(new THREE.Color(0x00ff00))) { greenParticles.emit(enemy.position); } else if (enemyColor.equals(new THREE.Color(0x0000ff))) { blueParticles.emit(enemy.position); } else if (enemyColor.equals(new THREE.Color(0xff0000))) { redParticles.emit(enemy.position); } // Award points based on original health when enemy is killed score += enemy.originalHealth; checkScoreThresholds(); // Check if score reached any SP thresholds scoreDisplay.textContent = `Score: ${score}`; updateSP(); scene.remove(enemy); enemies.splice(i, 1); enemyRemoved = true; } } } // Animation loop function animate() { requestAnimationFrame(animate); if (assetsLoaded && !isPaused) { // Update timer display const elapsedSeconds = Math.floor((Date.now() - enemyParams.gameStartTime) / 1000 * gameSpeedMultiplier); const minutes = Math.floor(elapsedSeconds / 60); const seconds = elapsedSeconds % 60; timerDisplay.textContent = `Time: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}${gameSpeedMultiplier === 5 ? ' (x5)' : ''}`; const delta = clock.getDelta() * gameSpeedMultiplier; dayTime += delta; // Update particle systems greenParticles.update(delta); blueParticles.update(delta); redParticles.update(delta); // Update sun position const sunAngle = (dayTime * sunRotationSpeed) % (2 * Math.PI); const sunRadius = 400; // Distance from center // Update sun position sunLight.position.x = Math.cos(sunAngle) * sunRadius; sunLight.position.y = Math.sin(sunAngle) * sunRadius; sunLight.position.z = 100; // Update sun mesh position (always facing camera) sunMesh.position.copy(sunLight.position); sunMesh.lookAt(camera.position); // Update moon position (opposite to sun) const moonAngle = sunAngle + Math.PI; moonLight.position.x = Math.cos(moonAngle) * sunRadius; moonLight.position.y = Math.sin(moonAngle) * sunRadius; moonLight.position.z = 100; // Update moon mesh position (always facing camera) moonMesh.position.copy(moonLight.position); moonMesh.lookAt(camera.position); // Update light intensities based on day/night cycle const normalizedTime = (Math.sin(sunAngle) + 1) / 2; // 0 to 1 sunLight.intensity = normalizedTime; moonLight.intensity = 0.3 * (1 - normalizedTime); // Moon brightest at night // Update sky colors based on sun position const skyColorDay = new THREE.Color(0x63B8FF); const skyColorNight = new THREE.Color(0x000033); const currentSkyColor = skyColorDay.clone().lerp(skyColorNight, 1 - normalizedTime); // Update sky dome color uniforms.topColor.value.copy(currentSkyColor); // Update ambient light intensity ambientLight.intensity = 0.2 + (normalizedTime * 0.3); // 0.2 to 0.5 // Update sun light intensity sunLight.intensity = normalizedTime; applyControls(); // Apply camera controls controls.update(); updateEnemies(delta); // Update enemy positions with delta time updateArrows(); // Update arrow positions } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // Mobile Controls Integration // Inject CSS styles dynamically const styles = ` /* Base styles for the game interface */ * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Create game over screen using UIUtils const gameOverScreen = UIManager.createContainer({ position: 'fixed', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'none', justifyContent: 'center', alignItems: 'center', zIndex: '2000', border: 'none' }); const gameOverBox = document.createElement('div'); Object.assign(gameOverBox.style, { backgroundColor: 'rgba(0, 0, 0, 0.8)', padding: '40px', borderRadius: '10px', textAlign: 'center', color: 'white' }); const gameOverText = document.createElement('div'); gameOverText.innerHTML = 'Game Over!
Try again?'; Object.assign(gameOverText.style, { fontSize: '24px', marginBottom: '20px' }); const retryButton = UIManager.createButton('Retry', { padding: '10px 20px', fontSize: '18px', backgroundColor: '#4CAF50', border: 'none', borderRadius: '5px' }); gameOverBox.appendChild(gameOverText); gameOverBox.appendChild(retryButton); gameOverScreen.appendChild(gameOverBox); parentDiv.appendChild(gameOverScreen); // Add click event to retry button retryButton.addEventListener('click', resetGame); // Add click event to pause button pauseButton.addEventListener('click', () => { isPaused = !isPaused; pauseButton.textContent = isPaused ? 'Resume' : 'Pause'; pauseButton.style.backgroundColor = isPaused ? '#4CAF50' : '#444'; }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Function to handle camera controls through OrbitControls function applyControls() { controls.update(); }