🏆 Global Leaderboard

`; document.body.appendChild(leaderboardElement); const leaderboardList = leaderboardElement.querySelector('#leaderboardList'); const closeLeaderboardButton = leaderboardElement.querySelector('#closeLeaderboardButton'); const codeRedeemElement = document.createElement('div'); codeRedeemElement.style.position = 'absolute'; codeRedeemElement.style.top = '50%'; codeRedeemElement.style.left = '50%'; codeRedeemElement.style.transform = 'translate(-50%, -50%)'; codeRedeemElement.style.backgroundColor = 'rgba(0, 0, 50, 0.9)'; codeRedeemElement.style.border = '2px solid #ffd700'; codeRedeemElement.style.borderRadius = '10px'; codeRedeemElement.style.padding = '20px'; codeRedeemElement.style.color = 'white'; codeRedeemElement.style.fontSize = '18px'; codeRedeemElement.style.fontFamily = 'Arial'; codeRedeemElement.style.textAlign = 'center'; codeRedeemElement.style.display = 'none'; // Hidden by default codeRedeemElement.style.zIndex = '100'; codeRedeemElement.style.flexDirection = 'column'; codeRedeemElement.style.gap = '15px'; codeRedeemElement.style.minWidth = '300px'; codeRedeemElement.innerHTML = `

Redeem Code

`; document.body.appendChild(codeRedeemElement); const redeemCodeInput = codeRedeemElement.querySelector('#redeemCodeInput'); const redeemButton = codeRedeemElement.querySelector('#redeemCodeButton'); const redeemMessage = codeRedeemElement.querySelector('#redeemMessage'); const closeCodeButton = codeRedeemElement.querySelector('#closeCodeButton'); const profileElement = document.createElement('div'); profileElement.style.position = 'absolute'; profileElement.style.top = '50%'; profileElement.style.left = '50%'; profileElement.style.transform = 'translate(-50%, -50%)'; profileElement.style.backgroundColor = 'rgba(0, 0, 50, 0.95)'; profileElement.style.border = '2px solid #9932cc'; profileElement.style.borderRadius = '10px'; profileElement.style.padding = '20px'; profileElement.style.color = 'white'; profileElement.style.fontSize = '18px'; profileElement.style.fontFamily = 'Arial'; profileElement.style.textAlign = 'center'; profileElement.style.display = 'none'; profileElement.style.zIndex = '100'; profileElement.style.flexDirection = 'column'; profileElement.style.gap = '15px'; profileElement.style.minWidth = '350px'; profileElement.style.maxHeight = '70vh'; profileElement.style.overflowY = 'auto'; profileElement.innerHTML = `

Profile Manager

`; document.body.appendChild(profileElement); const profilesSection = profileElement.querySelector('#profilesSection'); const profileListElement = profileElement.querySelector('#profileList') || profilesSection; const newProfileInput = profileElement.querySelector('#newProfileInput'); const createProfileButton = profileElement.querySelector('#createProfileButton'); const profileMessage = profileElement.querySelector('#profileMessage'); const closeProfileButton = profileElement.querySelector('#closeProfileButton'); let lastShotTime = 0; // For fire rate control let profileOpen = false; let profilePicMesh = null; // Profile management functions function saveToProfile(profileName) { const profile = profiles.find(p => p.name === profileName); if (profile) { profile.credits = credits; profile.highScore = highScore; profile.playerColor = playerColor; profile.enemyColor = enemyColor; profile.shooterIndex = currentShooterIndex; profile.profilePicture = profilePictureConfig; profile.hasAdminPanel = hasAdminPanel; profile.usedCodes = [...usedCodes]; profile.friends = profile.friends || []; localStorage.setItem('voidProfiles', JSON.stringify(profiles)); localStorage.setItem('voidActiveProfile', profileName); localStorage.setItem('voidProfilePictureConfig', JSON.stringify(profilePictureConfig)); activeProfile = profileName; } } function updateLeaderboard() { localStorage.setItem('voidLeaderboard', JSON.stringify(leaderboard)); } function submitToLeaderboard(score, playerName) { leaderboard.push({ name: playerName, profile: activeProfile, score: score, date: new Date().toISOString() }); // Sort by score descending leaderboard.sort((a, b) => b.score - a.score); // Keep only top 10 leaderboard = leaderboard.slice(0, 10); updateLeaderboard(); } function showLeaderboard() { leaderboardElement.style.display = 'flex'; updateLeaderboardUI(); } function hideLeaderboard() { leaderboardElement.style.display = 'none'; leaderboardButton.style.display = 'block'; } function updateLeaderboardUI() { leaderboardList.innerHTML = ''; if (leaderboard.length === 0) { const noScoresDiv = document.createElement('div'); noScoresDiv.innerHTML = 'No scores yet!
Be the first!'; noScoresDiv.style.padding = '20px'; noScoresDiv.style.color = '#888'; leaderboardList.appendChild(noScoresDiv); return; } leaderboard.forEach((entry, index) => { const entryDiv = document.createElement('div'); entryDiv.style.padding = '12px'; entryDiv.style.borderBottom = '1px solid #444'; entryDiv.style.display = 'flex'; entryDiv.style.justifyContent = 'space-between'; entryDiv.style.alignItems = 'center'; entryDiv.style.backgroundColor = index === 0 ? 'rgba(255, 215, 0, 0.2)' : index === 1 ? 'rgba(192, 192, 192, 0.2)' : index === 2 ? 'rgba(205, 127, 50, 0.2)' : 'transparent'; const rankSpan = document.createElement('span'); rankSpan.style.fontSize = '24px'; rankSpan.style.fontWeight = 'bold'; rankSpan.innerText = (index + 1) + '.'; rankSpan.style.minWidth = '30px'; rankSpan.style.color = index === 0 ? '#ffd700' : index === 1 ? '#c0c0c0' : index === 2 ? '#cd7f32' : 'white'; const nameSpan = document.createElement('span'); nameSpan.innerHTML = `${entry.name}
(${entry.profile})`; nameSpan.style.textAlign = 'left'; nameSpan.style.flex = 1; nameSpan.style.marginLeft = '10px'; const scoreSpan = document.createElement('span'); scoreSpan.innerText = entry.score.toLocaleString(); scoreSpan.style.fontSize = '20px'; scoreSpan.style.fontWeight = 'bold'; scoreSpan.style.color = '#ffd700'; entryDiv.appendChild(rankSpan); entryDiv.appendChild(nameSpan); entryDiv.appendChild(scoreSpan); leaderboardList.appendChild(entryDiv); }); } // Leaderboard event handlers leaderboardButton.addEventListener('click', () => { leaderboardButton.style.display = 'none'; showLeaderboard(); }); closeLeaderboardButton.addEventListener('click', hideLeaderboard); function loadProfile(profileName) { const profile = profiles.find(p => p.name === profileName); if (profile) { credits = profile.credits || 0; highScore = profile.highScore || 0; playerColor = profile.playerColor || '#00ff00'; enemyColor = profile.enemyColor || '#880000'; currentShooterIndex = profile.shooterIndex || 0; profilePictureConfig = profile.profilePicture || {shape: 'sphere', color: '#00ff00'}; hasAdminPanel = profile.hasAdminPanel || false; usedCodes = new Set(profile.usedCodes || []); // Update player mesh with new shooter and color scene.remove(player); if (player.geometry) player.geometry.dispose(); if (player.material) { if (Array.isArray(player.material)) { player.material.forEach(mat => mat?.dispose()); } else { player.material.dispose(); } } const currentConfig = shooterConfigs[currentShooterIndex]; const playerMat = currentConfig.playerMaterial.clone(); player = new THREE.Mesh(currentConfig.playerGeometry, playerMat); player.position.y = -1.3; scene.add(player); changePlayerColor(playerColor); setProfilePicture(); saveToProfile(profileName); updateScoreUI(); } } function createNewProfile(profileName) { if (profiles.length >= maxProfiles) { return false; } if (profiles.find(p => p.name.toLowerCase() === profileName.toLowerCase())) { return false; } profiles.push({ name: profileName, credits: 0, highScore: 0, playerColor: '#00ff00', enemyColor: '#880000', shooterIndex: 0, profilePicture: {shape: 'sphere', color: '#00ff00'}, hasAdminPanel: false, usedCodes: [], friends: [] }); localStorage.setItem('voidProfiles', JSON.stringify(profiles)); return true; } function deleteProfile(profileName) { const index = profiles.findIndex(p => p.name === profileName); if (index > -1 && profiles.length > 1) { // Keep at least one profile profiles.splice(index, 1); if (activeProfile === profileName) { activeProfile = profiles[0].name; loadProfile(activeProfile); } localStorage.setItem('voidProfiles', JSON.stringify(profiles)); localStorage.setItem('voidActiveProfile', activeProfile); return true; } return false; } function updateProfileUI() { profileListElement.innerHTML = ''; profiles.forEach(profile => { const profileDiv = document.createElement('div'); profileDiv.style.padding = '12px'; profileDiv.style.border = `2px solid ${activeProfile === profile.name ? '#32cd32' : '#444'}`; profileDiv.style.borderRadius = '8px'; profileDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; profileDiv.style.marginBottom = '10px'; profileDiv.style.display = 'flex'; profileDiv.style.justifyContent = 'space-between'; profileDiv.style.alignItems = 'center'; const profilePreviewCanvas = document.createElement('canvas'); profilePreviewCanvas.width = 40; profilePreviewCanvas.height = 40; profilePreviewCanvas.style.borderRadius = '50%'; profilePreviewCanvas.style.border = '2px solid #444'; const previewCtx = profilePreviewCanvas.getContext('2d'); previewCtx.fillStyle = profile.profilePicture?.color || '#00ff00'; previewCtx.beginPath(); if (profile.profilePicture?.shape === 'cone') { previewCtx.moveTo(20, 5); previewCtx.lineTo(5, 35); previewCtx.lineTo(35, 35); } else if (profile.profilePicture?.shape === 'cylinder') { previewCtx.rect(8, 8, 24, 24); } else { previewCtx.arc(20, 20, 18, 0, Math.PI * 2); } previewCtx.fill(); const infoSpan = document.createElement('span'); infoSpan.innerHTML = ` ${profile.name}
Credits: ${profile.credits} | High: ${profile.highScore} `; infoSpan.style.marginLeft = '10px'; const buttonsDiv = document.createElement('div'); buttonsDiv.style.display = 'flex'; buttonsDiv.style.gap = '5px'; const loadBtn = document.createElement('button'); loadBtn.innerText = activeProfile === profile.name ? 'Active' : 'Load'; loadBtn.style.padding = '6px 12px'; loadBtn.style.fontSize = '12px'; loadBtn.style.borderRadius = '4px'; loadBtn.style.border = 'none'; loadBtn.style.cursor = 'pointer'; loadBtn.style.background = activeProfile === profile.name ? '#32cd32' : '#0077ff'; loadBtn.style.color = 'white'; loadBtn.disabled = activeProfile === profile.name; loadBtn.onclick = () => { saveToProfile(activeProfile); loadProfile(profile.name); updateProfileUI(); profileMessage.innerHTML = `Loaded profile: ${profile.name}`; profileMessage.style.backgroundColor = 'rgba(0, 150, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); }; const deleteBtn = document.createElement('button'); deleteBtn.innerText = 'Delete'; deleteBtn.style.padding = '6px 12px'; deleteBtn.style.fontSize = '12px'; deleteBtn.style.borderRadius = '4px'; deleteBtn.style.border = 'none'; deleteBtn.style.cursor = 'pointer'; deleteBtn.style.background = '#ff4444'; deleteBtn.style.color = 'white'; deleteBtn.onclick = () => { if (confirm(`Delete profile "${profile.name}"? This cannot be undone.`)) { if (deleteProfile(profile.name)) { updateProfileUI(); profileMessage.innerHTML = `Deleted: ${profile.name}`; profileMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); } else { profileMessage.innerHTML = 'Cannot delete: only 1 profile left or active profile'; profileMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); } } }; buttonsDiv.appendChild(loadBtn); buttonsDiv.appendChild(deleteBtn); profileDiv.appendChild(profilePreviewCanvas); profileDiv.appendChild(infoSpan); profileDiv.appendChild(buttonsDiv); profileListElement.appendChild(profileDiv); }); } function showProfileManager() { profileOpen = true; profileElement.style.display = 'flex'; updateProfileUI(); newProfileInput.focus(); } function hideProfileManager() { profileOpen = false; profileElement.style.display = 'none'; openShopButton.style.display = 'block'; codeButton.style.display = 'block'; profileButton.style.display = 'block'; newProfileButton.style.display = 'block'; profileMessage.style.display = 'none'; } // Profile event handlers profileButton.addEventListener('click', () => showProfileManager()); const newProfileHandler = () => { const name = newProfileInput.value.trim(); if (!name) { profileMessage.innerHTML = 'Enter a profile name!'; profileMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); return; } if (createNewProfile(name)) { newProfileInput.value = ''; updateProfileUI(); profileMessage.innerHTML = `Created: ${name}`; profileMessage.style.backgroundColor = 'rgba(0, 150, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); } else { profileMessage.innerHTML = 'Profile exists or max 5 profiles reached!'; profileMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; profileMessage.style.color = 'white'; profileMessage.style.display = 'block'; setTimeout(() => profileMessage.style.display = 'none', 2000); } }; createProfileButton.addEventListener('click', newProfileHandler); newProfileInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') newProfileHandler(); }); closeProfileButton.addEventListener('click', hideProfileManager); // --- Game Reset Function --- // This function resets all game-related state for a new game or restart. function resetGame() { saveToProfile(activeProfile); // Save current profile before reset shopOpen = false; // Ensure shop is closed on reset hideShop(); // Make sure shop UI is hidden hideLeaderboard(); levelCompleteMessage = false; levelCompleteElement.style.display = 'none'; skipLevelButton.style.display = 'none'; // Hide skip button on reset leaderboardButton.style.display = 'block'; profilePicMesh = null; // Clear existing enemies from scene and array enemies.forEach(enemy => { scene.remove(enemy.mesh); if (enemy.mesh.traverse) { // Enemy mesh is a Group enemy.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes (though enemies are Groups) if (enemy.mesh.geometry) enemy.mesh.geometry.dispose(); if (enemy.mesh.material) { if (Array.isArray(enemy.mesh.material)) { enemy.mesh.material.forEach(mat => mat?.dispose()); } else { enemy.mesh.material.dispose(); } } } }); enemies = []; // Clear power-ups powerUps.forEach(powerUp => { scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); }); powerUps = []; // Clear existing bullets from scene and array bullets.forEach(bullet => { scene.remove(bullet.mesh); if (bullet.mesh.geometry) { bullet.mesh.geometry.dispose(); } if (bullet.mesh.material) { if (Array.isArray(bullet.mesh.material)) { bullet.mesh.material.forEach(mat => mat?.dispose()); } else { bullet.mesh.material.dispose(); } } }); bullets = []; // Clear existing boss from scene if (boss) { scene.remove(boss.mesh); if (boss.mesh.traverse) { // Boss mesh is a Group (or Mesh with children) boss.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes if (boss.mesh.geometry) boss.mesh.geometry.dispose(); if (boss.mesh.material) { if (Array.isArray(boss.mesh.material)) { boss.mesh.material.forEach(mat => mat?.dispose()); } else { boss.mesh.material.dispose(); } } } boss = null; } bossActive = false; bossHealth = 0; // Reset player position player.position.set(0, -1.3, 0); // Reset game state variables score = 0; loadProfile(activeProfile); level = 1; enemiesToNextLevel = 20; // Reset for next level progression enemiesKilled = 0; gameOver = false; gameStarted = true; // Game starts immediately after reset globalBossSpawned = false; hideShop(); // Make sure shop UI is hidden openShopButton.style.display = 'block'; codeButton.style.display = 'block'; profileButton.style.display = 'block'; newProfileButton.style.display = 'block'; skipLevelButton.style.display = 'none'; // Clear power-ups powerUps.forEach(powerUp => { scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); }); powerUps = []; // Re-create player mesh with current shooter config scene.remove(player); // Remove old player mesh if (player.geometry) { player.geometry.dispose(); } if (player.material) { if (Array.isArray(player.material)) { player.material.forEach(mat => mat?.dispose()); } else { player.material.dispose(); } } const currentConfig = shooterConfigs[currentShooterIndex]; // Clone the material to ensure individual color changes don't affect other configs const playerMat = currentConfig.playerMaterial.clone(); player = new THREE.Mesh(currentConfig.playerGeometry, playerMat); player.position.y = -1.3; player.position.x = 0; scene.add(player); changePlayerColor(playerColor); // Apply the saved player color // Update UI elements scoreElement.innerHTML = `Score: ${score}
High Score: ${highScore}
Level: ${level}
Credits: ${credits}`; gameOverElement.style.display = 'none'; startScreenElement.style.display = 'none'; // Ensure start screen is hidden } // UI elements function setProfilePicture() { } const scoreElement = document.createElement('div'); scoreElement.style.position = 'absolute'; scoreElement.style.top = '10px'; scoreElement.style.left = '10px'; scoreElement.style.color = 'white'; scoreElement.style.fontSize = '26px'; scoreElement.style.fontFamily = 'Arial'; scoreElement.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; scoreElement.style.padding = '12px'; scoreElement.style.borderRadius = '8px'; scoreElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.5)'; scoreElement.style.textShadow = '1px 1px 2px rgba(0,0,0,0.8)'; scoreElement.innerHTML = `Score: ${score}
High Score: ${highScore}
Level: ${level}
Credits: ${credits}`; document.body.appendChild(scoreElement); // Show leaderboard button visibility leaderboardButton.style.display = gameStarted ? 'block' : 'none'; // Skip level function function skipLevel() { if (gameOver || !gameStarted || levelCompleteMessage) return; if (credits < skipLevelCost) { // Show error message (you can enhance this with a proper UI element later) console.log('Not enough credits! Need 100 credits to skip level.'); return; } // Clear current enemies enemies.forEach(enemy => { scene.remove(enemy.mesh); if (enemy.mesh.traverse) { enemy.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } }); enemies = []; // Clear boss if active if (boss) { scene.remove(boss.mesh); if (boss.mesh.traverse) { boss.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } boss = null; } bossActive = false; // Advance level level++; enemiesToNextLevel += 8; enemiesKilled = 0; globalBossSpawned = false; credits -= skipLevelCost; saveGameData(); updateScoreUI(); } skipLevelButton.addEventListener('click', skipLevel); const loginRewardMessageElement = document.createElement('div'); loginRewardMessageElement.style.position = 'absolute'; loginRewardMessageElement.style.top = '50%'; loginRewardMessageElement.style.left = '50%'; loginRewardMessageElement.style.transform = 'translate(-50%, -50%)'; loginRewardMessageElement.style.backgroundColor = 'rgba(0, 100, 0, 0.9)'; // Dark green loginRewardMessageElement.style.border = '2px solid #00ff00'; loginRewardMessageElement.style.borderRadius = '10px'; loginRewardMessageElement.style.padding = '20px'; loginRewardMessageElement.style.color = 'white'; loginRewardMessageElement.style.fontSize = '28px'; loginRewardMessageElement.style.fontFamily = 'Arial'; loginRewardMessageElement.style.textAlign = 'center'; loginRewardMessageElement.style.display = 'none'; // Hidden by default loginRewardMessageElement.style.zIndex = '101'; // Above shop document.body.appendChild(loginRewardMessageElement); const shopElement = document.createElement('div'); shopElement.style.position = 'absolute'; shopElement.style.top = '50%'; shopElement.style.left = '50%'; shopElement.style.transform = 'translate(-50%, -50%)'; shopElement.style.backgroundColor = 'rgba(0, 0, 50, 0.9)'; // Dark blue transparent background shopElement.style.border = '2px solid #ff6600'; shopElement.style.borderRadius = '10px'; shopElement.style.padding = '20px'; shopElement.style.color = 'white'; shopElement.style.fontSize = '18px'; shopElement.style.fontFamily = 'Arial'; shopElement.style.textAlign = 'center'; shopElement.style.display = 'none'; // Hidden by default shopElement.style.zIndex = '100'; // Ensure it's on top shopElement.style.width = 'fit-content'; // Fit content, allowing it to expand shopElement.style.minWidth = '280px'; // Ensure a minimum width for readability shopElement.style.maxWidth = '90%'; // Max width for larger screens shopElement.style.maxHeight = '90%'; // Max height for scrolling shopElement.style.overflowY = 'auto'; // Enable vertical scrolling shopElement.style.display = 'flex'; // Use flexbox for overall shop layout shopElement.style.flexDirection = 'column'; // Arrange content vertically shopElement.style.alignItems = 'center'; // Center items horizontally shopElement.style.gap = '20px'; // Space between shop header, items, and close button shopElement.style.display = 'none'; // Hidden by default shopElement.innerHTML = `

Void Shop

Player Color Customization

Cost: ${colorCustomizationCost} Credits

Enemy Color Customization

Cost: ${enemyColorCustomizationCost} Credits

Profile Picture Customization

Cost: ${profilePicCustomizationCost} Credits

Shape:

`; document.body.appendChild(shopElement); const shopItemsElement = shopElement.querySelector('#shopItems'); const closeShopButton = shopElement.querySelector('#closeShopButton'); const playerColorInput = shopElement.querySelector('#playerColorInput'); const applyPlayerColorButton = shopElement.querySelector('#applyPlayerColorButton'); const playerColorMessage = shopElement.querySelector('#playerColorMessage'); const enemyColorInput = shopElement.querySelector('#enemyColorInput'); const applyEnemyColorButton = shopElement.querySelector('#applyEnemyColorButton'); const enemyColorMessage = shopElement.querySelector('#enemyColorMessage'); const profilePicShapeSelect = shopElement.querySelector('#profilePicShape'); const profilePicColorInput = shopElement.querySelector('#profilePicColorInput'); const applyProfilePicButton = shopElement.querySelector('#applyProfilePicButton'); const profilePicMessage = shopElement.querySelector('#profilePicMessage'); const resetPlayerColorButton = shopElement.querySelector('#resetPlayerColorButton'); const resetEnemyColorButton = shopElement.querySelector('#resetEnemyColorButton'); const resetProfilePicButton = shopElement.querySelector('#resetProfilePicButton'); const startScreenElement = document.createElement('div'); startScreenElement.style.position = 'absolute'; startScreenElement.style.top = '0'; startScreenElement.style.left = '0'; startScreenElement.style.width = '100vw'; startScreenElement.style.height = '100vh'; startScreenElement.style.background = 'linear-gradient(135deg, #000011 0%, #000044 50%, #000022 100%)'; startScreenElement.style.display = 'flex'; startScreenElement.style.flexDirection = 'column'; startScreenElement.style.justifyContent = 'center'; startScreenElement.style.alignItems = 'center'; startScreenElement.style.textAlign = 'center'; startScreenElement.style.zIndex = '50'; document.body.appendChild(startScreenElement); // Cover scene setup const coverScene = new THREE.Scene(); coverScene.fog = new THREE.Fog(0x000022, 1, 15); const coverCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100); coverCamera.position.set(0, 0, 3); const coverRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); coverRenderer.setSize(window.innerWidth, window.innerHeight); coverRenderer.setClearColor(0x000000, 0); const coverContainer = document.createElement('div'); coverContainer.style.position = 'absolute'; coverContainer.style.top = '0'; coverContainer.style.left = '0'; coverContainer.style.width = '100%'; coverContainer.style.height = '100%'; startScreenElement.appendChild(coverContainer); coverContainer.appendChild(coverRenderer.domElement); // Stars for cover const starsGeometry = new THREE.BufferGeometry(); const starsCount = 500; const starPositions = new Float32Array(starsCount * 3); for (let i = 0; i < starsCount * 3; i += 3) { starPositions[i] = (Math.random() - 0.5) * 20; starPositions[i + 1] = (Math.random() - 0.5) * 20; starPositions[i + 2] = (Math.random() - 0.5) * 20; } starsGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02 }); const stars = new THREE.Points(starsGeometry, starsMaterial); coverScene.add(stars); // Spaceship model function createSpaceship() { const shipGroup = new THREE.Group(); // Fuselage const fuselageGeometry = new THREE.CylinderGeometry(0.15, 0.12, 0.8, 12); const fuselageMaterial = new THREE.MeshStandardMaterial({ color: 0x4a90e2, metalness: 0.8, roughness: 0.2, emissive: 0x112244, emissiveIntensity: 0.3 }); const fuselage = new THREE.Mesh(fuselageGeometry, fuselageMaterial); fuselage.rotation.z = Math.PI / 2; shipGroup.add(fuselage); // Cockpit const cockpitGeometry = new THREE.SphereGeometry(0.18, 16, 16); const cockpitMaterial = new THREE.MeshStandardMaterial({ color: 0x88ccff, emissive: 0x336699, emissiveIntensity: 0.4, transparent: true, opacity: 0.8 }); const cockpit = new THREE.Mesh(cockpitGeometry, cockpitMaterial); cockpit.position.set(0, 0, 0.3); shipGroup.add(cockpit); // Wings const wingGeometry = new THREE.BoxGeometry(0.6, 0.03, 0.25); const wingMaterial = new THREE.MeshStandardMaterial({ color: 0x336699, metalness: 0.6, roughness: 0.3 }); const leftWing = new THREE.Mesh(wingGeometry, wingMaterial); leftWing.position.set(-0.35, 0, 0); leftWing.rotation.y = Math.PI / 6; shipGroup.add(leftWing); const rightWing = new THREE.Mesh(wingGeometry, wingMaterial); rightWing.position.set(0.35, 0, 0); rightWing.rotation.y = -Math.PI / 6; shipGroup.add(rightWing); // Engines const engineGeometry = new THREE.CylinderGeometry(0.08, 0.1, 0.25, 8); const engineMaterial = new THREE.MeshStandardMaterial({ color: 0x222244, emissive: 0x0066ff, emissiveIntensity: 0.6 }); const leftEngine = new THREE.Mesh(engineGeometry, engineMaterial); leftEngine.rotation.z = Math.PI / 2; leftEngine.position.set(-0.2, -0.25, -0.35); shipGroup.add(leftEngine); const rightEngine = new THREE.Mesh(engineGeometry, engineMaterial); rightEngine.rotation.z = Math.PI / 2; rightEngine.position.set(0.2, -0.25, -0.35); shipGroup.add(rightEngine); // Engine glow const glowGeometry = new THREE.SphereGeometry(0.12, 8, 8); const glowMaterial = new THREE.MeshBasicMaterial({ color: 0x00aaff, transparent: true, opacity: 0.6 }); const leftGlow = new THREE.Mesh(glowGeometry, glowMaterial); leftGlow.position.set(-0.2, -0.25, -0.45); shipGroup.add(leftGlow); const rightGlow = new THREE.Mesh(glowGeometry, glowMaterial); rightGlow.position.set(0.2, -0.25, -0.45); shipGroup.add(rightGlow); return shipGroup; } const spaceship = createSpaceship(); spaceship.position.set(0, 0, 0); coverScene.add(spaceship); // Cover lights const coverLight = new THREE.DirectionalLight(0xffffff, 0.8); coverLight.position.set(1, 1, 1); coverScene.add(coverLight); const coverAmbient = new THREE.AmbientLight(0x404040, 0.4); coverScene.add(coverAmbient); // Title text overlay const titleDiv = document.createElement('div'); titleDiv.style.color = 'white'; titleDiv.style.fontSize = '48px'; titleDiv.style.fontFamily = 'Arial, sans-serif'; titleDiv.style.textShadow = '0 0 20px #ff6600'; titleDiv.style.marginBottom = '20px'; titleDiv.style.zIndex = '10'; titleDiv.innerHTML = '

Welcome to the best shooter!

Survive the Void

'; startScreenElement.appendChild(titleDiv); // Start button const startButton = document.createElement('button'); startButton.id = 'startButton'; startButton.innerText = 'Start Game'; startButton.style.padding = '15px 40px'; startButton.style.fontSize = '24px'; startButton.style.background = 'linear-gradient(45deg, #ff6600, #ff8800)'; startButton.style.color = 'white'; startButton.style.border = 'none'; startButton.style.borderRadius = '10px'; startButton.style.cursor = 'pointer'; startButton.style.fontWeight = 'bold'; startButton.style.boxShadow = '0 8px 20px rgba(255, 102, 0, 0.4)'; startButton.style.textShadow = '0 2px 4px rgba(0,0,0,0.5)'; startButton.style.zIndex = '10'; startButton.style.transition = 'all 0.3s ease'; startScreenElement.appendChild(startButton); // Cover animation function let coverTime = 0; function animateCover() { coverTime += 0.016; // Rotate stars stars.rotation.y += 0.002; stars.rotation.x += 0.001; // Rotate spaceship gently spaceship.rotation.y = Math.sin(coverTime * 0.3) * 0.2 + coverTime * 0.1; spaceship.rotation.x = Math.sin(coverTime * 0.4) * 0.1; // Engine glow pulse const engines = spaceship.children.filter(child => child.material && child.material.emissive && child.material.emissiveIntensity ); const pulse = Math.sin(coverTime * 4) * 0.3 + 0.7; engines.forEach(engine => { engine.material.emissiveIntensity = pulse; }); coverRenderer.render(coverScene, coverCamera); requestAnimationFrame(animateCover); } animateCover(); function redeemCode() { const code = redeemCodeInput.value.trim().toUpperCase(); if (!code) { redeemMessage.innerHTML = 'Enter a code!'; redeemMessage.style.backgroundColor = 'rgba(255, 0, 0, 0.9)'; redeemMessage.style.color = 'white'; redeemMessage.style.display = 'block'; setTimeout(() => redeemMessage.style.display = 'none', 2000); return; } const validCodes = { 'WARRIORS': 50, 'GOLDEN': 100, 'VOID': 25, 'TACO': 75, 'LUCAS': 25, 'ADMIN200': 200, 'ADMIN': 200, 'STARFISH': 30, 'ALIEN': 60, 'PLANET': 40, 'DESMOND': 67, 'DEUTSCHLAND': 50, '369369': 1000, '123123': 100 }; if (usedCodes.has(code)) { redeemMessage.innerHTML = 'Code already redeemed!'; redeemMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; redeemMessage.style.color = 'white'; redeemMessage.style.display = 'block'; setTimeout(() => redeemMessage.style.display = 'none', 2000); return; } if (validCodes[code]) { const reward = validCodes[code]; credits += reward; usedCodes.add(code); saveToProfile(activeProfile); updateScoreUI(); redeemMessage.innerHTML = `+${reward} credits!`; redeemMessage.style.backgroundColor = 'rgba(0, 150, 0, 0.9)'; redeemMessage.style.color = 'white'; redeemMessage.style.display = 'block'; redeemCodeInput.value = ''; setTimeout(() => redeemMessage.style.display = 'none', 2000); } else { redeemMessage.innerHTML = 'Invalid code!'; redeemMessage.style.backgroundColor = 'rgba(150, 0, 0, 0.9)'; redeemMessage.style.color = 'white'; redeemMessage.style.display = 'block'; setTimeout(() => redeemMessage.style.display = 'none', 2000); } } const startHandler = () => { saveToProfile(activeProfile); // Save before starting new game resetGame(); // Reset game state and start // gameStarted is set to true within resetGame() startScreenElement.style.display = 'none'; checkLoginReward(); // Check for login reward on game start // Play audio on user interaction if (audio.buffer) { audio.play().catch(e => console.log("Audio autoplay prevented:", e)); } }; startButton.addEventListener('click', startHandler); // Attach the event listener here startButton.addEventListener('mouseenter', () => { startButton.style.transform = 'scale(1.05)'; startButton.style.boxShadow = '0 12px 30px rgba(255, 102, 0, 0.6)'; }); startButton.addEventListener('mouseleave', () => { startButton.style.transform = 'scale(1)'; startButton.style.boxShadow = '0 8px 20px rgba(255, 102, 0, 0.4)'; }); let codeRedeemOpen = false; // Storing handler references for proper cleanup const showCodeRedeemHandler = () => { codeRedeemOpen = true; codeRedeemElement.style.display = 'flex'; redeemCodeInput.focus(); // Focus on the input field }; codeButton.addEventListener('click', showCodeRedeemHandler); const redeemCodeHandler = redeemCode; // Use the existing named function redeemButton.addEventListener('click', redeemCodeHandler); const hideCodeRedeemHandler = () => { codeRedeemOpen = false; codeRedeemElement.style.display = 'none'; openShopButton.style.display = 'block'; codeButton.style.display = 'block'; profileButton.style.display = 'block'; newProfileButton.style.display = 'block'; redeemMessage.style.display = 'none'; // Hide any previous messages }; closeCodeButton.addEventListener('click', hideCodeRedeemHandler); function showCodeRedeem() { codeRedeemOpen = true; codeRedeemElement.style.display = 'flex'; redeemCodeInput.focus(); // Focus on the input field } function hideCodeRedeem() { codeRedeemOpen = false; codeRedeemElement.style.display = 'none'; openShopButton.style.display = 'block'; codeButton.style.display = 'block'; profileButton.style.display = 'block'; newProfileButton.style.display = 'block'; redeemMessage.style.display = 'none'; // Hide any previous messages } codeButton.addEventListener('click', showCodeRedeem); redeemButton.addEventListener('click', redeemCode); closeCodeButton.addEventListener('click', hideCodeRedeem); const gameOverElement = document.createElement('div'); gameOverElement.style.position = 'absolute'; gameOverElement.style.top = '50%'; gameOverElement.style.left = '50%'; gameOverElement.style.transform = 'translate(-50%, -50%)'; gameOverElement.style.color = 'red'; gameOverElement.style.fontSize = '48px'; gameOverElement.style.fontFamily = 'Arial'; gameOverElement.style.display = 'none'; // Using specific IDs for score displays to update them without recreating the button gameOverElement.innerHTML = `

You Died!

Final Score: 0

High Score: 0

`; document.body.appendChild(gameOverElement); const levelCompleteElement = document.createElement('div'); levelCompleteElement.style.position = 'absolute'; levelCompleteElement.style.top = '50%'; levelCompleteElement.style.left = '50%'; levelCompleteElement.style.transform = 'translate(-50%, -50%)'; levelCompleteElement.style.color = '#00ff00'; levelCompleteElement.style.fontSize = '48px'; levelCompleteElement.style.fontFamily = 'Arial'; levelCompleteElement.style.backgroundColor = 'rgba(0, 0, 50, 0.9)'; levelCompleteElement.style.border = '3px solid #00ff00'; levelCompleteElement.style.borderRadius = '15px'; levelCompleteElement.style.padding = '30px'; levelCompleteElement.style.textAlign = 'center'; levelCompleteElement.style.display = 'none'; levelCompleteElement.style.zIndex = '100'; levelCompleteElement.innerHTML = `

Level Completed!

Level ${level}

`; document.body.appendChild(levelCompleteElement); const restartButton = gameOverElement.querySelector('#restartButton'); const restartGameHandler = () => { resetGame(); // Call the reset function instead of reloading the page updateGameOverScreen(); // The animation loop will continue automatically as gameOver is now false }; restartButton.addEventListener('click', restartGameHandler); const resetButton = gameOverElement.querySelector('#resetButton'); const resetProgressHandler = () => { highScore = 0; credits = 0; localStorage.setItem('voidHighScore', '0'); localStorage.setItem('voidCredits', '0'); localStorage.removeItem('voidUsedCodes'); // Clear used codes on full reset usedCodes = new Set(); // Reset in-memory set as well updateScoreUI(); updateGameOverScreen(); }; resetButton.addEventListener('click', resetProgressHandler); let shopOpen = false; function updateShopUI() { shopItemsElement.innerHTML = ''; // Clear previous items shopItemsElement.style.display = 'grid'; // Use CSS Grid for items layout shopItemsElement.style.gridTemplateColumns = 'repeat(auto-fit, minmax(220px, 1fr))'; // Responsive grid, slightly smaller min-width shopItemsElement.style.gap = '15px'; // Space between grid items shopItemsElement.style.justifyItems = 'center'; // Center items within their grid cells // Update color input in customization section if (playerColorInput) { playerColorInput.value = playerColor; } if (enemyColorInput) { enemyColorInput.value = enemyColor; } if (profilePicShapeSelect) { profilePicShapeSelect.value = profilePictureConfig.shape; } if (profilePicColorInput) { profilePicColorInput.value = profilePictureConfig.color; } // Shooter items shooterConfigs.forEach((config, index) => { const itemDiv = document.createElement('div'); itemDiv.style.marginBottom = '0'; // No margin-bottom, gap handles spacing itemDiv.style.padding = '15px'; itemDiv.style.border = `1px solid ${index === currentShooterIndex ? '#00ff00' : '#444'}`; itemDiv.style.borderRadius = '8px'; itemDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.3)'; itemDiv.style.display = 'flex'; itemDiv.style.flexDirection = 'column'; // Stack info and button vertically itemDiv.style.alignItems = 'center'; // Center content within each item itemDiv.style.gap = '10px'; // Space between info and button itemDiv.style.width = '100%'; // Ensure items fill their grid cell width itemDiv.style.boxSizing = 'border-box'; // Include padding and border in the element's total width and height const infoDiv = document.createElement('div'); infoDiv.style.textAlign = 'center'; // Center text within info div infoDiv.innerHTML = `

${config.name} ${index === currentShooterIndex ? '(EQUIPPED)' : ''}

Cost: ${config.cost} Credits

Fire Rate: ${1000 / config.fireRate} shots/sec

Adds: ${config.adds || 0}

`; const button = document.createElement('button'); button.style.padding = '10px 20px'; button.style.fontSize = '16px'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.width = '80%'; // Make button wider if (index === currentShooterIndex) { button.innerText = 'Equipped'; button.style.backgroundColor = '#008800'; button.style.color = 'white'; button.style.border = 'none'; button.disabled = true; } else if (credits >= config.cost) { button.innerText = 'Buy & Equip'; button.style.backgroundColor = '#0077ff'; button.style.color = 'white'; button.style.border = 'none'; button.onclick = () => buyShooter(index); } else { button.innerText = 'Too Expensive'; button.style.backgroundColor = '#888'; button.style.color = '#ccc'; button.style.border = 'none'; button.disabled = true; } itemDiv.appendChild(infoDiv); itemDiv.appendChild(button); shopItemsElement.appendChild(itemDiv); }); // Admin Panel item const adminItemDiv = document.createElement('div'); adminItemDiv.style.marginBottom = '0'; adminItemDiv.style.padding = '15px'; adminItemDiv.style.border = `1px solid ${hasAdminPanel ? '#00ff00' : '#444'}`; adminItemDiv.style.borderRadius = '8px'; adminItemDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.3)'; adminItemDiv.style.display = 'flex'; adminItemDiv.style.flexDirection = 'column'; adminItemDiv.style.alignItems = 'center'; adminItemDiv.style.gap = '10px'; adminItemDiv.style.width = '100%'; adminItemDiv.style.boxSizing = 'border-box'; const adminInfoDiv = document.createElement('div'); adminInfoDiv.style.textAlign = 'center'; adminInfoDiv.innerHTML = `

Admin Panel ${hasAdminPanel ? '(PURCHASED)' : ''}

Cost: ${adminPanelCost} Credits

Unlocks admin features

`; const adminButton = document.createElement('button'); adminButton.style.padding = '10px 20px'; adminButton.style.fontSize = '16px'; adminButton.style.borderRadius = '5px'; adminButton.style.cursor = 'pointer'; adminButton.style.width = '80%'; if (hasAdminPanel) { adminButton.innerText = 'Purchased'; adminButton.style.backgroundColor = '#008800'; adminButton.style.color = 'white'; adminButton.style.border = 'none'; adminButton.disabled = true; } else if (credits >= adminPanelCost) { adminButton.innerText = 'Buy Admin Panel'; adminButton.style.backgroundColor = '#ff00ff'; adminButton.style.color = 'white'; adminButton.style.border = 'none'; adminButton.onclick = () => buyAdminPanel(); } else { adminButton.innerText = 'Too Expensive'; adminButton.style.backgroundColor = '#888'; adminButton.style.color = '#ccc'; adminButton.style.border = 'none'; adminButton.disabled = true; } adminItemDiv.appendChild(adminInfoDiv); adminItemDiv.appendChild(adminButton); shopItemsElement.appendChild(adminItemDiv); } function buyShooter(shooterIndex) { const config = shooterConfigs[shooterIndex]; if (credits >= config.cost) { credits -= config.cost; currentShooterIndex = shooterIndex; saveGameData(); // Save credits after purchase // Dispose of old player mesh and create new one scene.remove(player); player.geometry.dispose(); if (Array.isArray(player.material)) { player.material.forEach(mat => mat.dispose()); } else { player.material.dispose(); } player = new THREE.Mesh(config.playerGeometry, config.playerMaterial.clone()); // Clone material to allow individual color changes player.position.y = -1.3; scene.add(player); changePlayerColor(playerColor); // Apply current playerColor to the new mesh updateShopUI(); // Refresh shop display updateScoreUI(); // Update credits display } } function buyAdminPanel() { if (credits >= adminPanelCost) { credits -= adminPanelCost; hasAdminPanel = true; saveToProfile(activeProfile); updateShopUI(); updateScoreUI(); // Show success message in shop const messageDiv = document.createElement('div'); messageDiv.style.padding = '10px'; messageDiv.style.backgroundColor = 'rgba(0, 150, 0, 0.9)'; messageDiv.style.color = 'white'; messageDiv.style.borderRadius = '5px'; messageDiv.style.marginBottom = '10px'; messageDiv.innerText = `Admin Panel Purchased! -${adminPanelCost} credits`; shopItemsElement.parentNode.insertBefore(messageDiv, shopItemsElement); setTimeout(() => { if (messageDiv.parentNode) { messageDiv.parentNode.removeChild(messageDiv); } }, 3000); } } function changePlayerColor(newColor) { playerColor = newColor; if (player && player.material) { if (Array.isArray(player.material)) { player.material.forEach(mat => { if (mat.isMeshStandardMaterial) { mat.color.set(newColor); mat.emissive.set(newColor).multiplyScalar(0.5); // Slightly darker emissive for glow } }); } else if (player.material.isMeshStandardMaterial) { player.material.color.set(newColor); player.material.emissive.set(newColor).multiplyScalar(0.5); // Slightly darker emissive for glow } } saveGameData(); updateShopUI(); // Update shop UI to reflect new color } function changeEnemyColor(newColor) { enemyColor = newColor; enemies.forEach(enemy => { // Enemy is a Group with multiple meshes, we need to traverse it enemy.mesh.traverse(child => { if (child.isMesh && child.material && child.material.isMeshStandardMaterial) { // Update bug body parts (body, head, legs, antennas) if (child.name === 'bugBody' || child.name === 'bugHead' || child.name === 'bugLeg' || child.name === 'bugAntenna') { const intensity = child.name === 'bugBody' ? 0.3 : child.name === 'bugHead' ? 0.4 : 0.2; child.material.color.set(newColor).multiplyScalar(child.name === 'bugBody' ? 0.7 : child.name === 'bugHead' ? 0.5 : 0.4); child.material.emissive.set(newColor).multiplyScalar(intensity); } } }); // Boss also needs color update if active if (boss && boss.mesh) { boss.mesh.traverse(child => { if (child.isMesh && child.material && child.material.isMeshStandardMaterial) { if (child.name === 'bossBody' || child.name === 'arm') { child.material.color.set(newColor); child.material.emissive.set(newColor).multiplyScalar(0.2); } } }); } }); saveGameData(); updateShopUI(); // Update shop UI to reflect new color } function showShop() { shopOpen = true; shopElement.style.display = 'block'; updateShopUI(); // Populate shop items } function hideShop() { shopOpen = false; shopElement.style.display = 'none'; openShopButton.style.display = 'block'; codeButton.style.display = 'block'; profileButton.style.display = 'block'; newProfileButton.style.display = 'block'; } // Storing handler references for proper cleanup const showShopHandler = showShop; // Use the existing named function openShopButton.addEventListener('click', showShopHandler); const hideShopHandler = hideShop; // Use the existing named function closeShopButton.addEventListener('click', hideShopHandler); // New close button listener const applyPlayerColorHandler = () => { if (playerColorInput) { const newColor = playerColorInput.value; if (newColor === playerColor) { // If it's the same color, no cost, just update UI playerColorMessage.innerHTML = 'Color already applied.'; playerColorMessage.style.color = 'yellow'; setTimeout(() => playerColorMessage.innerHTML = '', 2000); return; } if (credits >= colorCustomizationCost) { credits -= colorCustomizationCost; changePlayerColor(newColor); saveGameData(); updateScoreUI(); playerColorMessage.innerHTML = `Color applied! -${colorCustomizationCost} credits.`; playerColorMessage.style.color = 'lightgreen'; setTimeout(() => playerColorMessage.innerHTML = '', 2000); } else { playerColorMessage.innerHTML = `Not enough credits! (${colorCustomizationCost} required)`; playerColorMessage.style.color = 'red'; setTimeout(() => playerColorMessage.innerHTML = '', 2000); } } }; applyPlayerColorButton.addEventListener('click', applyPlayerColorHandler); const applyEnemyColorHandler = () => { if (enemyColorInput) { const newColor = enemyColorInput.value; if (newColor === enemyColor) { // If it's the same color, no cost, just update UI enemyColorMessage.innerHTML = 'Color already applied.'; enemyColorMessage.style.color = 'yellow'; setTimeout(() => enemyColorMessage.innerHTML = '', 2000); return; } if (credits >= enemyColorCustomizationCost) { credits -= enemyColorCustomizationCost; changeEnemyColor(newColor); saveGameData(); updateScoreUI(); enemyColorMessage.innerHTML = `Color applied! -${enemyColorCustomizationCost} credits.`; enemyColorMessage.style.color = 'lightgreen'; setTimeout(() => enemyColorMessage.innerHTML = '', 2000); } else { enemyColorMessage.innerHTML = `Not enough credits! (${enemyColorCustomizationCost} required)`; enemyColorMessage.style.color = 'red'; setTimeout(() => enemyColorMessage.innerHTML = '', 2000); } } }; applyEnemyColorButton.addEventListener('click', applyEnemyColorHandler); const applyProfilePicHandler = () => { if (profilePicShapeSelect && profilePicColorInput) { const newShape = profilePicShapeSelect.value; const newColor = profilePicColorInput.value; const newConfig = {shape: newShape, color: newColor}; const isSame = newConfig.shape === profilePictureConfig.shape && newConfig.color === profilePictureConfig.color; if (isSame) { profilePicMessage.innerHTML = 'Picture already applied.'; profilePicMessage.style.color = 'yellow'; setTimeout(() => profilePicMessage.innerHTML = '', 2000); return; } if (credits >= profilePicCustomizationCost) { credits -= profilePicCustomizationCost; profilePictureConfig = newConfig; setProfilePicture(); saveToProfile(activeProfile); updateScoreUI(); profilePicMessage.innerHTML = `Picture applied! -${profilePicCustomizationCost} credits.`; profilePicMessage.style.color = 'lightgreen'; setTimeout(() => profilePicMessage.innerHTML = '', 2000); } else { profilePicMessage.innerHTML = `Not enough credits! (${profilePicCustomizationCost} required)`; profilePicMessage.style.color = 'red'; setTimeout(() => profilePicMessage.innerHTML = '', 2000); } } }; applyProfilePicButton.addEventListener('click', applyProfilePicHandler); const resetPlayerColorHandler = () => { playerColor = '#00ff00'; playerColorInput.value = playerColor; changePlayerColor(playerColor); saveGameData(); playerColorMessage.innerHTML = 'Player color reset to default!'; playerColorMessage.style.color = 'lightgreen'; setTimeout(() => playerColorMessage.innerHTML = '', 2000); }; resetPlayerColorButton.addEventListener('click', resetPlayerColorHandler); const resetEnemyColorHandler = () => { enemyColor = '#880000'; enemyColorInput.value = enemyColor; changeEnemyColor(enemyColor); saveGameData(); enemyColorMessage.innerHTML = 'Enemy color reset to default!'; enemyColorMessage.style.color = 'lightgreen'; setTimeout(() => enemyColorMessage.innerHTML = '', 2000); }; resetEnemyColorButton.addEventListener('click', resetEnemyColorHandler); const resetProfilePicHandler = () => { profilePictureConfig = {shape: 'sphere', color: '#00ff00'}; profilePicShapeSelect.value = 'sphere'; profilePicColorInput.value = '#00ff00'; setProfilePicture(); saveToProfile(activeProfile); profilePicMessage.innerHTML = 'Profile picture reset to default!'; profilePicMessage.style.color = 'lightgreen'; setTimeout(() => profilePicMessage.innerHTML = '', 2000); }; resetProfilePicButton.addEventListener('click', resetProfilePicHandler); // Store ALL event listener references for cleanup window.__THREE_EVENT_LISTENERS__ = { startButton: startHandler, openShopButton: showShopHandler, closeShopButton: hideShopHandler, skipLevelButton: skipLevel, applyPlayerColorButton: applyPlayerColorHandler, applyEnemyColorButton: applyEnemyColorHandler, applyProfilePicButton: applyProfilePicHandler, restartButton: restartGameHandler, resetButton: resetProgressHandler, resize: onWindowResize, keydown1: document._keydownHandler1, keydown2: document._keydownHandler2, keydown3: document._keydownHandler3, keyup: document._keyupHandler, codeButton: showCodeRedeemHandler, redeemButton: redeemCodeHandler, closeCodeButton: hideCodeRedeemHandler, profileButton: () => showProfileManager(), createProfileButton: newProfileHandler, closeProfileButton: hideProfileManager }; // Attribution const attributionElement = document.createElement('div'); attributionElement.style.position = 'absolute'; attributionElement.style.bottom = '10px'; attributionElement.style.right = '10px'; attributionElement.style.color = 'rgba(255, 255, 255, 0.5)'; // Semi-transparent white attributionElement.style.fontSize = '12px'; attributionElement.style.fontFamily = 'Arial'; attributionElement.innerHTML = 'Lucas Games'; document.body.appendChild(attributionElement); // Warriors message const warriorsElement = document.createElement('div'); warriorsElement.style.position = 'absolute'; warriorsElement.style.bottom = '10px'; warriorsElement.style.left = '10px'; warriorsElement.style.color = 'rgba(255, 255, 255, 0.5)'; // Semi-transparent white warriorsElement.style.fontSize = '12px'; warriorsElement.style.fontFamily = 'Arial'; warriorsElement.innerHTML = 'Support your local Golden state Warriors🏀'; document.body.appendChild(warriorsElement); // Arena message const arenaElement = document.createElement('div'); arenaElement.style.position = 'absolute'; arenaElement.style.bottom = '10px'; arenaElement.style.left = '50%'; arenaElement.style.transform = 'translateX(-50%)'; arenaElement.style.color = 'rgba(255, 255, 255, 0.5)'; // Semi-transparent white arenaElement.style.fontSize = '12px'; arenaElement.style.fontFamily = 'Arial'; arenaElement.innerHTML = 'check out this cool game called arena'; arenaElement.style.zIndex = '10'; document.body.appendChild(arenaElement); function updateGameOverScreen() { const finalScoreDisplay = document.getElementById('finalScoreDisplay'); const highScoreDisplay = document.getElementById('highScoreDisplay'); if (finalScoreDisplay) finalScoreDisplay.innerHTML = `Final Score: ${score}`; if (highScoreDisplay) { highScoreDisplay.innerHTML = `High Score: ${highScore}`; // Display current high score highScoreDisplay.style.color = score > highScore ? '#ffd700' : 'white'; } } function updateScoreUI() { scoreElement.innerHTML = `Score: ${score}
High Score: ${highScore}
Level: ${level}${bossActive ? `
BOSS HP: ${bossHealth}` : ''}
Credits: ${credits}`; leaderboardButton.style.display = gameStarted ? 'block' : 'none'; } function updateTimer() { } function saveGameData() { saveToProfile(activeProfile); } function updateHighScore() { if (score > highScore) { highScore = score; // Submit to global leaderboard const playerName = profiles.find(p => p.name === activeProfile)?.name || activeProfile; submitToLeaderboard(highScore, playerName); updateLeaderboardUI(); } saveGameData(); // Save both high score and credits updateScoreUI(); // Use the new function to update the score display } function checkLoginReward() { const currentTime = Date.now(); const twentyFourHours = 24 * 60 * 60 * 1000; // milliseconds in 24 hours const profileKey = `voidLastLoginRewardCheck_${activeProfile}`; let profileLastCheck = parseInt(localStorage.getItem(profileKey) || '0', 10); if (currentTime - profileLastCheck >= twentyFourHours) { const rewardAmount = 50; // Amount of credits for daily login credits += rewardAmount; profileLastCheck = currentTime; localStorage.setItem(profileKey, profileLastCheck.toString()); saveToProfile(activeProfile); updateScoreUI(); loginRewardMessageElement.innerHTML = `Daily Login Bonus! +${rewardAmount} Credits!`; loginRewardMessageElement.style.display = 'block'; setTimeout(() => { loginRewardMessageElement.style.display = 'none'; }, 3000); // Hide message after 3 seconds } lastLoginRewardCheck = profileLastCheck; } const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(7, 7, 7); scene.add(light); const ambientLight = new THREE.AmbientLight(0x404040, 3); // Soft white light, stronger intensity scene.add(ambientLight); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); // Flag background disabled } window.addEventListener("resize", onWindowResize); function shoot() { if (gameOver || !gameStarted) return; const currentTime = performance.now(); const currentConfig = shooterConfigs[currentShooterIndex]; if (currentTime - lastShotTime < currentConfig.fireRate) { return; // Not ready to shoot yet } lastShotTime = currentTime; const createBullet = (offsetX = 0) => { const bullet = new THREE.Mesh(currentConfig.bulletGeometry, currentConfig.bulletMaterial); bullet.position.copy(player.position); bullet.position.x += offsetX; // Apply offset for dual shot bullet.position.y += 0.1; scene.add(bullet); bullets.push({ mesh: bullet, velocity: currentConfig.bulletVelocity }); } if (currentConfig.dualShot) { createBullet(-0.05); // Left bullet createBullet(0.05); // Right bullet } else if (currentConfig.spreadShot) { // Fire multiple bullets in a spread createBullet(-0.07); // Leftmost createBullet(-0.03); // Middle-left createBullet(0); // Center createBullet(0.03); // Middle-right createBullet(0.07); // Rightmost } else { createBullet(); // Single bullet (default, laser, homing) } // Play shooting sound if (shootSound.buffer && !shootSound.isPlaying) { shootSound.play(); } } // Event listeners for shooting document._keydownHandler1 = (event) => { if (event.code === 'Space' && gameStarted) { event.preventDefault(); isShooting = true; shoot(); } }; document.addEventListener('keydown', document._keydownHandler1); // Prevent spacebar from scrolling the page document._keydownHandler2 = (event) => { if (event.code === 'Space') { event.preventDefault(); } // Allow 'Escape' to close shop if (event.code === 'Escape' && shopOpen) { hideShop(); event.preventDefault(); // Prevent default escape behavior (e.g. exiting fullscreen) } else if (event.code === 'Escape' && codeRedeemOpen) { hideCodeRedeem(); event.preventDefault(); } else if (event.code === 'Escape' && profileOpen) { hideProfileManager(); event.preventDefault(); } else if (event.code === 'Escape' && leaderboardElement.style.display !== 'none') { hideLeaderboard(); event.preventDefault(); } }; window.addEventListener('keydown', document._keydownHandler2); // Keyboard controls for movement let keys = {}; document._keydownHandler3 = (event) => { keys[event.code] = true; }; document._keyupHandler = (event) => { keys[event.code] = false; if (event.code === 'Space') { // isShooting = false; // Not needed for infinite laser } }; document.addEventListener('keydown', document._keydownHandler3); document.addEventListener('keyup', document._keyupHandler); function createStarPowerUp() { const starGroup = new THREE.Group(); // Create 5 points of a star using cones for (let i = 0; i < 5; i++) { const coneGeometry = new THREE.ConeGeometry(0.03, 0.12, 6); const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xaaaa00, emissiveIntensity: 0.8 }); const cone = new THREE.Mesh(coneGeometry, coneMaterial); const angle = (i / 5) * Math.PI * 2; cone.rotation.z = angle; cone.position.y = 0.06; starGroup.add(cone); } starGroup.position.set( (Math.random() - 0.5) * 4, 2, 0 ); scene.add(starGroup); return { mesh: starGroup, velocity: 0.008, rotationSpeed: 0.03 + Math.random() * 0.02, sparkleTimer: 0 }; } function createFaceBoss() { const faceBossGroup = new THREE.Group(); // Main face/head - large sphere const headGeometry = new THREE.SphereGeometry(0.45, 16, 16); const headMaterial = new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.3), metalness: 0.6 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.name = 'bossBody'; head.position.y = 4.2; faceBossGroup.add(head); // Eyes - white with black pupils const eyeGeometry = new THREE.SphereGeometry(0.12, 12, 12); const eyeWhiteMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0x444444 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial); leftEye.position.set(-0.25, 0.15, 0.38); faceBossGroup.add(leftEye); const rightEye = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial); rightEye.position.set(0.25, 0.15, 0.38); faceBossGroup.add(rightEye); // Eye pupils - black spheres const pupilGeometry = new THREE.SphereGeometry(0.06, 8, 8); const pupilMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 }); const leftPupil = new THREE.Mesh(pupilGeometry, pupilMaterial); leftPupil.position.set(-0.25, 0.15, 0.45); faceBossGroup.add(leftPupil); const rightPupil = new THREE.Mesh(pupilGeometry, pupilMaterial); rightPupil.position.set(0.25, 0.15, 0.45); faceBossGroup.add(rightPupil); // Angry eyebrows - flattened cylinders const eyebrowGeometry = new THREE.CylinderGeometry(0.15, 0.12, 0.03, 8); const eyebrowMaterial = new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.2) }); const leftEyebrow = new THREE.Mesh(eyebrowGeometry, eyebrowMaterial); leftEyebrow.position.set(-0.25, 0.28, 0.38); leftEyebrow.rotation.x = 0.3; faceBossGroup.add(leftEyebrow); const rightEyebrow = new THREE.Mesh(eyebrowGeometry, eyebrowMaterial); rightEyebrow.position.set(0.25, 0.28, 0.38); rightEyebrow.rotation.x = -0.3; faceBossGroup.add(rightEyebrow); // Mouth - curved cylinder (grinning/frowning) const mouthGeometry = new THREE.TorusGeometry(0.22, 0.04, 8, 16, Math.PI); const mouthMaterial = new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.4) }); const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial); mouth.position.set(0, -0.15, 0.35); mouth.rotation.x = -Math.PI / 2; faceBossGroup.add(mouth); // Teeth - small white spheres const toothGeometry = new THREE.SphereGeometry(0.025, 8, 8); const toothMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); for (let i = 0; i < 6; i++) { const tooth = new THREE.Mesh(toothGeometry, toothMaterial); const angle = (i / 6) * Math.PI * 2; tooth.position.set(Math.sin(angle) * 0.18, -0.15, 0.38 + Math.cos(angle) * 0.02); faceBossGroup.add(tooth); } // Horns - cylinders angled outward const hornGeometry = new THREE.CylinderGeometry(0.08, 0.04, 0.35, 8); const hornMaterial = new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.2), metalness: 0.8 }); const leftHorn = new THREE.Mesh(hornGeometry, hornMaterial); leftHorn.position.set(-0.35, 0.35, 0.2); leftHorn.rotation.z = 0.8; faceBossGroup.add(leftHorn); const rightHorn = new THREE.Mesh(hornGeometry, hornMaterial); rightHorn.position.set(0.35, 0.35, 0.2); rightHorn.rotation.z = -0.8; faceBossGroup.add(rightHorn); return faceBossGroup; } function spawnBoss() { if (bossActive || gameOver || !gameStarted) return; bossActive = true; bossHealth = 50 + level * 20; // Main boss body - large cylinder, now much bigger for a "huge" enemy const bossBodyGeometry = new THREE.CylinderGeometry(0.45, 0.55, 1.0, 16); // Increased size const bossBodyMaterial = new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.2), // Use enemyColor metalness: 0.8 }); const bossBody = new THREE.Mesh(bossBodyGeometry, bossBodyMaterial); bossBody.name = 'bossBody'; // Give it a name for easier identification during color change bossBody.rotation.x = Math.PI / 2; bossBody.position.y = 3.8; // Adjusted position for larger size // Boss core - now slightly larger (can keep its own distinct color) const coreGeometry = new THREE.SphereGeometry(0.25, 16, 16); // Slightly larger core const coreMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x00aa00 }); const core = new THREE.Mesh(coreGeometry, coreMaterial); core.position.set(0, 0.2, 0); bossBody.add(core); // Boss eyes - larger and red (can keep distinct color) const eyeGeometry = new THREE.SphereGeometry(0.1, 8, 8); // Slightly larger eyes const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial); leftEye.position.set(-0.4, 0.15, 0.5); // Adjusted position bossBody.add(leftEye); const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial); rightEye.position.set(0.4, 0.15, 0.5); // Adjusted position bossBody.add(rightEye); // Boss cannons - larger, adjusted position, and added more const cannonGeometry = new THREE.CylinderGeometry(0.06, 0.06, 0.6, 8); // Slightly larger cannons const cannonMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 }); // Main cannons const leftCannon = new THREE.Mesh(cannonGeometry, cannonMaterial); leftCannon.rotation.z = Math.PI / 2; leftCannon.position.set(-0.5, 0.15, 0.3); // Adjusted position bossBody.add(leftCannon); const rightCannon = new THREE.Mesh(cannonGeometry, cannonMaterial); rightCannon.rotation.z = Math.PI / 2; rightCannon.position.set(0.5, 0.15, 0.3); // Adjusted position bossBody.add(rightCannon); // Additional "arms" for a more menacing look const armGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.8, 8); const armMaterial = new THREE.MeshStandardMaterial({ color: 0x880000, emissive: 0x220000 }); for (let i = 0; i < 4; i++) { const arm = new THREE.Mesh(armGeometry, new THREE.MeshStandardMaterial({ color: enemyColor, emissive: new THREE.Color(enemyColor).multiplyScalar(0.2) })); arm.name = 'arm'; // Give it a name for easier identification during color change const angle = (i / 4) * Math.PI * 2; arm.position.x = Math.sin(angle) * 0.7; arm.position.z = Math.cos(angle) * 0.7; arm.rotation.z = Math.PI / 2; // Rotate to be horizontal arm.rotation.y = angle; // Point outwards arm.position.y = 0; // Center vertically on the boss body bossBody.add(arm); // Add a glowing tip to each arm (can keep its own distinct color) const armTipGeometry = new THREE.SphereGeometry(0.08, 8, 8); const armTipMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x00ff00 }); const armTip = new THREE.Mesh(armTipGeometry, armTipMaterial); armTip.position.set(0.4, 0, 0); // Position at the end of the arm (local to arm) arm.add(armTip); } scene.add(bossBody); boss = { mesh: bossBody, velocity: 0.008, shootTimer: 0, isFaceBoss: false }; } function spawnEnemy() { if (gameOver || !gameStarted || bossActive) return; const spawnProbability = baseSpawnRate; // 5% chance to spawn power-up instead of enemy if (Math.random() < 0.05) { powerUps.push(createStarPowerUp()); return; } const isBigEnemy = Math.random() < (level === 1 ? 0.2 : (level === 4 ? 0.8 : Math.min(0.7, 0.45 + (level-1)*0.05))); const scale = isBigEnemy ? 1.15 : 1.0; const swarmSize = Math.random() < 0.6 ? 3 : 2; // Spawn 2-3 bugs together const baseX = (Math.random() - 0.5) * 4; const baseY = 1.8 + Math.max(1, level) * 0.1; for (let i = 0; i < swarmSize; i++) { const enemyBug = new THREE.Group(); const bugScale = scale * (0.92 + Math.random() * 0.12); // Slight size variation in swarm // Bug body - main sphere const bodyGeometry = new THREE.SphereGeometry(0.10 * bugScale, 12, 12); const bodyMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(enemyColor).multiplyScalar(0.7), // Darker base emissive: new THREE.Color(enemyColor).multiplyScalar(0.3), metalness: 0.2, roughness: 0.7 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.name = 'bugBody'; body.position.y = 0; enemyBug.add(body); // Bug head - smaller sphere const headGeometry = new THREE.SphereGeometry(0.065 * bugScale, 10, 10); const headMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(enemyColor).multiplyScalar(0.5), // Even darker head emissive: new THREE.Color(enemyColor).multiplyScalar(0.4) }); const head = new THREE.Mesh(headGeometry, headMaterial); head.name = 'bugHead'; head.position.set(0, 0.08 * bugScale, 0.12 * bugScale); enemyBug.add(head); // Bug legs - 6 thin cones const legGeometry = new THREE.ConeGeometry(0.012 * bugScale, 0.14 * bugScale, 4); for (let leg = 0; leg < 6; leg++) { const legMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(enemyColor).multiplyScalar(0.4), emissive: 0x000000 }); const legMesh = new THREE.Mesh(legGeometry, legMaterial); legMesh.name = 'bugLeg'; const angle = (leg / 6) * Math.PI * 2; legMesh.position.x = Math.sin(angle) * 0.12 * bugScale; legMesh.position.y = -0.12 * bugScale; legMesh.position.z = Math.cos(angle) * 0.08 * bugScale; legMesh.rotation.z = angle + Math.PI / 2; enemyBug.add(legMesh); } // Bug antennas - 2 thin cylinders const antennaGeometry = new THREE.CylinderGeometry(0.006 * bugScale, 0.006 * bugScale, 0.12 * bugScale, 6); for (let ant = 0; ant < 2; ant++) { const antennaMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(enemyColor).multiplyScalar(0.3), emissive: 0x000000 }); const antenna = new THREE.Mesh(antennaGeometry, antennaMaterial); antenna.name = 'bugAntenna'; const side = ant === 0 ? -1 : 1; antenna.position.set(side * 0.06 * bugScale, 0.15 * bugScale, 0.12 * bugScale); antenna.rotation.x = Math.PI / 2; antenna.rotation.z = side * 0.3; enemyBug.add(antenna); } // Position swarm members with offset enemyBug.position.set( baseX + (Math.random() - 0.5) * 0.4, baseY + (Math.random() - 0.5) * 0.2, (Math.random() - 0.5) * 0.1 ); scene.add(enemyBug); enemies.push({ mesh: enemyBug, velocity: (0.01 + Math.random() * 0.015 + Math.max(1, level) * 0.006) * (level === 4 ? 1.5 : 1), points: isBigEnemy ? 100 : 100, isBigEnemy: isBigEnemy, wiggleOffset: Math.random() * Math.PI * 2, wigglePhase: Math.random() * 0.1 }); } } function animate() { if (window.__THREE_ANIMATION__) { cancelAnimationFrame(window.__THREE_ANIMATION__); } if (!gameStarted) { renderer.render(scene, camera); window.__THREE_ANIMATION__ = requestAnimationFrame(animate); return; } if (gameOver) { gameOverElement.style.display = 'block'; skipLevelButton.style.display = 'none'; levelCompleteElement.style.display = 'none'; hideShop(); // Ensure shop is closed when game is over renderer.render(scene, camera); window.__THREE_ANIMATION__ = requestAnimationFrame(animate); return; } if (levelCompleteMessage) { levelCompleteElement.style.display = 'block'; skipLevelButton.style.display = 'none'; levelCompleteTimer++; if (levelCompleteTimer > 180) { // ~3 seconds at 60fps levelCompleteMessage = false; levelCompleteElement.style.display = 'none'; levelCompleteElement.innerHTML = `

Level Completed!

Level ${level}

`; } } else { levelCompleteElement.style.display = 'none'; skipLevelButton.style.display = (gameStarted && !gameOver && !shopOpen && !profileOpen && !codeRedeemOpen && credits >= skipLevelCost) ? 'block' : 'none'; } if (shopOpen || profileOpen || codeRedeemOpen || leaderboardElement.style.display !== 'none') { skipLevelButton.style.display = 'none'; openShopButton.style.display = 'none'; codeButton.style.display = 'none'; profileButton.style.display = 'none'; newProfileButton.style.display = 'none'; leaderboardButton.style.display = 'none'; renderer.render(scene, camera); window.__THREE_ANIMATION__ = requestAnimationFrame(animate); return; } else { openShopButton.style.display = gameStarted ? 'block' : 'none'; codeButton.style.display = gameStarted ? 'block' : 'none'; profileButton.style.display = gameStarted ? 'block' : 'none'; newProfileButton.style.display = gameStarted ? 'block' : 'none'; leaderboardButton.style.display = gameStarted ? 'block' : 'none'; } // Update player movement with arrow keys const speed = Math.max(0.025, 0.045 - level * 0.001) * (level === 4 ? 0.75 : 1); // Player slows slightly with higher levels if (keys['ArrowLeft'] || keys['KeyA']) { const newX = player.position.x - speed; player.position.x = Math.max(-2.2, newX); if (newX <= -2.2 && player.material) { player.material.emissiveIntensity = 2.0; } } if (keys['ArrowRight'] || keys['KeyD']) { const newX = player.position.x + speed; player.position.x = Math.min(2.2, newX); if (newX >= 2.2 && player.material) { player.material.emissiveIntensity = 2.0; } } // Removed vertical movement: player.position.y is fixed. // if (keys['ArrowUp'] || keys['KeyW']) { // player.position.y = Math.min(-0.5, player.position.y + speed); // Constrain player to bottom half of screen // } // if (keys['ArrowDown'] || keys['KeyS']) { // player.position.y = Math.max(-1.5, player.position.y - speed); // Constrain player to bottom half of screen // } // Spawn enemies periodically - faster with higher levels, adjusted for swarms const level4SpawnMultiplier = level === 4 ? 1.8 : 1; if (Math.random() < ((baseSpawnRate + Math.max(1, level) * 0.002) * level4SpawnMultiplier)) { spawnEnemy(); } // Spawn boss every 3 levels if (!globalBossSpawned && level >= 3 && enemiesKilled === 0 && !bossActive) { spawnBoss(); globalBossSpawned = true; } // Rare face boss spawn (0.001 chance per frame, independent) if (!bossActive && Math.random() < 0.001 && gameStarted && !gameOver) { bossActive = true; bossHealth = 80 + level * 30; const faceBossMesh = createFaceBoss(); scene.add(faceBossMesh); boss = { mesh: faceBossMesh, velocity: 0.007, shootTimer: 0, isFaceBoss: true }; } // Handle continuous shooting for laser type if (gameStarted && shooterConfigs[currentShooterIndex].id === 'laser') { shoot(); } // Update enemies enemies.forEach((enemy, index) => { enemy.mesh.position.y -= enemy.velocity; // Wiggly bug movement enemy.wiggleOffset += enemy.wigglePhase; enemy.mesh.position.x += Math.sin(enemy.wiggleOffset) * 0.015; enemy.mesh.rotation.z = Math.sin(enemy.wiggleOffset * 0.7) * 0.2; // Slight rolling enemy.mesh.rotation.x = Math.cos(enemy.wiggleOffset * 0.5) * 0.1; // Slight pitching if (enemy.mesh.position.y < -2) { scene.remove(enemy.mesh); if (enemy.mesh.traverse) { // Enemy mesh is a Group enemy.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes if (enemy.mesh.geometry) enemy.mesh.geometry.dispose(); if (enemy.mesh.material) { if (Array.isArray(enemy.mesh.material)) { enemy.mesh.material.forEach(mat => mat?.dispose()); } else { enemy.mesh.material.dispose(); } } } enemies.splice(index, 1); } }); // Update power-ups powerUps.forEach((powerUp, pIndex) => { powerUp.mesh.position.y -= powerUp.velocity; powerUp.mesh.rotation.z += powerUp.rotationSpeed; // Sparkle effect powerUp.sparkingTimer++; if (powerUp.sparkleTimer % 10 === 0) { powerUp.mesh.traverse(child => { if (child.isMesh && child.material) { child.material.emissiveIntensity = 1.5; setTimeout(() => { if (child.material) child.material.emissiveIntensity = 0.8; }, 100); } }); } if (powerUp.mesh.position.y < -2) { scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); powerUps.splice(pIndex, 1); } }); // Update boss if (boss && bossActive) { boss.mesh.position.y -= boss.velocity; boss.shootTimer++; // Boss tracks player horizontally const targetX = player.position.x * 0.3; boss.mesh.position.x += (targetX - boss.mesh.position.x) * 0.02; if (boss.isFaceBoss) { // Face boss subtle menacing rotation boss.mesh.rotation.y = Math.sin(Date.now() * 0.003) * 0.15; boss.mesh.rotation.z = Math.sin(Date.now() * 0.004) * 0.08; } else { boss.mesh.rotation.z = Math.sin(Date.now() * 0.005) * 0.1; } // Boss shoots - face boss slower (every 80 frames) const shootInterval = boss.isFaceBoss ? 80 : (level === 6 ? 35 : level === 4 ? 25 : level === 3 ? 65 : 50 - level * 2); if (boss.shootTimer > shootInterval) { const bossBulletGeometry = new THREE.SphereGeometry(boss.isFaceBoss ? 0.04 : (level === 6 ? 0.045 : 0.035)); const bossBulletMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000 }); const bossBullet = new THREE.Mesh(bossBulletGeometry, bossBulletMaterial); bossBullet.position.copy(boss.mesh.position); bossBullet.position.y -= boss.isFaceBoss ? 0.5 : 0.4; scene.add(bossBullet); bullets.push({ mesh: bossBullet, velocity: boss.isFaceBoss ? -0.1 : (level === 6 ? -0.12 : level === 4 ? -0.11 : -0.09), isBossBullet: true }); boss.shootTimer = 0; } if (boss.mesh.position.y < -1) { scene.remove(boss.mesh); if (boss.mesh.traverse) { boss.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } boss = null; bossActive = false; } } // Update bullets bullets.forEach((bullet, bIndex) => { bullet.mesh.position.y += bullet.velocity; if (bullet.mesh.position.y > 2) { scene.remove(bullet.mesh); if (bullet.mesh.geometry) { bullet.mesh.geometry.dispose(); } if (bullet.mesh.material) { bullet.mesh.material.dispose(); } bullets.splice(bIndex, 1); return; } // Check collisions with enemies enemies.forEach((enemy, eIndex) => { const distance = bullet.mesh.position.distanceTo(enemy.mesh.position); // Collision radius adjusted for bug body size (focus on main body, not legs) const collisionRadius = enemy.isBigEnemy ? 0.16 : 0.11; if (distance < collisionRadius) { // Hit enemy! scene.remove(bullet.mesh); if (bullet.mesh.geometry) { bullet.mesh.geometry.dispose(); } if (bullet.mesh.material) { bullet.mesh.material.dispose(); } bullets.splice(bIndex, 1); scene.remove(enemy.mesh); if (enemy.mesh.traverse) { // Enemy mesh is a Group enemy.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes if (enemy.mesh.geometry) enemy.mesh.geometry.dispose(); if (enemy.mesh.material) { if (Array.isArray(enemy.mesh.material)) { enemy.mesh.material.forEach(mat => mat?.dispose()); } else { enemy.mesh.material.dispose(); } } } // Flash effect for high-point enemies if (enemy.points > 100) { enemy.mesh.traverse(child => { if (child.isMesh && child.material) { child.material.emissiveIntensity = 2.0; } }); } enemies.splice(eIndex, 1); score += enemy.points; credits += 10; enemiesKilled++; if (enemiesKilled >= enemiesToNextLevel) { level++; enemiesToNextLevel += 8; enemiesKilled = 0; levelCompleteMessage = true; levelCompleteTimer = 0; globalBossSpawned = false; } updateScoreUI(); // Update credits and score display saveGameData(); // Save credits after gaining them return; } }); // Check collisions with power-ups powerUps.forEach((powerUp, pIndex) => { const distance = bullet.mesh.position.distanceTo(powerUp.mesh.position); if (distance < 0.15) { // Hit power-up! scene.remove(bullet.mesh); if (bullet.mesh.geometry) bullet.mesh.geometry.dispose(); if (bullet.mesh.material) bullet.mesh.material.dispose(); bullets.splice(bIndex, 1); scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); powerUps.splice(pIndex, 1); score += 200; credits += 100; updateScoreUI(); saveGameData(); return; } }); // Check collision with boss if (boss && bossActive && !bullet.isBossBullet) { const bossDistance = bullet.mesh.position.distanceTo(boss.mesh.position); const bossCollisionRadius = boss.isFaceBoss ? 0.3 : 0.25; if (bossDistance < bossCollisionRadius) { scene.remove(bullet.mesh); if (bullet.mesh.geometry) bullet.mesh.geometry.dispose(); if (bullet.mesh.material) bullet.mesh.material.dispose(); bullets.splice(bIndex, 1); bossHealth--; if (bossHealth <= 0) { // Boss defeated! scene.remove(boss.mesh); if (boss.mesh.traverse) { boss.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { if (boss.mesh.geometry) boss.mesh.geometry.dispose(); if (boss.mesh.material) { if (Array.isArray(boss.mesh.material)) { boss.mesh.material.forEach(mat => mat?.dispose()); } else { boss.mesh.material.dispose(); } } } boss = null; bossActive = false; score += boss.isFaceBoss ? 2000 : 1000; credits += boss.isFaceBoss ? 20 : 10; saveGameData(); updateScoreUI(); } return; } } }); // Check player collision with enemies enemies.forEach((enemy) => { const distance = player.position.distanceTo(enemy.mesh.position); // Collision radius for bug enemies (slightly larger for player collision) const collisionRadius = enemy.isBigEnemy ? 0.21 : 0.14; if (distance < collisionRadius) { gameOver = true; updateHighScore(); updateGameOverScreen(); gameOverElement.style.display = 'block'; } }); // Check player collision with power-ups powerUps.forEach((powerUp, pIndex) => { const distance = player.position.distanceTo(powerUp.mesh.position); if (distance < 0.2) { // Collect power-up! scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); powerUps.splice(pIndex, 1); score += 200; credits += 50; updateScoreUI(); saveGameData(); // Power-up sparkle effect on player if (player.material) { const originalEmissive = player.material.emissiveIntensity || 1; player.material.emissiveIntensity = 2; setTimeout(() => { if (player.material) player.material.emissiveIntensity = originalEmissive; }, 300); } } }); // Check player collision with boss bullets bullets.forEach((bullet, bIndex) => { if (bullet.isBossBullet) { const distance = player.position.distanceTo(bullet.mesh.position); if (distance < 0.15) { scene.remove(bullet.mesh); bullet.mesh.geometry.dispose(); bullet.mesh.material.dispose(); bullets.splice(bIndex, 1); updateHighScore(); updateGameOverScreen(); gameOver = true; gameOverElement.style.display = 'block'; } } }); // Check player collision with boss if (boss && bossActive) { const bossDistance = player.position.distanceTo(boss.mesh.position); const bossCollisionRadius = boss.isFaceBoss ? 0.6 : 0.5; if (bossDistance < bossCollisionRadius) { updateHighScore(); updateGameOverScreen(); gameOver = true; gameOverElement.style.display = 'block'; } } renderer.render(scene, camera); window.__THREE_ANIMATION__ = requestAnimationFrame(animate); } let animationId = requestAnimationFrame(animate); window.__THREE_DISPOSE__ = () => { // Cancel cover animation if (window.__COVER_ANIMATION__) { cancelAnimationFrame(window.__COVER_ANIMATION__); } // Cancel animation loop if (window.__THREE_ANIMATION__) { cancelAnimationFrame(window.__THREE_ANIMATION__); } if (animationId) { cancelAnimationFrame(animationId); } try { renderer.dispose(); } catch (error) { console.warn('Failed to dispose Three.js renderer', error); } window.removeEventListener('resize', onWindowResize); // Remove event listeners if (window.__THREE_EVENT_LISTENERS__) { const listeners = window.__THREE_EVENT_LISTENERS__; if (listeners.startButton) startButton.removeEventListener('click', listeners.startButton); if (listeners.openShopButton) openShopButton.removeEventListener('click', listeners.openShopButton); if (listeners.closeShopButton) closeShopButton.removeEventListener('click', listeners.closeShopButton); if (listeners.applyPlayerColorButton) applyPlayerColorButton.removeEventListener('click', listeners.applyPlayerColorButton); // Changed handler name if (listeners.applyEnemyColorButton) applyEnemyColorButton.removeEventListener('click', listeners.applyEnemyColorButton); // Remove new handler if (listeners.restartButton) restartButton.removeEventListener('click', listeners.restartButton); if (listeners.resetButton) resetButton.removeEventListener('click', listeners.resetButton); if (listeners.codeButton) codeButton.removeEventListener('click', listeners.codeButton); if (listeners.resize) window.removeEventListener('resize', listeners.resize); if (listeners.keydown1) document.removeEventListener('keydown', listeners.keydown1); if (listeners.keydown2) window.removeEventListener('keydown', listeners.keydown2); if (listeners.keyup) document.removeEventListener('keyup', listeners.keyup); } // Also remove the inline handlers we added if (document._keydownHandler1) document.removeEventListener('keydown', document._keydownHandler1); if (document._keydownHandler2) window.removeEventListener('keydown', document._keydownHandler2); if (document._keydownHandler3) document.removeEventListener('keydown', document._keydownHandler3); if (document._keyupHandler) document.removeEventListener('keyup', document._keyupHandler); // Clear enemies, bullets, and boss enemies.forEach(enemy => { scene.remove(enemy.mesh); if (enemy.mesh.traverse) { // Enemy mesh is a Group enemy.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes if (enemy.mesh.geometry) enemy.mesh.geometry.dispose(); if (enemy.mesh.material) { if (Array.isArray(enemy.mesh.material)) { enemy.mesh.material.forEach(mat => mat?.dispose()); } else { enemy.mesh.material.dispose(); } } } }); enemies = []; powerUps.forEach(powerUp => { scene.remove(powerUp.mesh); powerUp.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); }); powerUps = []; bullets.forEach(bullet => { scene.remove(bullet.mesh); if (bullet.mesh.geometry) { bullet.mesh.geometry.dispose(); } if (bullet.mesh.material) { if (Array.isArray(bullet.mesh.material)) { bullet.mesh.material.forEach(mat => mat?.dispose()); } else { bullet.mesh.material.dispose(); } } }); bullets = []; if (boss) { scene.remove(boss.mesh); if (boss.mesh.traverse) { // Boss mesh is a Group (or Mesh with children) boss.mesh.traverse(child => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } }); } else { // Fallback for simple meshes if (boss.mesh.geometry) boss.mesh.geometry.dispose(); if (boss.mesh.material) { if (Array.isArray(boss.mesh.material)) { boss.mesh.material.forEach(mat => mat?.dispose()); } else { boss.mesh.material.dispose(); } } } } while (scene.children.length > 0) { const child = scene.children[0]; scene.remove(child); if (child.traverse) { // If it's a Group, traverse and dispose children child.traverse(grandchild => { if (grandchild.isMesh) { if (grandchild.geometry) grandchild.geometry.dispose(); if (grandchild.material) { if (Array.isArray(grandchild.material)) { grandchild.material.forEach(mat => mat?.dispose()); } else { grandchild.material.dispose(); } } } }); } else { // It's a simple Mesh if (child.geometry) { child.geometry.dispose(); } if (child.material) { if (Array.isArray(child.material)) { child.material.forEach((mat) => mat?.dispose()); } else { child.material.dispose(); } } } } const container = document.getElementById('renderDiv'); if (container && renderer.domElement.parentElement === container) { container.removeChild(renderer.domElement); } // Clean up cover scene if (coverRenderer) { coverRenderer.dispose(); coverRenderer.domElement.remove(); } if (coverContainer) coverContainer.remove(); // Clean up cover scene objects if (coverScene) { while (coverScene.children.length > 0) { const child = coverScene.children[0]; coverScene.remove(child); if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } } } // Clean up spaceship if (spaceship) { spaceship.traverse(child => { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(mat => mat?.dispose()); } else { child.material.dispose(); } } }); } // Clean up stars if (starsGeometry) starsGeometry.dispose(); if (starsMaterial) starsMaterial.dispose(); // Clean up UI elements if (startScreenElement) startScreenElement.remove(); if (gameOverElement) gameOverElement.remove(); if (scoreElement) scoreElement.remove(); if (shopElement) shopElement.remove(); // Clean up shop element if (openShopButton) openShopButton.remove(); // Clean up shop button if (attributionElement) attributionElement.remove(); // Clean up attribution element if (arenaElement) arenaElement.remove(); // Clean up arena element if (warriorsElement) warriorsElement.remove(); // Clean up warriors element if (arenaElement) arenaElement.remove(); // Clean up arena element if (loginRewardMessageElement) loginRewardMessageElement.remove(); // Clean up login reward element if (codeButton) codeButton.remove(); // Clean up code button if (codeCopyMessage) codeCopyMessage.remove(); // Clean up code copy message if (codeRedeemElement) codeRedeemElement.remove(); // Clean up redeem code element if (profileElement) profileElement.remove(); if (profileButton) profileButton.remove(); if (newProfileButton) newProfileButton.remove(); if (skipLevelButton) skipLevelButton.remove(); // Dispose audio objects if (audio) { audio.stop(); audio.disconnect(); } if (shootSound) { shootSound.stop(); shootSound.disconnect(); } if (listener && camera) { camera.remove(listener); } // Explicitly remove all stored event listeners if (window.__THREE_EVENT_LISTENERS__) { const listeners = window.__THREE_EVENT_LISTENERS__; // Remove UI button listeners if (startButton && listeners.startButton) startButton.removeEventListener('click', listeners.startButton); if (openShopButton && listeners.openShopButton) openShopButton.removeEventListener('click', listeners.openShopButton); if (closeShopButton && listeners.closeShopButton) closeShopButton.removeEventListener('click', listeners.closeShopButton); if (restartButton && listeners.restartButton) restartButton.removeEventListener('click', listeners.restartButton); if (resetButton && listeners.resetButton) resetButton.removeEventListener('click', listeners.resetButton); if (codeButton && listeners.codeButton) codeButton.removeEventListener('click', listeners.codeButton); if (redeemButton && listeners.redeemButton) redeemButton.removeEventListener('click', listeners.redeemButton); if (closeCodeButton && listeners.closeCodeButton) closeCodeButton.removeEventListener('click', listeners.closeCodeButton); // Remove skip level button listener if it exists if (skipLevelButton) { skipLevelButton.removeEventListener('click', skipLevel); } // Remove keyboard and window listeners if (listeners.resize) window.removeEventListener('resize', listeners.resize); if (listeners.keydown1) document.removeEventListener('keydown', listeners.keydown1); if (listeners.keydown2) window.removeEventListener('keydown', listeners.keydown2); // This one was on window if (listeners.keydown3) document.removeEventListener('keydown', listeners.keydown3); if (listeners.keyup) document.removeEventListener('keyup', listeners.keyup); } // Previous redundant cleanup of _keydownHandlerX and _keyupHandler removed };

WARRIORS SHOOTER V.6

How to play