index.html
Changed around line 1
-
-
- WaveWar: Fight drones with Waves. Save earth.
-
-
-
-
-
-
-
- property="og:title"
- content="ScrollHub Globe: Real-time Request Visualizer"
- />
-
-
-
- rel="source"
- type="application/git"
- title="Source Code Repository"
- href="globe.scroll"
- />
+
+
+ SpaceFight: Fight drones with Waves. Save earth.
+
+
+
+
+
+
wavewar.css
Changed around line 22: canvas {
- top: 3px;
- left: 3px;
+ top: 20px;
+ left: 20px;
+ padding: 10px 20px;
- color: rgba(255, 255, 255, 0.5);
+ color: #4CAF50;
+ font-size: 24px;
+ font-family: monospace;
WaveWar.js
Changed around line 193: class Globe {
- this.empCooldown = false
- this.soundCooldown = false
- this.empCooldownDuration = 1000
- this.soundCooldownDuration = 1000
+ this.cooldownDuration = 1000
Changed around line 300: class Globe {
- @keyframes cooldown {
- from {
- background: linear-gradient(to top,
- var(--button-color) 0%,
- transparent 0%);
- }
- to {
- background: linear-gradient(to top,
- var(--button-color) 100%,
- transparent 100%);
- }
- }
-
Changed around line 310: class Globe {
- transition: transform 0.2s ease;
+ transition: transform 0.5s ease;
Changed around line 319: class Globe {
- opacity: 0.7;
- animation: cooldown 1s linear;
+ background-color: transparent !important;
Changed around line 395: class Globe {
- }, this.soundCooldownDuration)
+ }, this.cooldownDuration)
Changed around line 473: class Globe {
- // Start animation loop for this wave
- const animateWave = () => {
- const elapsed = Date.now() - wave.startTime
- const progress = elapsed / wave.duration
-
- if (progress >= 1) {
- this.scene.remove(wave.mesh)
- wave.geometry.dispose()
- wave.material.dispose()
- this.activeWaves = this.activeWaves.filter((w) => w !== wave)
- } else {
- const scale = 1 + (wave.maxScale - 1) * progress
- wave.mesh.scale.set(scale, scale, scale)
- wave.material.uniforms.time.value = progress
- requestAnimationFrame(animateWave)
- }
- }
-
- requestAnimationFrame(animateWave)
+ // Add to active waves and return
+ this.activeWaves.push(wave)
Changed around line 795: class Globe {
+ // Update all waves in the main animation loop
+ this.activeWaves = this.activeWaves.filter((wave) => {
+ const elapsed = currentTime - wave.startTime
+ const progress = elapsed / wave.duration
+
+ if (progress >= 1) {
+ this.scene.remove(wave.mesh)
+ wave.geometry.dispose()
+ wave.material.dispose()
+ return false
+ }
+
+ const scale = 1 + (wave.maxScale - 1) * progress
+ wave.mesh.scale.set(scale, scale, scale)
+ wave.material.uniforms.time.value = progress
+ return true
+ })
+
WaveWar.js
Changed around line 155: class Drone {
+ // Keep only the essential properties that shouldn't be reset
+ this.animationId = null
+ this.gameOverScreen = null
+ this.empButton = null
+ this.soundButton = null
+
+ // Basic initialization
+ this.createScoreDisplay()
+ this.isDragging = false
+ this.previousMousePosition = { x: 0, y: 0 }
+ this.shouldRotate = true
+ }
+
+ setupGame() {
+ // Game state
- this.animationId = null
- this.earthHealth = 1.0 // 1.0 = full health, 0 = dead
+ this.earthHealth = 1.0
- this.createScoreDisplay()
-
- // Camera control properties
- this.isDragging = false
- this.previousMousePosition = {
- x: 0,
- y: 0,
- }
- // Camera orbit properties
+ // Camera settings
- x: Math.PI * 0.1, // slightly above equator
- y: Math.PI * 0.6, // west of prime meridian
+ x: Math.PI * 0.1,
+ y: Math.PI * 0.6,
-
- // Zoom properties
- // Replace separate wave arrays with unified array
+ // Wave and weapon settings
- // Store button references
- this.empButton = null
- this.soundButton = null
-
+ // Drone settings
- this.droneSpawnInterval = 1000 // Spawn a new drone every 2 seconds
- this.maxDrones = 200 // Maximum number of drones allowed
+ this.droneSpawnInterval = 1000
+ this.maxDrones = 200
+
+ // Initialize scene, camera, renderer
+ this.scene = new THREE.Scene()
+ const height = window.innerHeight - 100
+ this.camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / height,
+ 0.1,
+ 1000,
+ )
+ this.updateCameraPosition()
+
+ // Set up renderer
+ this.renderer = new THREE.WebGLRenderer({ antialias: true })
+ this.renderer.setSize(window.innerWidth, height)
+ this.renderer.setClearColor(0x000000)
+ document.body.prepend(this.renderer.domElement)
+
+ // Create game elements
+ this.createStarField()
+ this.createEarth()
+ this.setupLighting()
+
+ // Set up controls
+ this.setupMouseControls()
+ this.setupZoomControls()
+
+ // Reset score display
+ document.getElementById("score-display").textContent = "Drones Destroyed: 0"
+
+ // Start animation
+ this.animate()
+ }
+
+ createEarth() {
+ const geometry = new THREE.SphereGeometry(0.5, 32, 32)
+ const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
+ const material = new THREE.MeshPhongMaterial({
+ map: texture,
+ specular: 0x333333,
+ shininess: 5,
+ emissive: 0xff0000,
+ emissiveIntensity: 0,
+ })
+
+ this.earth = new THREE.Mesh(geometry, material)
+ this.scene.add(this.earth)
+ }
+
+ setupLighting() {
+ const ambientLight = new THREE.AmbientLight(0xfffffff)
+ this.scene.add(ambientLight)
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4)
+ directionalLight.position.set(5, 3, 5)
+ this.scene.add(directionalLight)
+ }
+
+ createGlobe() {
+ this.removeGlobe()
+ this.setupGame()
+ return this
Changed around line 561: class Globe {
- createGlobe() {
- // Ensure any previous globe and animation is removed
- this.removeGlobe()
-
- // Initialize scene, camera, renderer, etc.
- this.scene = new THREE.Scene()
- const height = window.innerHeight - 100
- this.camera = new THREE.PerspectiveCamera(
- 75,
- window.innerWidth / height,
- 0.1,
- 1000,
- )
-
- // Set initial camera position
- this.cameraDistance = 1
- this.updateCameraPosition()
-
- // Set up renderer with alpha and better quality
- this.renderer = new THREE.WebGLRenderer({ antialias: true })
- this.renderer.setSize(window.innerWidth, height)
- this.renderer.setClearColor(0x000000) // Set background to black
- document.body.prepend(this.renderer.domElement)
-
- // Create starry background
- this.createStarField()
-
- // Create Earth with better lighting
- const geometry = new THREE.SphereGeometry(0.5, 32, 32)
- const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- const material = new THREE.MeshPhongMaterial({
- map: texture,
- specular: 0x333333,
- shininess: 5,
- emissive: 0xff0000, // Red glow for damage
- emissiveIntensity: 0, // Start with no damage glow
- })
-
- this.earth = new THREE.Mesh(geometry, material)
- this.scene.add(this.earth)
-
- // Add ambient light
- const ambientLight = new THREE.AmbientLight(0xfffffff)
- this.scene.add(ambientLight)
-
- // Add directional light
- const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4)
- directionalLight.position.set(5, 3, 5)
- this.scene.add(directionalLight)
-
- // Add mouse and zoom controls
- this.setupMouseControls()
- this.setupZoomControls()
-
- // Start the animation loop
- this.animate()
-
- return this
- }
-
Changed around line 612: class Globe {
- // Create game over text
- const gameOverDiv = document.createElement("div")
- gameOverDiv.style.position = "fixed"
- gameOverDiv.style.top = "50%"
- gameOverDiv.style.left = "50%"
- gameOverDiv.style.transform = "translate(-50%, -50%)"
- gameOverDiv.style.color = "#ff0000"
- gameOverDiv.style.fontSize = "64px"
- gameOverDiv.style.fontFamily = "Arial, sans-serif"
- gameOverDiv.style.fontWeight = "bold"
- gameOverDiv.style.textShadow = "0 0 10px #ff0000"
- gameOverDiv.style.zIndex = "1000"
- gameOverDiv.innerHTML = `GAME OVER
Score: ${this.score}`
Score: ${this.score}`
- document.body.appendChild(gameOverDiv)
+ // Create game over screen
+ this.createGameOverScreen()
+ createGameOverScreen() {
+ // Create container for game over screen
+ const gameOverScreen = document.createElement("div")
+ gameOverScreen.style.position = "fixed"
+ gameOverScreen.style.top = "50%"
+ gameOverScreen.style.left = "50%"
+ gameOverScreen.style.transform = "translate(-50%, -50%)"
+ gameOverScreen.style.textAlign = "center"
+ gameOverScreen.style.color = "#ff0000"
+ gameOverScreen.style.fontFamily = "Arial, sans-serif"
+ gameOverScreen.style.zIndex = "1000"
+
+ // Game Over text
+ const gameOverText = document.createElement("div")
+ gameOverText.textContent = "GAME OVER"
+ gameOverText.style.fontSize = "64px"
+ gameOverText.style.fontWeight = "bold"
+ gameOverText.style.textShadow = "0 0 10px #ff0000"
+ gameOverText.style.marginBottom = "20px"
+
+ // Score text
+ const scoreText = document.createElement("div")
+ scoreText.textContent = `Score: ${this.score}`
+ scoreText.style.fontSize = "32px"
+ scoreText.style.marginBottom = "40px"
+
+ // Play Again button
+ const playAgainButton = document.createElement("button")
+ playAgainButton.textContent = "Play Again"
+ playAgainButton.style.padding = "15px 30px"
+ playAgainButton.style.fontSize = "24px"
+ playAgainButton.style.backgroundColor = "#4CAF50"
+ playAgainButton.style.color = "white"
+ playAgainButton.style.border = "none"
+ playAgainButton.style.borderRadius = "5px"
+ playAgainButton.style.cursor = "pointer"
+ playAgainButton.style.transition = "background-color 0.3s"
+
+ // Hover effect
+ playAgainButton.addEventListener("mouseover", () => {
+ playAgainButton.style.backgroundColor = "#45a049"
+ })
+ playAgainButton.addEventListener("mouseout", () => {
+ playAgainButton.style.backgroundColor = "#4CAF50"
+ })
+
+ // Click event
+ playAgainButton.addEventListener("click", () => this.resetGame())
+
+ // Add elements to game over screen
+ gameOverScreen.appendChild(gameOverText)
+ gameOverScreen.appendChild(scoreText)
+ gameOverScreen.appendChild(playAgainButton)
+
+ // Store reference and add to document
+ this.gameOverScreen = gameOverScreen
+ document.body.appendChild(gameOverScreen)
+ }
+
+ resetGame() {
+ // Remove existing elements
+ this.removeGlobe()
+
+ if (this.gameOverScreen) {
+ this.gameOverScreen.remove()
+ this.gameOverScreen = null
+ }
+
+ // Reset buttons
+ if (this.empButton) {
+ this.empButton.classList.remove("cooldown")
+ this.empButton.style.cursor = "pointer"
+ this.empButton.style.opacity = "1"
+ }
+ if (this.soundButton) {
+ this.soundButton.classList.remove("cooldown")
+ this.soundButton.style.cursor = "pointer"
+ this.soundButton.style.opacity = "1"
+ }
+
+ // Reinitialize game
+ this.setupGame()
+ }
+
WaveWar.js
Changed around line 1
- this.speed = 0.01 + Math.random() * 0.2
+ this.speed = 0.01 + Math.random() * 0.2 + globe.droneSpeedMultiplier
Changed around line 80: class Drone {
+ // Update the Drone class's checkWaveCollisions method
- // Check EMP waves
- this.globe.activeEMPWaves.forEach((wave) => {
- const waveRadius = wave.mesh.scale.x * 0.5
- const distanceFromCenter = this.position.length()
- if (
- Math.abs(distanceFromCenter - waveRadius) < 0.05 &&
- !this.isExploding
- ) {
- this.startExplosion()
- }
- })
-
- // Check Sound waves
- this.globe.activeSoundWaves.forEach((wave) => {
+ // Check all active waves
+ this.globe.activeWaves.forEach((wave) => {
Changed around line 187: class Globe {
- this.activeEMPWaves = []
+ // Replace separate wave arrays with unified array
+ this.activeWaves = []
- this.empCooldownDuration = 20 // 300ms cooldown
-
- // Add sound wave properties
- this.activeSoundWaves = []
- this.soundCooldownDuration = 20 // 300ms cooldown like EMP
+ this.empCooldownDuration = 1000
+ this.soundCooldownDuration = 1000
+
+ // Store button references
+ this.empButton = null
+ this.soundButton = null
+ this.droneSpeedMultiplier = 0
Changed around line 237: class Globe {
- // Controller shape background
- const controllerShape = document.createElement("div")
- controllerShape.style.position = "absolute"
- controllerShape.style.top = "0"
- controllerShape.style.left = "0"
- controllerShape.style.right = "0"
- controllerShape.style.bottom = "0"
- controllerShape.style.borderRadius = "15px"
- controllerShape.style.border = "2px solid rgba(255, 255, 255, 0.2)"
- controllerShape.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)"
- controlPanel.appendChild(controllerShape)
+ // Add styles for the cooldown animation
+ const style = document.createElement("style")
+ style.textContent = `
+ @keyframes cooldown {
+ from {
+ background: linear-gradient(to top,
+ var(--button-color) 0%,
+ transparent 0%);
+ }
+ to {
+ background: linear-gradient(to top,
+ var(--button-color) 100%,
+ transparent 100%);
+ }
+ }
+
+ .control-button {
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ color: white;
+ position: relative;
+ transition: transform 0.2s ease;
+ }
+
+ .control-button:not(.cooldown):hover {
+ transform: scale(1.1);
+ }
+
+ .control-button.cooldown {
+ cursor: not-allowed;
+ opacity: 0.7;
+ animation: cooldown 1s linear;
+ }
+ `
+ document.head.appendChild(style)
Changed around line 287: class Globe {
- button.style.width = "40px"
- button.style.height = "40px"
+ button.className = "control-button"
+ button.style.setProperty("--button-color", color)
- button.style.color = "white"
- button.style.border = "none"
- button.style.borderRadius = "50%"
- button.style.cursor = "pointer"
- button.style.fontSize = "16px"
- button.style.fontWeight = "bold"
- button.style.boxShadow = "0 0 5px rgba(0, 0, 0, 0.3)"
- button.style.transition = "all 0.2s ease"
-
- button.addEventListener("mouseenter", () => {
- if (!this[action.toLowerCase() + "Cooldown"]) {
- button.style.transform = "scale(1.1)"
- button.style.boxShadow = "0 0 10px " + color
- }
- })
- button.addEventListener("mouseleave", () => {
- button.style.transform = "scale(1)"
- button.style.boxShadow = "0 0 5px rgba(0, 0, 0, 0.3)"
- })
+ // Create buttons with their base colors
+ // Store button references
+ this.empButton = empButton
+ this.soundButton = soundButton
+
Changed around line 333: class Globe {
+ const button = action === "EMP" ? this.empButton : this.soundButton
+
Changed around line 342: class Globe {
- // Handle cooldown
+ // Handle cooldown and animation
+ button.classList.add("cooldown")
+
+ button.classList.remove("cooldown")
-
- triggerSound() {
- const soundGeometry = new THREE.SphereGeometry(0.5, 32, 32)
- const soundMaterial = new THREE.ShaderMaterial({
- transparent: true,
- uniforms: {
- time: { value: 0 },
- color: { value: new THREE.Color(0x2196f3) },
- maxRadius: { value: 5.0 },
- },
- vertexShader: `
- varying vec3 vNormal;
- void main() {
- vNormal = normalize(normalMatrix * normal);
- gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
- }
- `,
- fragmentShader: `
- uniform float time;
- uniform vec3 color;
- uniform float maxRadius;
- varying vec3 vNormal;
-
- void main() {
- float intensity = 1.0 - (time * time);
- float edge = 0.5;
- float rim = smoothstep(0.5 - edge, 0.5 + edge, dot(vNormal, vec3(0.0, 0.0, 1.0)));
- float wave = sin(time * 20.0) * 0.5 + 0.5;
- gl_FragColor = vec4(color, intensity * (1.0 - rim) * wave * 0.7);
- }
- `,
+ triggerEMP() {
+ const wave = this.triggerWave({
+ type: "emp",
+ color: 0x00ff00,
+ duration: 2000,
+ maxScale: 10,
+ pulseEffect: false,
-
- const soundWave = new THREE.Mesh(soundGeometry, soundMaterial)
- this.scene.add(soundWave)
-
- const wave = {
- mesh: soundWave,
- geometry: soundGeometry,
- material: soundMaterial,
- startTime: Date.now(),
- duration: 4000, // Increased from 2000 to 4000 for slower wave
- maxScale: 8,
- }
-
- this.activeSoundWaves.push(wave)
-
- if (this.activeSoundWaves.length === 1) {
- this.animateSoundWaves()
- }
+ this.activeWaves.push(wave)
- animateSoundWaves() {
- for (let i = this.activeSoundWaves.length - 1; i >= 0; i--) {
- const wave = this.activeSoundWaves[i]
- const elapsed = Date.now() - wave.startTime
- const progress = elapsed / wave.duration
-
- if (progress >= 1) {
- this.scene.remove(wave.mesh)
- wave.geometry.dispose()
- wave.material.dispose()
- this.activeSoundWaves.splice(i, 1)
- } else {
- // Slower expansion rate
- const scale = 1 + (wave.maxScale - 1) * (progress * 0.5) // Added 0.5 multiplier to slow expansion
- wave.mesh.scale.set(scale, scale, scale)
- wave.material.uniforms.time.value = progress
- }
- }
-
- if (this.activeSoundWaves.length > 0) {
- requestAnimationFrame(() => this.animateSoundWaves())
- }
+ triggerSound() {
+ const wave = this.triggerWave({
+ type: "sound",
+ color: 0x2196f3,
+ duration: 4000,
+ maxScale: 8,
+ pulseEffect: true,
+ })
+ this.activeWaves.push(wave)
- triggerEMP() {
- // Create a sphere geometry for the EMP wave
- const empGeometry = new THREE.SphereGeometry(0.5, 32, 32)
- const empMaterial = new THREE.ShaderMaterial({
+ triggerWave(config) {
+ const {
+ type,
+ color = 0x00ff00,
+ duration = 2000,
+ maxScale = 10,
+ pulseEffect = false,
+ } = config
+
+ const waveGeometry = new THREE.SphereGeometry(0.5, 32, 32)
+ const waveMaterial = new THREE.ShaderMaterial({
- color: { value: new THREE.Color(0x00ff00) },
+ color: { value: new THREE.Color(color) },
- varying vec3 vNormal;
- void main() {
- vNormal = normalize(normalMatrix * normal);
- gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
- }
- `,
+ varying vec3 vNormal;
+ void main() {
+ vNormal = normalize(normalMatrix * normal);
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+ `,
- uniform float time;
- uniform vec3 color;
- uniform float maxRadius;
- varying vec3 vNormal;
-
- void main() {
- float intensity = 1.0 - (time * time); // Inverse square law decay
- float edge = 0.2;
- float rim = smoothstep(0.5 - edge, 0.5 + edge, dot(vNormal, vec3(0.0, 0.0, 1.0)));
- gl_FragColor = vec4(color, intensity * (1.0 - rim) * 0.5);
- }
- `,
+ uniform float time;
+ uniform vec3 color;
+ uniform float maxRadius;
+ varying vec3 vNormal;
+
+ void main() {
+ float intensity = 1.0 - (time * time);
+ float edge = 0.5;
+ float rim = smoothstep(0.5 - edge, 0.5 + edge, dot(vNormal, vec3(0.0, 0.0, 1.0)));
+ ${pulseEffect ? "float wave = sin(time * 20.0) * 0.5 + 0.5;" : "float wave = 1.0;"}
+ gl_FragColor = vec4(color, intensity * (1.0 - rim) * wave * 0.7);
+ }
+ `,
- const empWave = new THREE.Mesh(empGeometry, empMaterial)
- this.scene.add(empWave)
+ const waveMesh = new THREE.Mesh(waveGeometry, waveMaterial)
+ this.scene.add(waveMesh)
- // Create wave object to track this specific wave
- mesh: empWave,
- geometry: empGeometry,
- material: empMaterial,
+ type,
+ mesh: waveMesh,
+ geometry: waveGeometry,
+ material: waveMaterial,
- duration: 2000, // 2 seconds
- maxScale: 10,
+ duration,
+ maxScale,
- // Add to active waves array
- this.activeEMPWaves.push(wave)
-
- // Modify the animate method to handle multiple waves
- if (this.activeEMPWaves.length === 1) {
- // Only start if this is the first wave
- this.animateEMPWaves()
- }
- }
-
- animateEMPWaves() {
- // Process all active waves
- for (let i = this.activeEMPWaves.length - 1; i >= 0; i--) {
- const wave = this.activeEMPWaves[i]
+ // Start animation loop for this wave
+ const animateWave = () => {
- // Remove completed wave
- this.activeEMPWaves.splice(i, 1)
+ this.activeWaves = this.activeWaves.filter((w) => w !== wave)
- // Update wave
+ requestAnimationFrame(animateWave)
- // Continue animation if there are still active waves
- if (this.activeEMPWaves.length > 0) {
- requestAnimationFrame(() => this.animateEMPWaves())
- }
+ requestAnimationFrame(animateWave)
+ return wave
Changed around line 763: class Globe {
+ this.droneSpeedMultiplier += 0.001
WaveWar.js
Changed around line 56: class Drone {
- update(delta) {
- if (this.globe.gameOver) return;
+ update(delta) {
+ if (this.globe.gameOver) return
Changed around line 110: class Drone {
- this.globe.score++;
- document.getElementById('score-display').textContent = `Drones Destroyed: ${this.globe.score}`;
+ this.globe.score++
+ document.getElementById("score-display").textContent =
+ `Drones Destroyed: ${this.globe.score}`
Changed around line 139: class Drone {
- // Modify the Drone class's updateExplosion method
+ // Modify the Drone class's updateExplosion method
- const elapsed = Date.now() - this.explosionStartTime;
- const progress = elapsed / this.explosionDuration;
+ const elapsed = Date.now() - this.explosionStartTime
+ const progress = elapsed / this.explosionDuration
- this.globe.scene.remove(this.mesh);
- this.globe.scene.remove(this.explosionParticles);
- this.globe.drones = this.globe.drones.filter((d) => d !== this);
-
- return;
+ this.globe.scene.remove(this.mesh)
+ this.globe.scene.remove(this.explosionParticles)
+ this.globe.drones = this.globe.drones.filter((d) => d !== this)
+
+ return
- particle.position.add(particle.velocity);
- particle.scale.multiplyScalar(0.95);
- });
+ particle.position.add(particle.velocity)
+ particle.scale.multiplyScalar(0.95)
+ })
- this.mesh.scale.multiplyScalar(0.9);
+ this.mesh.scale.multiplyScalar(0.9)
Changed around line 173: class Globe {
- this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- this.gameOver = false;
- this.score = 0;
- this.createScoreDisplay();
+ this.earthHealth = 1.0 // 1.0 = full health, 0 = dead
+ this.gameOver = false
+ this.score = 0
+ this.createScoreDisplay()
Changed around line 195: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- this.currentZoom = .7
+ this.currentZoom = 0.7
Changed around line 213: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
-
- createScoreDisplay() {
- const scoreDisplay = document.createElement("div");
- scoreDisplay.style.position = "fixed";
- scoreDisplay.style.top = "20px";
- scoreDisplay.style.right = "20px";
- scoreDisplay.style.padding = "10px 20px";
- scoreDisplay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
- scoreDisplay.style.color = "#4CAF50";
- scoreDisplay.style.borderRadius = "10px";
- scoreDisplay.style.fontSize = "24px";
- scoreDisplay.style.fontFamily = "monospace";
- scoreDisplay.style.zIndex = "1000";
- scoreDisplay.style.border = "1px solid rgba(76, 175, 80, 0.3)";
- scoreDisplay.id = "score-display";
- scoreDisplay.textContent = "Drones Destroyed: 0";
- document.body.appendChild(scoreDisplay);
+ createScoreDisplay() {
+ const scoreDisplay = document.createElement("div")
+ scoreDisplay.style.position = "fixed"
+ scoreDisplay.style.top = "20px"
+ scoreDisplay.style.right = "20px"
+ scoreDisplay.style.padding = "10px 20px"
+ scoreDisplay.style.backgroundColor = "rgba(0, 0, 0, 0.8)"
+ scoreDisplay.style.color = "#4CAF50"
+ scoreDisplay.style.borderRadius = "10px"
+ scoreDisplay.style.fontSize = "24px"
+ scoreDisplay.style.fontFamily = "monospace"
+ scoreDisplay.style.zIndex = "1000"
+ scoreDisplay.style.border = "1px solid rgba(76, 175, 80, 0.3)"
+ scoreDisplay.id = "score-display"
+ scoreDisplay.textContent = "Drones Destroyed: 0"
+ document.body.appendChild(scoreDisplay)
-
Changed around line 314: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- }else if (e.key.toLowerCase() === " ") {
+ } else if (e.key.toLowerCase() === " ") {
- }
- else if (e.key.toLowerCase() === "f") {
+ } else if (e.key.toLowerCase() === "f") {
Changed around line 341: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- triggerSound() {
+ triggerSound() {
Changed around line 574: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
-
-
- const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
+ const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- emissive: 0xff0000, // Red glow for damage
- emissiveIntensity: 0 // Start with no damage glow
+ emissive: 0xff0000, // Red glow for damage
+ emissiveIntensity: 0, // Start with no damage glow
-
Changed around line 608: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- if (this.gameOver) return;
-
- this.earthHealth = Math.max(0, this.earthHealth - 0.1); // Reduce health by 10%
- this.earth.material.emissiveIntensity = 1 - this.earthHealth; // Increase red glow
+ if (this.gameOver) return
+
+ this.earthHealth = Math.max(0, this.earthHealth - 0.1) // Reduce health by 10%
+ this.earth.material.emissiveIntensity = 1 - this.earthHealth // Increase red glow
- this.triggerGameOver();
+ this.triggerGameOver()
-
- this.gameOver = true;
-
+ this.gameOver = true
+
- const particleCount = 1000;
- const particles = new THREE.Group();
-
+ const particleCount = 1000
+ const particles = new THREE.Group()
+
- const geometry = new THREE.BoxGeometry(0.02, 0.02, 0.02);
+ const geometry = new THREE.BoxGeometry(0.02, 0.02, 0.02)
- });
- const particle = new THREE.Mesh(geometry, material);
-
+ })
+ const particle = new THREE.Mesh(geometry, material)
+
- const theta = Math.random() * Math.PI * 2;
- const phi = Math.random() * Math.PI;
- const radius = 0.5;
-
- particle.position.x = radius * Math.sin(phi) * Math.cos(theta);
- particle.position.y = radius * Math.sin(phi) * Math.sin(theta);
- particle.position.z = radius * Math.cos(phi);
-
+ const theta = Math.random() * Math.PI * 2
+ const phi = Math.random() * Math.PI
+ const radius = 0.5
+
+ particle.position.x = radius * Math.sin(phi) * Math.cos(theta)
+ particle.position.y = radius * Math.sin(phi) * Math.sin(theta)
+ particle.position.z = radius * Math.cos(phi)
+
- .multiplyScalar(0.03);
- particle.velocity = velocity;
-
- particles.add(particle);
+ .multiplyScalar(0.03)
+ particle.velocity = velocity
+
+ particles.add(particle)
-
- this.scene.add(particles);
- this.explosionParticles = particles;
+
+ this.scene.add(particles)
+ this.explosionParticles = particles
- this.earth.visible = false;
+ this.earth.visible = false
- const gameOverDiv = document.createElement('div');
- gameOverDiv.style.position = 'fixed';
- gameOverDiv.style.top = '50%';
- gameOverDiv.style.left = '50%';
- gameOverDiv.style.transform = 'translate(-50%, -50%)';
- gameOverDiv.style.color = '#ff0000';
- gameOverDiv.style.fontSize = '64px';
- gameOverDiv.style.fontFamily = 'Arial, sans-serif';
- gameOverDiv.style.fontWeight = 'bold';
- gameOverDiv.style.textShadow = '0 0 10px #ff0000';
- gameOverDiv.style.zIndex = '1000';
- gameOverDiv.innerHTML = `GAME OVER
Score: ${this.score}`;
Score: ${this.score}`;
- document.body.appendChild(gameOverDiv);
+ const gameOverDiv = document.createElement("div")
+ gameOverDiv.style.position = "fixed"
+ gameOverDiv.style.top = "50%"
+ gameOverDiv.style.left = "50%"
+ gameOverDiv.style.transform = "translate(-50%, -50%)"
+ gameOverDiv.style.color = "#ff0000"
+ gameOverDiv.style.fontSize = "64px"
+ gameOverDiv.style.fontFamily = "Arial, sans-serif"
+ gameOverDiv.style.fontWeight = "bold"
+ gameOverDiv.style.textShadow = "0 0 10px #ff0000"
+ gameOverDiv.style.zIndex = "1000"
+ gameOverDiv.innerHTML = `GAME OVER
Score: ${this.score}`
Score: ${this.score}`
+ document.body.appendChild(gameOverDiv)
- this.animateExplosion();
+ this.animateExplosion()
- if (!this.explosionParticles) return;
-
- this.explosionParticles.children.forEach(particle => {
- particle.position.add(particle.velocity);
- particle.scale.multiplyScalar(0.98);
- });
-
- requestAnimationFrame(() => this.animateExplosion());
+ if (!this.explosionParticles) return
+
+ this.explosionParticles.children.forEach((particle) => {
+ particle.position.add(particle.velocity)
+ particle.scale.multiplyScalar(0.98)
+ })
+
+ requestAnimationFrame(() => this.animateExplosion())
Changed around line 806: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- this.drones.length < this.maxDrones && !this.gameOver
+ this.drones.length < this.maxDrones &&
+ !this.gameOver
- this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * .95)
+ this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * 0.95)
-
- const distanceFromCenter = drone.position.length();
- if (distanceFromCenter <= 0.52) { // Slightly larger than Earth's radius (0.5)
- this.damageEarth();
- drone.startExplosion();
+ const distanceFromCenter = drone.position.length()
+ if (distanceFromCenter <= 0.52) {
+ // Slightly larger than Earth's radius (0.5)
+ this.damageEarth()
+ drone.startExplosion()
- });
+ })
Changed around line 918: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- if (!document.fullscreenElement) {
- document.body.requestFullscreen().catch((err) => {
- console.log(
- `Error trying to go fullscreen: ${err.message} (${err.name})`,
- )
- })
- } else {
- document.exitFullscreen()
- }
+ if (!document.fullscreenElement) {
+ document.body.requestFullscreen().catch((err) => {
+ console.log(
+ `Error trying to go fullscreen: ${err.message} (${err.name})`,
+ )
+ })
+ } else {
+ document.exitFullscreen()
+ }
-
WaveWar.js
Changed around line 209: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- this.maxDrones = 500 // Maximum number of drones allowed
+ this.maxDrones = 200 // Maximum number of drones allowed
WaveWar.js
Changed around line 209: this.earthHealth = 1.0; // 1.0 = full health, 0 = dead
- this.maxDrones = 1000 // Maximum number of drones allowed
+ this.maxDrones = 500 // Maximum number of drones allowed
Changed around line 816: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * .98)
+ this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * .95)
WaveWar.js
Changed around line 816: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * .99)
+ this.droneSpawnInterval = Math.max(10, this.droneSpawnInterval * .98)
WaveWar.js
Changed around line 812: const texture = new THREE.TextureLoader().load("earth_atmos_2048.jpg")
- this.drones.length < this.maxDrones
+ this.drones.length < this.maxDrones && !this.gameOver