import * as THREE from 'three'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; let score = 0; let gameOver = false; let isMobile = false; const keys = { up: false, down: false, left: false, right: false, fire: false }; const joystickInput = { x: 0, y: 0 }; let lastFireTime = 0; const fireRate = 150; const laserPool = []; const activeLasers = []; const particlePool = []; const activeParticles = []; const enemies = []; const healthBars = []; // Difficulty settings const difficulty = { baseSpeed: 0.25, speedMultiplier: 1.0, baseSpawnInterval: 800, spawnInterval: 800, level: 1, getEnemyHealth() { if (score < 500) return 1; if (score < 1500) return Math.random() < 0.3 ? 2 : 1; if (score < 3000) return Math.random() < 0.5 ? 2 : Math.random() < 0.2 ? 3 : 1; if (score < 5000) return Math.random() < 0.4 ? 3 : 2; return Math.random() < 0.3 ? 4 : 3; }, getEnemyType() { if (score < 500) return 'basic'; if (score < 1500) return Math.random() < 0.4 ? 'medium' : 'basic'; if (score < 3000) return Math.random() < 0.3 ? 'large' : Math.random() < 0.5 ? 'medium' : 'basic'; if (score < 5000) return Math.random() < 0.4 ? 'boss' : Math.random() < 0.5 ? 'large' : 'medium'; return Math.random() < 0.3 ? 'boss' : 'large'; }, update() { this.level = Math.floor(score / 500) + 1; this.speedMultiplier = 1.0 + (this.level - 1) * 0.15; this.spawnInterval = Math.max(300, this.baseSpawnInterval - (this.level - 1) * 50); document.getElementById('levelNum').textContent = `${this.level}`; document.getElementById('waveSpeed').textContent = this.speedMultiplier.toFixed(1); }, }; const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x0a0015, 0.015); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 2, 8); camera.lookAt(0, 0, -50); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.toneMapping = THREE.ReinhardToneMapping; renderer.toneMappingExposure = 1.5; document.body.appendChild(renderer.domElement); const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85); bloomPass.threshold = 0.1; bloomPass.strength = 2.0; bloomPass.radius = 0.8; composer.addPass(bloomPass); const starfieldVertexShader = ` attribute float size; attribute vec3 customColor; varying vec3 vColor; varying float vDistance; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vDistance = -mvPosition.z; gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `; const starfieldFragmentShader = ` varying vec3 vColor; varying float vDistance; void main() { float dist = length(gl_PointCoord - vec2(0.5)); if (dist > 0.5) discard; float alpha = 1.0 - smoothstep(0.0, 0.5, dist); float glow = exp(-dist * 4.0); vec3 finalColor = vColor + vColor * glow * 2.0; float fog = exp(-vDistance * 0.008); gl_FragColor = vec4(finalColor * fog, alpha * fog); } `; function createStarfield() { const starCount = 3000; const positions = new Float32Array(starCount * 3); const colors = new Float32Array(starCount * 3); const sizes = new Float32Array(starCount); const colorPalette = [ new THREE.Color(0xff00ff), new THREE.Color(0x00ffff), new THREE.Color(0xff0066), new THREE.Color(0x9900ff), new THREE.Color(0xffffff), ]; for (let i = 0; i < starCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 400; positions[i * 3 + 1] = (Math.random() - 0.5) * 400; positions[i * 3 + 2] = -Math.random() * 500 - 50; const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]; colors[i * 3] = color.r; colors[i * 3 + 1] = color.g; colors[i * 3 + 2] = color.b; sizes[i] = Math.random() * 3 + 1; } const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('customColor', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const material = new THREE.ShaderMaterial({ vertexShader: starfieldVertexShader, fragmentShader: starfieldFragmentShader, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, }); return new THREE.Points(geometry, material); } const starfield = createStarfield(); scene.add(starfield); const nebulaVertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const nebulaFragmentShader = ` uniform float time; varying vec2 vUv; float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y); } float fbm(vec2 p) { float value = 0.0; float amplitude = 0.5; for (int i = 0; i < 5; i++) { value += amplitude * noise(p); p *= 2.0; amplitude *= 0.5; } return value; } void main() { vec2 uv = vUv * 2.0 - 1.0; float t = time * 0.02; float n1 = fbm(uv * 3.0 + t); float n2 = fbm(uv * 5.0 - t * 0.5); float n3 = fbm(uv * 8.0 + vec2(t * 0.3, -t * 0.2)); vec3 purple = vec3(0.4, 0.0, 0.6); vec3 pink = vec3(0.8, 0.0, 0.4); vec3 cyan = vec3(0.0, 0.6, 0.8); vec3 color = mix(purple, pink, n1); color = mix(color, cyan, n2 * 0.5); color *= n3 * 0.3 + 0.1; float vignette = 1.0 - length(uv) * 0.5; color *= vignette; gl_FragColor = vec4(color, 1.0); } `; const nebulaGeometry = new THREE.PlaneGeometry(600, 600); const nebulaMaterial = new THREE.ShaderMaterial({ vertexShader: nebulaVertexShader, fragmentShader: nebulaFragmentShader, uniforms: { time: { value: 0 } }, side: THREE.DoubleSide, }); const nebula = new THREE.Mesh(nebulaGeometry, nebulaMaterial); nebula.position.z = -300; scene.add(nebula); const sunGeometry = new THREE.CircleGeometry(30, 64); const sunVertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const sunFragmentShader = ` varying vec2 vUv; uniform float time; void main() { vec2 uv = vUv - 0.5; float dist = length(uv) * 2.0; vec3 topColor = vec3(1.0, 0.8, 0.0); vec3 bottomColor = vec3(1.0, 0.0, 0.4); vec3 color = mix(bottomColor, topColor, vUv.y); float lines = step(0.5, fract((vUv.y - time * 0.05) * 15.0)); if (vUv.y < 0.5) color *= 0.3 + lines * 0.7; float alpha = 1.0 - smoothstep(0.4, 0.5, dist); float glow = exp(-dist * 2.0) * 0.5; color += vec3(1.0, 0.5, 0.2) * glow; gl_FragColor = vec4(color, alpha); } `; const sunMaterial = new THREE.ShaderMaterial({ vertexShader: sunVertexShader, fragmentShader: sunFragmentShader, uniforms: { time: { value: 0 } }, transparent: true, side: THREE.DoubleSide, }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); sun.position.set(0, 20, -250); scene.add(sun); function createSpaceship() { const group = new THREE.Group(); const bodyGeometry = new THREE.ConeGeometry(0.5, 2, 8); const bodyMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.rotation.x = Math.PI / 2; group.add(body); const wingGeometry = new THREE.BoxGeometry(2.5, 0.1, 0.8); const wingMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff }); const wings = new THREE.Mesh(wingGeometry, wingMaterial); wings.position.z = 0.3; group.add(wings); const engineGeometry = new THREE.ConeGeometry(0.25, 0.8, 8); const engineMaterial = new THREE.MeshBasicMaterial({ color: 0xff0066, transparent: true, opacity: 0.8 }); const engineL = new THREE.Mesh(engineGeometry, engineMaterial); engineL.position.set(-0.8, 0, 0.8); engineL.rotation.x = -Math.PI / 2; group.add(engineL); const engineR = new THREE.Mesh(engineGeometry, engineMaterial.clone()); engineR.position.set(0.8, 0, 0.8); engineR.rotation.x = -Math.PI / 2; group.add(engineR); const cockpitGeometry = new THREE.SphereGeometry(0.3, 16, 16); const cockpitMaterial = new THREE.MeshBasicMaterial({ color: 0x9900ff }); const cockpit = new THREE.Mesh(cockpitGeometry, cockpitMaterial); cockpit.position.z = -0.3; cockpit.scale.z = 1.5; group.add(cockpit); return group; } const ship = createSpaceship(); ship.position.set(0, 0, 0); scene.add(ship); const shipTarget = { x: 0, y: 0 }; const shipVelocity = { x: 0, y: 0 }; function createLaser() { const geometry = new THREE.CylinderGeometry(0.05, 0.05, 2, 8); geometry.rotateX(Math.PI / 2); const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.9 }); const laser = new THREE.Mesh(geometry, material); laser.visible = false; scene.add(laser); return laser; } for (let i = 0; i < 50; i++) { laserPool.push(createLaser()); } function fireLaser() { const now = Date.now(); if (now - lastFireTime < fireRate) return; lastFireTime = now; let laser = laserPool.pop(); if (!laser) laser = createLaser(); laser.position.copy(ship.position); laser.position.z -= 1; laser.visible = true; activeLasers.push(laser); } // Enemy type configurations const enemyTypes = { basic: { size: 0.6, baseHealth: 1, color: 0x00ffff, points: 100, create(group, material) { const geo = new THREE.BoxGeometry(this.size, this.size, this.size); const mesh = new THREE.Mesh(geo, material); group.add(mesh); }, }, medium: { size: 1.0, baseHealth: 2, color: 0xff00ff, points: 200, create(group, material) { const core = new THREE.Mesh(new THREE.IcosahedronGeometry(this.size * 0.5, 0), material); group.add(core); const spikeMat = material.clone(); spikeMat.color.setHex(0xff0066); for (let i = 0; i < 6; i++) { const spike = new THREE.Mesh(new THREE.ConeGeometry(0.15, 0.5, 4), spikeMat); const angle = (i / 6) * Math.PI * 2; spike.position.set(Math.cos(angle) * this.size * 0.5, Math.sin(angle) * this.size * 0.5, 0); spike.rotation.z = angle - Math.PI / 2; group.add(spike); } }, }, large: { size: 1.5, baseHealth: 3, color: 0xff0066, points: 350, create(group, material) { const body = new THREE.Mesh(new THREE.DodecahedronGeometry(this.size * 0.5, 0), material); group.add(body); const eyeMat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const eye1 = new THREE.Mesh(new THREE.SphereGeometry(0.2, 8, 8), eyeMat); eye1.position.set(-0.3, 0.2, this.size * 0.4); group.add(eye1); const eye2 = new THREE.Mesh(new THREE.SphereGeometry(0.2, 8, 8), eyeMat); eye2.position.set(0.3, 0.2, this.size * 0.4); group.add(eye2); const tentacleMat = material.clone(); tentacleMat.color.setHex(0x9900ff); for (let i = 0; i < 4; i++) { const tentacle = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.15, 0.8, 6), tentacleMat); const angle = (i / 4) * Math.PI * 2 + Math.PI / 4; tentacle.position.set(Math.cos(angle) * this.size * 0.4, -this.size * 0.4, Math.sin(angle) * this.size * 0.4); tentacle.rotation.x = Math.PI / 6; tentacle.rotation.z = angle; group.add(tentacle); } }, }, boss: { size: 2.2, baseHealth: 5, color: 0x9900ff, points: 500, create(group, material) { const skull = new THREE.Mesh(new THREE.SphereGeometry(this.size * 0.4, 8, 8), material); skull.scale.set(1, 1.2, 0.8); group.add(skull); const socketMat = new THREE.MeshBasicMaterial({ color: 0x000000 }); const socket1 = new THREE.Mesh(new THREE.SphereGeometry(0.25, 8, 8), socketMat); socket1.position.set(-0.35, 0.2, this.size * 0.3); group.add(socket1); const socket2 = new THREE.Mesh(new THREE.SphereGeometry(0.25, 8, 8), socketMat); socket2.position.set(0.35, 0.2, this.size * 0.3); group.add(socket2); const eyeMat = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const eye1 = new THREE.Mesh(new THREE.SphereGeometry(0.12, 8, 8), eyeMat); eye1.position.set(-0.35, 0.2, this.size * 0.35); group.add(eye1); const eye2 = new THREE.Mesh(new THREE.SphereGeometry(0.12, 8, 8), eyeMat); eye2.position.set(0.35, 0.2, this.size * 0.35); group.add(eye2); const hornMat = material.clone(); hornMat.color.setHex(0xff0066); const horn1 = new THREE.Mesh(new THREE.ConeGeometry(0.15, 1.0, 6), hornMat); horn1.position.set(-0.5, 0.7, 0); horn1.rotation.z = 0.4; group.add(horn1); const horn2 = new THREE.Mesh(new THREE.ConeGeometry(0.15, 1.0, 6), hornMat); horn2.position.set(0.5, 0.7, 0); horn2.rotation.z = -0.4; group.add(horn2); const jaw = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.3, 0.4), material.clone()); jaw.position.set(0, -0.5, this.size * 0.2); group.add(jaw); const teethMat = new THREE.MeshBasicMaterial({ color: 0xffffff }); for (let i = 0; i < 5; i++) { const tooth = new THREE.Mesh(new THREE.ConeGeometry(0.06, 0.2, 4), teethMat); tooth.position.set(-0.24 + i * 0.12, -0.35, this.size * 0.35); tooth.rotation.x = Math.PI; group.add(tooth); } }, }, }; function createEnemy() { const type = difficulty.getEnemyType(); const config = enemyTypes[type]; const health = Math.max(config.baseHealth, difficulty.getEnemyHealth()); const group = new THREE.Group(); const material = new THREE.MeshBasicMaterial({ color: config.color, transparent: true, opacity: 0.9, }); config.create(group, material); group.position.set((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 15, -150 - Math.random() * 50); const baseSpeed = difficulty.baseSpeed + Math.random() * 0.15; group.userData = { type, speed: baseSpeed * difficulty.speedMultiplier, rotSpeed: (Math.random() - 0.5) * 0.1, size: config.size, health, maxHealth: health, points: config.points, hitFlash: 0, originalColor: config.color, }; scene.add(group); enemies.push(group); } for (let i = 0; i < 200; i++) { particlePool.push(createParticle()); } function createParticle() { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(3); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ size: 0.2, color: 0xffffff, transparent: true, blending: THREE.AdditiveBlending, }); const particle = new THREE.Points(geometry, material); particle.visible = false; particle.userData.velocity = new THREE.Vector3(); particle.userData.life = 0; scene.add(particle); return particle; } function spawnExplosion(position, color, intensity = 1) { const particleCount = Math.floor(30 * intensity); for (let i = 0; i < particleCount; i++) { let particle = particlePool.pop(); if (!particle) particle = createParticle(); const posArray = particle.geometry.attributes.position.array; posArray[0] = position.x; posArray[1] = position.y; posArray[2] = position.z; particle.geometry.attributes.position.needsUpdate = true; particle.material.color.setHex(color); particle.material.opacity = 1; particle.visible = true; const speed = (Math.random() * 0.5 + 0.2) * intensity; particle.userData.velocity.set( (Math.random() - 0.5) * speed, (Math.random() - 0.5) * speed, (Math.random() - 0.5) * speed, ); particle.userData.life = 1; activeParticles.push(particle); } } function spawnHitEffect(position) { spawnExplosion(position, 0xffff00, 0.3); } function renderLeaderboard(entries, user) { if (!leaderboardContainer) return; leaderboardContainer.innerHTML = '

Global Top 10

'; if (!entries || entries.length === 0) { leaderboardContainer.innerHTML += '

No scores yet. Be the first!

'; } else { const table = document.createElement('table'); table.className = 'lb-table'; entries.forEach((entry, index) => { const tr = document.createElement('tr'); const normalizedEntry = entry.username?.toLowerCase?.() ?? ''; const normalizedUser = user?.username?.toLowerCase?.() ?? ''; if (user && normalizedEntry === normalizedUser) { tr.classList.add('is-you'); } tr.innerHTML = ` #${index + 1} ${entry.username} ${entry.score} `; table.appendChild(tr); }); leaderboardContainer.appendChild(table); } leaderboardContainer.style.display = 'block'; if (user) { const yourRank = document.createElement('div'); yourRank.className = 'your-rank'; yourRank.innerHTML = ` Your Rank #${user.rank} ${user.score} `; leaderboardContainer.appendChild(yourRank); } } async function submitScore() { if (!submissionForm || !submitBtn) return; const usernameInput = document.getElementById('username-input'); const username = usernameInput?.value?.trim() ?? ''; if (!username) { usernameInput?.classList.add('input--error'); setTimeout(() => usernameInput?.classList.remove('input--error'), 1800); return; } submitBtn.disabled = true; submitBtn.textContent = 'Submitting...'; try { const res = await fetch('/api/leaderboard/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, score, gameSlug: 'space', }), }); const data = await res.json(); if (data.ok) { submissionForm.style.display = 'none'; document.getElementById('username-input').value = ''; renderLeaderboard(data.leaderboard, data.user); } else { alert('Error submitting score: ' + (data.error || 'Unknown error')); submitBtn.disabled = false; submitBtn.textContent = 'Submit Score'; } } catch (error) { console.error(error); alert('Network error. Please try again.'); submitBtn.disabled = false; submitBtn.textContent = 'Submit Score'; } } const gridGeometry = new THREE.PlaneGeometry(200, 400, 40, 80); const gridMaterial = new THREE.ShaderMaterial({ vertexShader: ` varying vec2 vUv; varying float vZ; void main() { vUv = uv; vec4 mvPos = modelViewMatrix * vec4(position, 1.0); vZ = -mvPos.z; gl_Position = projectionMatrix * mvPos; } `, fragmentShader: ` varying vec2 vUv; varying float vZ; uniform float time; void main() { vec2 uv = vUv; uv.y = fract(uv.y + time * 0.05); float lineX = smoothstep(0.02, 0.0, abs(fract(uv.x * 20.0) - 0.5)); float lineY = smoothstep(0.02, 0.0, abs(fract(uv.y * 40.0) - 0.5)); float grid = max(lineX, lineY); vec3 color = vec3(1.0, 0.0, 1.0) * grid; float fog = exp(-vZ * 0.015); gl_FragColor = vec4(color * fog, grid * fog * 0.8); } `, uniforms: { time: { value: 0 } }, transparent: true, side: THREE.DoubleSide, }); const grid = new THREE.Mesh(gridGeometry, gridMaterial); grid.rotation.x = -Math.PI / 2; grid.position.y = -8; grid.position.z = -100; scene.add(grid); function detectMobile() { isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0; if (isMobile) document.body.classList.add('mobile'); } detectMobile(); document.addEventListener('keydown', (e) => { switch (e.code) { case 'ArrowUp': case 'KeyW': keys.up = true; break; case 'ArrowDown': case 'KeyS': keys.down = true; break; case 'ArrowLeft': case 'KeyA': keys.left = true; break; case 'ArrowRight': case 'KeyD': keys.right = true; break; case 'Space': keys.fire = true; e.preventDefault(); break; } }); document.addEventListener('keyup', (e) => { switch (e.code) { case 'ArrowUp': case 'KeyW': keys.up = false; break; case 'ArrowDown': case 'KeyS': keys.down = false; break; case 'ArrowLeft': case 'KeyA': keys.left = false; break; case 'ArrowRight': case 'KeyD': keys.right = false; break; case 'Space': keys.fire = false; break; } }); const joystick = document.getElementById('joystick'); const joystickKnob = document.getElementById('joystickKnob'); const fireZone = document.getElementById('fireZone'); const submissionForm = document.getElementById('submission-form'); const leaderboardContainer = document.getElementById('leaderboard-container'); const submitBtn = document.getElementById('submit-btn'); let joystickActive = false; let joystickCenter = { x: 0, y: 0 }; joystick.addEventListener('touchstart', (e) => { e.preventDefault(); joystickActive = true; const rect = joystick.getBoundingClientRect(); joystickCenter = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, }; }); document.addEventListener( 'touchmove', (e) => { if (!joystickActive) return; e.preventDefault(); for (let touch of e.touches) { const dx = touch.clientX - joystickCenter.x; const dy = touch.clientY - joystickCenter.y; const distance = Math.min(Math.sqrt(dx * dx + dy * dy), 40); const angle = Math.atan2(dy, dx); const knobX = Math.cos(angle) * distance; const knobY = Math.sin(angle) * distance; joystickKnob.style.transform = `translate(calc(-50% + ${knobX}px), calc(-50% + ${knobY}px))`; joystickInput.x = knobX / 40; joystickInput.y = -knobY / 40; } }, { passive: false }, ); document.addEventListener('touchend', () => { joystickActive = false; joystickKnob.style.transform = 'translate(-50%, -50%)'; joystickInput.x = 0; joystickInput.y = 0; }); fireZone.addEventListener('touchstart', (e) => { e.preventDefault(); if (!gameOver) fireLaser(); }); fireZone.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false }); document.getElementById('restartBtn').addEventListener('click', restartGame); submitBtn?.addEventListener('click', submitScore); function restartGame() { score = 0; gameOver = false; difficulty.level = 1; difficulty.speedMultiplier = 1.0; difficulty.spawnInterval = difficulty.baseSpawnInterval; document.getElementById('score').textContent = '0'; document.getElementById('levelNum').textContent = '1'; document.getElementById('waveSpeed').textContent = '1.0'; document.getElementById('gameOver').style.display = 'none'; ship.position.set(0, 0, 0); shipTarget.x = 0; shipTarget.y = 0; enemies.forEach((e) => scene.remove(e)); enemies.length = 0; activeLasers.forEach((l) => { l.visible = false; laserPool.push(l); }); activeLasers.length = 0; activeParticles.forEach((p) => { p.visible = false; particlePool.push(p); }); activeParticles.length = 0; submissionForm?.style.setProperty('display', 'flex'); leaderboardContainer?.style.setProperty('display', 'none'); document.getElementById('username-input').value = ''; if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Submit Score'; } } function endGame() { gameOver = true; document.getElementById('finalScore').textContent = score; document.getElementById('finalLevel').textContent = difficulty.level; document.getElementById('gameOver').style.display = 'flex'; spawnExplosion(ship.position, 0xff0066, 2); submissionForm?.style.setProperty('display', 'flex'); leaderboardContainer?.style.setProperty('display', 'none'); if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Submit Score'; } } let spawnTimer = 0; const clock = new THREE.Clock(); let time = 0; function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); time += delta; nebulaMaterial.uniforms.time.value = time; sunMaterial.uniforms.time.value = time; gridMaterial.uniforms.time.value = time; const starPositions = starfield.geometry.attributes.position.array; for (let i = 0; i < starPositions.length; i += 3) { starPositions[i + 2] += delta * 20; if (starPositions[i + 2] > 10) { starPositions[i + 2] = -500; starPositions[i] = (Math.random() - 0.5) * 400; starPositions[i + 1] = (Math.random() - 0.5) * 400; } } starfield.geometry.attributes.position.needsUpdate = true; if (!gameOver) { difficulty.update(); const acceleration = 0.15; const friction = 0.92; const maxSpeed = 0.4; if (isMobile) { shipVelocity.x += joystickInput.x * acceleration; shipVelocity.y += joystickInput.y * acceleration; } else { if (keys.left) shipVelocity.x -= acceleration; if (keys.right) shipVelocity.x += acceleration; if (keys.up) shipVelocity.y += acceleration; if (keys.down) shipVelocity.y -= acceleration; } shipVelocity.x *= friction; shipVelocity.y *= friction; shipVelocity.x = Math.max(-maxSpeed, Math.min(maxSpeed, shipVelocity.x)); shipVelocity.y = Math.max(-maxSpeed, Math.min(maxSpeed, shipVelocity.y)); ship.position.x += shipVelocity.x; ship.position.y += shipVelocity.y; ship.position.x = Math.max(-12, Math.min(12, ship.position.x)); ship.position.y = Math.max(-8, Math.min(8, ship.position.y)); ship.rotation.z = -shipVelocity.x * 2; ship.rotation.x = shipVelocity.y * 0.5; if (keys.fire) fireLaser(); spawnTimer += delta * 1000; if (spawnTimer > difficulty.spawnInterval) { createEnemy(); spawnTimer = 0; } for (let i = activeLasers.length - 1; i >= 0; i--) { const laser = activeLasers[i]; laser.position.z -= 2; if (laser.position.z < -200) { laser.visible = false; laserPool.push(laser); activeLasers.splice(i, 1); continue; } for (let j = enemies.length - 1; j >= 0; j--) { const enemy = enemies[j]; const dist = laser.position.distanceTo(enemy.position); if (dist < enemy.userData.size + 0.5) { enemy.userData.health--; enemy.userData.hitFlash = 0.3; spawnHitEffect(laser.position); laser.visible = false; laserPool.push(laser); activeLasers.splice(i, 1); if (enemy.userData.health <= 0) { const explosionIntensity = enemy.userData.size / 0.6; spawnExplosion(enemy.position, enemy.userData.originalColor, explosionIntensity); scene.remove(enemy); enemies.splice(j, 1); score += enemy.userData.points; document.getElementById('score').textContent = score; } break; } } } for (let i = enemies.length - 1; i >= 0; i--) { const enemy = enemies[i]; enemy.position.z += enemy.userData.speed; enemy.rotation.x += enemy.userData.rotSpeed; enemy.rotation.y += enemy.userData.rotSpeed; if (enemy.userData.hitFlash > 0) { enemy.userData.hitFlash -= delta; enemy.traverse((child) => { if (child.isMesh && child.material) { child.material.color.setHex(0xffffff); } }); } else { const healthRatio = enemy.userData.health / enemy.userData.maxHealth; enemy.traverse((child) => { if (child.isMesh && child.material && child.material.color) { const originalColor = new THREE.Color(enemy.userData.originalColor); const damageColor = new THREE.Color(0xff3300); child.material.color.copy(originalColor).lerp(damageColor, 1 - healthRatio); } }); } const dist = enemy.position.distanceTo(ship.position); if (dist < enemy.userData.size + 0.8) { endGame(); break; } if (enemy.position.z > 15) { scene.remove(enemy); enemies.splice(i, 1); } } } for (let i = activeParticles.length - 1; i >= 0; i--) { const particle = activeParticles[i]; const pos = particle.geometry.attributes.position.array; pos[0] += particle.userData.velocity.x; pos[1] += particle.userData.velocity.y; pos[2] += particle.userData.velocity.z; particle.geometry.attributes.position.needsUpdate = true; particle.userData.life -= delta * 2; particle.material.opacity = particle.userData.life; if (particle.userData.life <= 0) { particle.visible = false; particlePool.push(particle); activeParticles.splice(i, 1); } } camera.position.x = ship.position.x * 0.3; camera.position.y = ship.position.y * 0.2 + 2; composer.render(); } window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); }); animate();