import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create start screen const startScreen = document.createElement('div'); startScreen.id = 'startScreen'; startScreen.innerHTML = `

3D Madness

Physics Adventure

`; parentDiv.appendChild(startScreen); // Add the animation container const animationContainer = document.createElement('div'); animationContainer.id = 'animationContainer'; animationContainer.style.position = 'absolute'; animationContainer.style.bottom = '10px'; animationContainer.style.left = '10px'; animationContainer.style.width = '100px'; animationContainer.style.height = '100px'; animationContainer.innerHTML = `

`; startScreen.appendChild(animationContainer); // Create options menu const optionsMenu = document.createElement('div'); optionsMenu.id = 'optionsMenu'; optionsMenu.style.display = 'none'; // Hide options menu by default optionsMenu.innerHTML = `

Game Options

Audio Settings

Music Volume

50%

SFX Volume

50%

Graphics Settings

Shadows

Anti-Aliasing

Graphics Quality

`; parentDiv.appendChild(optionsMenu); // Add CSS styles const style = document.createElement('style'); style.textContent = ` #startScreen, #optionsMenu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; z-index: 1000; overflow: hidden; } .background-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(0,255,255,0.2) 0%, rgba(0,0,0,0.5) 70%), linear-gradient(45deg, rgba(255,0,255,0.3), rgba(0,255,255,0.3), rgba(255,0,255,0.3)); background-size: 400% 400%, 400% 400%; animation: gradientBG 15s ease infinite; filter: blur(20px); opacity: 0.5; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .content, .options-content { text-align: center; z-index: 1; background-color: rgba(0, 0, 0, 0.8); padding: 40px; border-radius: 20px; border: 2px solid rgba(0, 255, 255, 0.5); color: #fff; box-shadow: 0 0 30px rgba(0, 255, 255, 0.2); backdrop-filter: blur(10px); transform: translateY(0); animation: float 6s ease-in-out infinite; min-width: 400px; } .options-header { margin-bottom: 30px; position: relative; } .options-header h2 { font-size: 2.5em; margin: 0; background: linear-gradient(45deg, #00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } .options-underline { height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent); margin-top: 10px; animation: glow 2s ease-in-out infinite alternate; } .options-sections { display: flex; flex-direction: column; gap: 30px; } .options-section { background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.2); } .options-section h3 { margin: 0 0 20px 0; font-size: 1.5em; color: rgba(0, 255, 255, 0.8); } .option { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 10px; border-radius: 10px; transition: background-color 0.3s; } .option:hover { background-color: rgba(255, 255, 255, 0.1); } .option label { display: flex; align-items: center; gap: 10px; font-size: 1.1em; } .option-icon { font-style: normal; font-size: 1.2em; } .slider-container { display: flex; align-items: center; gap: 10px; } .slider-value { min-width: 45px; text-align: right; } input[type="range"] { -webkit-appearance: none; width: 150px; height: 6px; background: rgba(0, 255, 255, 0.2); border-radius: 3px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #00ffff; border-radius: 50%; cursor: pointer; transition: all 0.3s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } .toggle { position: relative; display: inline-block; width: 60px; height: 30px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); border-radius: 15px; transition: 0.4s; } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: 0.4s; } input:checked + .toggle-slider { background-color: rgba(0, 255, 255, 0.5); } input:checked + .toggle-slider:before { transform: translateX(30px); } .styled-select { background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); color: white; padding: 8px 15px; border-radius: 5px; cursor: pointer; outline: none; transition: all 0.3s; } .styled-select:hover { background: rgba(0, 255, 255, 0.2); } .styled-select option { background-color: #000; color: white; } .close-options-button { position: relative; margin-top: 30px; padding: 12px 30px; font-size: 1.2em; background: rgba(0, 255, 255, 0.1); border: 2px solid rgba(0, 255, 255, 0.3); color: white; border-radius: 25px; cursor: pointer; overflow: hidden; transition: all 0.3s; } .close-options-button:hover { background: rgba(0, 255, 255, 0.2); transform: scale(1.05); } .close-options-button .button-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,255,255,0.4) 0%, transparent 70%); transform: translate(-100%, -100%); transition: transform 0.5s ease; } .close-options-button:hover .button-glow { transform: translate(0, 0); } .logo-container { margin-bottom: 40px; } .game-title { font-size: 4.5em; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; margin-bottom: 10px; animation: glow 2s ease-in-out infinite alternate; } .subtitle { font-size: 1.5em; color: rgba(255, 255, 255, 0.8); text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); letter-spacing: 4px; margin-top: 10px; animation: pulse 3s ease-in-out infinite; } .button-container { display: flex; flex-direction: column; gap: 20px; align-items: center; } @keyframes glow { from { text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; } to { text-shadow: 0 0 7px #00ffff, 0 0 12px #00ffff; } } .start-button, .options-button { position: relative; font-size: 1.4em; padding: 15px 40px; background-color: rgba(0, 255, 255, 0.1); border: 2px solid rgba(0, 255, 255, 0.5); color: #fff; cursor: pointer; transition: all 0.3s ease; overflow: hidden; border-radius: 30px; min-width: 200px; } .button-text { position: relative; z-index: 1; font-weight: bold; letter-spacing: 1px; } .button-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,255,255,0.4) 0%, transparent 70%); transform: translate(-100%, -100%); transition: transform 0.5s ease; } .start-button:hover, .options-button:hover { background-color: rgba(0, 255, 255, 0.2); transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } .start-button:hover .button-glow, .options-button:hover .button-glow { transform: translate(0, 0); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .option { margin: 15px 0; display: flex; justify-content: space-between; align-items: center; } .option label { margin-right: 10px; } .option input[type="range"], .option select { width: 150px; } .option input[type="checkbox"] { width: 20px; height: 20px; } `; document.head.appendChild(style); // Add CSS for the animation const animationStyle = document.createElement('style'); animationStyle.textContent = ` /* Pause Button Styles */ #pauseButton { padding: 8px 15px; background-color: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); color: white; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; display: flex; align-items: center; gap: 5px; z-index: 1000; } #pauseButton:hover { background-color: rgba(0, 255, 255, 0.2); transform: scale(1.05); } #pauseButton:hover { background-color: rgba(0, 0, 0, 0.9); transform: scale(1.1); } #pauseButton.paused span::before { content: "▶️ Resume"; } /* Pause Menu Button Styles */ .pause-menu-button { padding: 12px 20px; background-color: rgba(0, 255, 255, 0.1); border: 2px solid rgba(0, 255, 255, 0.3); border-radius: 8px; color: white; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; } .pause-menu-button:hover { background-color: rgba(0, 255, 255, 0.2); transform: scale(1.05); } .pause-menu-button:active { transform: scale(0.95); } .button-icon { font-size: 1.2em; } #animationContainer { overflow: hidden; } #ball { width: 20px; height: 20px; background-color: #00ffff; border-radius: 50%; position: absolute; bottom: 10px; left: 40px; } .weapon { width: 10px; height: 30px; background-color: #ff00ff; position: absolute; top: -30px; } #weapon1 { left: 20px; } #weapon2 { left: 70px; } `; document.head.appendChild(animationStyle); // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; startScreen.style.display = 'flex'; optionsMenu.style.display = 'none'; // Ensure options menu is hidden }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the main game scene const gameScene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -9.82 * 0.7, 0); // Reduced gravity for more pronounced bounces world.defaultContactMaterial.friction = 0.2; // Slightly reduced friction world.defaultContactMaterial.restitution = 0.8; // Increased restitution for bouncier balls world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); // Define physics material for the ball const ballPhysMaterial = new CANNON.Material('ballMaterial'); // Create contact material between ball and ground const ballGroundContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, groundPhysMaterial, { friction: 0.2, restitution: 0.8, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 } ); world.addContactMaterial(ballGroundContactMaterial); // Create contact material between balls const ballBallContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, ballPhysMaterial, { friction: 0.1, restitution: 0.7, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 } ); world.addContactMaterial(ballBallContactMaterial); const clock = new THREE.Clock(); // Variables to track key states // Game state // Game state let isPaused = false; let currentSaveData = null; // Create pause menu // Create pause button with icon const pauseButton = document.createElement('button'); pauseButton.id = 'pauseButton'; pauseButton.title = 'Pause/Resume Game'; pauseButton.innerHTML = `⏸️ Pause`; // Create top bar const topBar = document.createElement('div'); topBar.style.position = 'absolute'; topBar.style.top = '0'; topBar.style.left = '50%'; topBar.style.transform = 'translateX(-50%)'; topBar.style.display = 'flex'; topBar.style.gap = '10px'; topBar.style.padding = '10px 20px'; topBar.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; topBar.style.borderRadius = '0 0 15px 15px'; topBar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)'; topBar.style.zIndex = '1000'; // Create help button const helpButton = document.createElement('button'); helpButton.textContent = '❓ Help'; // Style for top bar buttons const topButtonStyle = ` padding: 8px 15px; background-color: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); color: white; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; display: flex; align-items: center; gap: 5px; `; helpButton.style.cssText = topButtonStyle; parentDiv.appendChild(helpButton); // Create tasks button const tasksButton = document.createElement('button'); tasksButton.textContent = '✓ Tasks'; tasksButton.style.cssText = topButtonStyle; tasksButton.style.display = 'none'; // Hide by default parentDiv.appendChild(tasksButton); // Create changelog button const changelogButton = document.createElement('button'); changelogButton.textContent = '📋 Changelog'; changelogButton.style.cssText = topButtonStyle; // Add all buttons to top bar topBar.appendChild(helpButton); topBar.appendChild(tasksButton); topBar.appendChild(pauseButton); topBar.appendChild(changelogButton); // Add top bar to parent div parentDiv.appendChild(topBar); // Create pause menu with improved styling const pauseMenu = document.createElement('div'); pauseMenu.style.position = 'absolute'; pauseMenu.style.top = '50%'; pauseMenu.style.left = '50%'; pauseMenu.style.transform = 'translate(-50%, -50%)'; pauseMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; pauseMenu.style.padding = '30px'; pauseMenu.style.borderRadius = '15px'; pauseMenu.style.border = '2px solid rgba(0, 255, 255, 0.5)'; pauseMenu.style.color = 'white'; pauseMenu.style.display = 'none'; pauseMenu.style.zIndex = '1000'; pauseMenu.style.minWidth = '300px'; pauseMenu.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.2)'; pauseMenu.innerHTML = `

Game Paused

`; parentDiv.appendChild(pauseMenu); // Create upgrades menu const upgradesMenu = document.createElement('div'); upgradesMenu.style.position = 'absolute'; upgradesMenu.style.top = '50%'; upgradesMenu.style.left = '50%'; upgradesMenu.style.transform = 'translate(-50%, -50%)'; upgradesMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; upgradesMenu.style.padding = '20px'; upgradesMenu.style.borderRadius = '10px'; upgradesMenu.style.border = '2px solid rgba(0, 255, 255, 0.3)'; upgradesMenu.style.color = 'white'; upgradesMenu.style.display = 'none'; upgradesMenu.style.zIndex = '1001'; upgradesMenu.style.minWidth = '400px'; upgradesMenu.innerHTML = `

Upgrades

`; parentDiv.appendChild(upgradesMenu); // Player stats and upgrades const playerStats = { toolPower: 1, toolRange: 1, toolCooldownReduction: 1, comboMultiplier: 1, cashBonus: 1 }; const upgradesCost = { toolPower: 100, toolRange: 150, toolCooldownReduction: 200, comboMultiplier: 250, cashBonus: 300 }; // Keyboard controls const keys = { Escape: false, ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, w: false, a: false, s: false, d: false, e: false, q: false, '1': false, '2': false, '3': false, '4': false, '5': false, '6': false, '7': false }; // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position to be more zoomed out camera.position.set(0, 30, 60); camera.lookAt(0, 0, 0); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(gameScene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); gameScene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; // Adjusted damping factor controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 2; // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT'); const normalMap = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; gameScene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; gameScene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); gameScene.add(hemiLight); // Create initial scene const terrain = createTerrain(); /** * Variables for ball spawning */ /** * Variables for ball spawning */ const ballSpawnInterval = 1; // seconds between ball spawns let timeSinceLastBall = 0; const balls = []; const maxBalls = 20; // Limit the number of balls /** * Function to spawn a new bouncy ball with a random color */ function spawnBall() { // Remove oldest ball if we have reached maxBalls if (balls.length >= maxBalls) { const oldestBall = balls.shift(); gameScene.remove(oldestBall.mesh); world.removeBody(oldestBall.body); } // Set ball size (radius) const radius = randomBetween(0.5, 1.5); const widthSegments = 32; const heightSegments = 32; const ballGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments); // Create a material with a random color const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random()); const ballMaterial = new THREE.MeshStandardMaterial({ color: randomColor, metalness: 0.3, roughness: 0.4 }); const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial); ballMesh.castShadow = true; ballMesh.receiveShadow = true; // Set initial position - spawn above the ground const x = Math.random() * 40 - 20; const y = 30 + Math.random() * 10; // Increased spawn height const z = Math.random() * 40 - 20; ballMesh.position.set(x, y, z); gameScene.add(ballMesh); // Create physics body with the same size const ballShape = new CANNON.Sphere(radius); const density = 500; // kg/m^3 (reduced density for more bouncy balls) const mass = density * (4 / 3) * Math.PI * Math.pow(radius, 3); // Mass based on volume and density const ballBody = new CANNON.Body({ mass: mass, shape: ballShape, position: new CANNON.Vec3(x, y, z), material: ballPhysMaterial }); // Adjust damping for more natural movement ballBody.linearDamping = 0.01; ballBody.angularDamping = 0.01; // Add initial velocity with horizontal and vertical components const initialVelocity = new CANNON.Vec3( (Math.random() - 0.5) * 10, // Increased random X velocity -5 - Math.random() * 5, // Initial downward velocity (Math.random() - 0.5) * 10 // Increased random Z velocity ); ballBody.velocity.copy(initialVelocity); // Add ball body to the world world.addBody(ballBody); // Create the ball object const ball = { mesh: ballMesh, body: ballBody }; // Link mesh and physics body after both are created ballMesh.userData.physicsBody = ballBody; ballBody.userData = { mesh: ballMesh }; // Add the ball to the balls array balls.push(ball); return ball; } // Function to handle key presses function onKeyDown(event) { if (event.key === 'Escape') { togglePause(); return; } if (event.key.toLowerCase() in keys) { keys[event.key.toLowerCase()] = true; if (['1', '2', '3', '4', '5', '6', '7', '8'].includes(event.key)) { toggleToolWithKey(event.key); } } } // Add '8' key to the keys object keys['8'] = false; // Function to handle key releases function onKeyUp(event) { if (event.key.toLowerCase() in keys) { keys[event.key.toLowerCase()] = false; } } // Function to toggle tool with number key function toggleToolWithKey(key) { const toolIndex = parseInt(key) - 1; const toolButtons = [lightningButton, gravityButton, windButton, teleporterButton, magnetButton, timeWarpButton, trampolineButton, spikeButton]; if (toolIndex >= 0 && toolIndex < toolButtons.length) { const tool = toolButtons[toolIndex].dataset.tool; if (gameMode === 'sandbox' || availableTools.normal.includes(tool)) { if (activeTool === tool) { deactivateAllTools(); } else { activateTool(tool, toolButtons[toolIndex]); } } } } // Function to move the camera based on key states function moveCamera(deltaTime) { const speed = 20; // Adjust this value to change camera movement speed const movement = new THREE.Vector3(); if (keys.ArrowUp || keys.w) movement.z -= speed * deltaTime; if (keys.ArrowDown || keys.s) movement.z += speed * deltaTime; if (keys.ArrowLeft || keys.a) movement.x -= speed * deltaTime; if (keys.ArrowRight || keys.d) movement.x += speed * deltaTime; if (keys.e) movement.y += speed * deltaTime; if (keys.q) movement.y -= speed * deltaTime; // Move the camera in its local space camera.translateX(movement.x); camera.translateY(movement.y); camera.translateZ(movement.z); // Update OrbitControls target controls.target.copy(camera.position).add(new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion)); } function animate() { if (!isPaused) { requestAnimationFrame(animate); } const deltaTime = 1 / 60; // Fixed time step if (assetsLoaded) { moveCamera(deltaTime); world.step(deltaTime); // Spawn balls every few seconds timeSinceLastBall += deltaTime; if (timeSinceLastBall >= ballSpawnInterval) { spawnBall(); timeSinceLastBall = 0; } // Update balls positions and handle bouncing for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; // Update mesh position and rotation ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); // Check if the ball has fallen below a certain Y position if (ball.body.position.y < -20) { // Remove the ball from the scene and physics world gameScene.remove(ball.mesh); world.removeBody(ball.body); // Remove the ball from the balls array balls.splice(i, 1); } } controls.update(); composer.render(); } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Add key event listeners window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); // Remove duplicate changelog button creation // Style for top bar buttons // Create changelog menu const changelogMenu = document.createElement('div'); changelogMenu.style.position = 'absolute'; changelogMenu.style.top = '40px'; changelogMenu.style.right = '10px'; changelogMenu.style.width = '300px'; changelogMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; changelogMenu.style.color = 'white'; changelogMenu.style.borderRadius = '10px'; changelogMenu.style.fontFamily = 'Arial, sans-serif'; changelogMenu.style.fontSize = '14px'; changelogMenu.style.maxHeight = '0'; changelogMenu.style.overflowY = 'auto'; changelogMenu.style.transition = 'max-height 0.3s ease-out, padding 0.3s ease-out'; changelogMenu.style.scrollbarWidth = 'thin'; changelogMenu.style.scrollbarColor = '#00ffff rgba(0, 0, 0, 0.3)'; parentDiv.appendChild(changelogMenu); const changelogContent = document.createElement('div'); changelogContent.style.padding = '10px'; changelogMenu.appendChild(changelogContent); const changelogTitle = document.createElement('h3'); changelogTitle.textContent = 'Changelog'; changelogTitle.style.marginTop = '0'; changelogContent.appendChild(changelogTitle); const changelogList = document.createElement('ul'); changelogList.style.paddingLeft = '20px'; changelogList.style.margin = '0'; changelogContent.appendChild(changelogList); // Toggle changelog visibility let changelogVisible = false; changelogButton.addEventListener('click', () => { changelogVisible = !changelogVisible; if (changelogVisible) { changelogMenu.style.maxHeight = '400px'; changelogMenu.style.padding = '15px'; changelogMenu.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.2)'; } else { changelogMenu.style.maxHeight = '0'; changelogMenu.style.padding = '0 15px'; changelogMenu.style.boxShadow = 'none'; } }); // Create mode selection UI const modeSelector = document.createElement('div'); modeSelector.style.position = 'absolute'; modeSelector.style.top = '10px'; modeSelector.style.left = '10px'; modeSelector.style.transform = 'none'; modeSelector.style.display = 'flex'; modeSelector.style.gap = '10px'; modeSelector.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; modeSelector.style.padding = '20px'; modeSelector.style.borderRadius = '15px'; modeSelector.style.border = '2px solid rgba(0, 255, 255, 0.3)'; modeSelector.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.2)'; // Create mode title const modeTitle = document.createElement('div'); modeTitle.textContent = 'Game Mode'; modeTitle.style.color = 'white'; modeTitle.style.fontSize = '20px'; modeTitle.style.marginBottom = '10px'; modeTitle.style.textAlign = 'left'; modeSelector.appendChild(modeTitle); // Create mode container const modeContainer = document.createElement('div'); modeContainer.style.display = 'flex'; modeContainer.style.gap = '10px'; modeContainer.style.flexDirection = 'column'; modeSelector.appendChild(modeContainer); parentDiv.appendChild(modeSelector); function createModeButton(mode, description) { // Enhanced mode button with description (new version) const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.flexDirection = 'column'; buttonContainer.style.alignItems = 'center'; buttonContainer.style.gap = '10px'; buttonContainer.style.position = 'relative'; const button = document.createElement('button'); button.textContent = mode; button.style.padding = '10px 20px'; button.style.cursor = 'pointer'; button.style.backgroundColor = 'rgba(0, 255, 255, 0.1)'; button.style.border = '2px solid rgba(0, 255, 255, 0.3)'; button.style.color = 'white'; button.style.borderRadius = '8px'; button.style.fontSize = '18px'; button.style.transition = 'all 0.3s ease'; const desc = document.createElement('div'); desc.textContent = description; desc.style.position = 'absolute'; desc.style.top = '100%'; desc.style.left = '50%'; desc.style.transform = 'translateX(-50%)'; desc.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; desc.style.color = 'rgba(255, 255, 255, 0.9)'; desc.style.padding = '10px'; desc.style.borderRadius = '5px'; desc.style.fontSize = '14px'; desc.style.textAlign = 'center'; desc.style.maxWidth = '200px'; desc.style.marginTop = '10px'; desc.style.opacity = '0'; desc.style.visibility = 'hidden'; desc.style.transition = 'all 0.3s ease'; desc.style.zIndex = '1000'; desc.style.boxShadow = '0 2px 10px rgba(0, 255, 255, 0.2)'; buttonContainer.addEventListener('mouseenter', () => { button.style.backgroundColor = 'rgba(0, 255, 255, 0.2)'; button.style.transform = 'scale(1.05)'; desc.style.opacity = '1'; desc.style.visibility = 'visible'; }); buttonContainer.addEventListener('mouseleave', () => { button.style.backgroundColor = 'rgba(0, 255, 255, 0.1)'; button.style.transform = 'scale(1)'; desc.style.opacity = '0'; desc.style.visibility = 'hidden'; }); buttonContainer.appendChild(button); buttonContainer.appendChild(desc); return { button, container: buttonContainer }; } const sandboxMode = createModeButton( 'Sandbox', 'Unrestricted access to all tools and features. Perfect for experimenting!' ); const normalMode = createModeButton( 'Normal', 'Complete tasks and earn money to unlock new tools and upgrades.' ); modeContainer.appendChild(sandboxMode.container); modeContainer.appendChild(normalMode.container); // Create toolbar const toolbar = document.createElement('div'); toolbar.style.position = 'absolute'; toolbar.style.bottom = '10px'; toolbar.style.left = '50%'; toolbar.style.transform = 'translateX(-50%)'; toolbar.style.display = 'flex'; toolbar.style.gap = '10px'; toolbar.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; toolbar.style.padding = '10px'; toolbar.style.borderRadius = '10px'; parentDiv.appendChild(toolbar); // Create cash display const cashDisplay = document.createElement('div'); cashDisplay.style.position = 'absolute'; cashDisplay.style.bottom = '10px'; cashDisplay.style.right = '10px'; cashDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; cashDisplay.style.color = 'white'; cashDisplay.style.padding = '10px'; cashDisplay.style.borderRadius = '5px'; cashDisplay.style.fontFamily = 'Arial, sans-serif'; cashDisplay.style.fontSize = '18px'; cashDisplay.innerHTML = '$0'; parentDiv.appendChild(cashDisplay); let cashAmount = 0; // Task system const taskCategories = { combat: { name: "Combat", icon: "⚔️", description: "Combat-related tasks", color: "#ff4444" }, collection: { name: "Collection", icon: "💎", description: "Collect various items", color: "#44ff44" }, mastery: { name: "Mastery", icon: "🎯", description: "Master game mechanics", color: "#4444ff" }, achievement: { name: "Achievements", icon: "🏆", description: "Special accomplishments", color: "#ffff44" } }; const tasks = [ // Combat Tasks { id: "combat_1", category: "combat", tier: 1, description: "Explode 5 balls", required: 5, progress: 0, reward: { cash: 50, xp: 10 }, completed: false, unlocks: ["combat_2"] }, { id: "combat_2", category: "combat", tier: 2, description: "Create a 5x combo", required: 1, progress: 0, reward: { cash: 100, xp: 20 }, completed: false, locked: true, unlocks: ["combat_3"] }, { id: "combat_3", category: "combat", tier: 3, description: "Destroy 50 balls total", required: 50, progress: 0, reward: { cash: 200, xp: 40, tool: "gravity" }, completed: false, locked: true }, // Collection Tasks { id: "collection_1", category: "collection", tier: 1, description: "Earn $100", required: 100, progress: 0, reward: { cash: 50, xp: 10 }, completed: false, unlocks: ["collection_2"] }, { id: "collection_2", category: "collection", tier: 2, description: "Earn $500 total", required: 500, progress: 0, reward: { cash: 100, xp: 20, tool: "wind" }, completed: false, locked: true }, // Mastery Tasks { id: "mastery_1", category: "mastery", tier: 1, description: "Use lightning strike 3 times", required: 3, progress: 0, reward: { cash: 75, xp: 15 }, completed: false, unlocks: ["mastery_2"] }, { id: "mastery_2", category: "mastery", tier: 2, description: "Use each available tool once", required: 1, progress: 0, reward: { cash: 150, xp: 30, tool: "teleporter" }, completed: false, locked: true }, // Achievement Tasks { id: "achievement_1", category: "achievement", tier: 1, description: "Get a 10x combo", required: 1, progress: 0, reward: { cash: 500, xp: 100, tool: "magnet" }, completed: false } ]; // Tasks button has been moved up before the top bar creation // Create task menu // Create task menu with categories const taskMenu = document.createElement('div'); taskMenu.style.position = 'absolute'; taskMenu.style.top = '50%'; taskMenu.style.left = '50%'; taskMenu.style.transform = 'translate(-50%, -50%)'; taskMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; taskMenu.style.color = 'white'; taskMenu.style.padding = '20px'; taskMenu.style.borderRadius = '15px'; taskMenu.style.fontFamily = 'Arial, sans-serif'; taskMenu.style.fontSize = '16px'; taskMenu.style.display = 'none'; taskMenu.style.zIndex = '1000'; taskMenu.style.minWidth = '600px'; taskMenu.style.maxHeight = '80vh'; taskMenu.style.overflowY = 'auto'; taskMenu.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.3)'; parentDiv.appendChild(taskMenu); // Create close button for task menu const closeTaskButton = document.createElement('button'); closeTaskButton.textContent = '✖'; closeTaskButton.style.position = 'absolute'; closeTaskButton.style.top = '10px'; closeTaskButton.style.right = '10px'; closeTaskButton.style.fontSize = '20px'; closeTaskButton.style.backgroundColor = 'transparent'; closeTaskButton.style.border = 'none'; closeTaskButton.style.color = 'white'; closeTaskButton.style.cursor = 'pointer'; taskMenu.appendChild(closeTaskButton); // Create task display const taskDisplay = document.createElement('div'); taskDisplay.style.position = 'absolute'; taskDisplay.style.top = '50px'; taskDisplay.style.right = '10px'; taskDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; taskDisplay.style.color = 'white'; taskDisplay.style.padding = '10px'; taskDisplay.style.borderRadius = '5px'; taskDisplay.style.fontFamily = 'Arial, sans-serif'; taskDisplay.style.fontSize = '14px'; taskDisplay.style.maxWidth = '250px'; parentDiv.appendChild(taskDisplay); let selectedTask = null; function updateTaskMenu() { taskMenu.innerHTML = `

Tasks & Achievements

`; const categoriesDiv = document.getElementById('taskCategories'); const taskListDiv = document.getElementById('taskList'); // Add category filters Object.entries(taskCategories).forEach(([categoryId, category]) => { const categoryButton = document.createElement('button'); categoryButton.innerHTML = `${category.icon} ${category.name}`; categoryButton.style.cssText = ` padding: 8px 15px; background-color: rgba(0,0,0,0.5); border: 2px solid ${category.color}; color: white; border-radius: 20px; cursor: pointer; transition: all 0.3s; `; categoryButton.addEventListener('click', () => showTaskCategory(categoryId)); categoriesDiv.appendChild(categoryButton); }); showTaskCategory('combat'); // Show combat tasks by default taskMenu.appendChild(closeTaskButton); } function showTaskCategory(categoryId) { const taskListDiv = document.getElementById('taskList'); taskListDiv.innerHTML = ''; const categoryTasks = tasks.filter(task => task.category === categoryId); categoryTasks.forEach(task => { const taskElement = document.createElement('div'); taskElement.style.cssText = ` background-color: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; border: 1px solid ${taskCategories[task.category].color}; ${task.locked ? 'opacity: 0.5;' : ''} `; const progress = (task.progress / task.required) * 100; const rewards = Object.entries(task.reward) .map(([type, amount]) => { const icon = type === 'cash' ? '$' : type === 'xp' ? '✨' : '🎁'; return `${icon} ${amount} ${type.toUpperCase()}`; }) .join(' | '); taskElement.innerHTML = `

${taskCategories[task.category].icon} Tier ${task.tier}: ${task.description}

Progress: ${task.progress}/${task.required} | Rewards: ${rewards}

${!task.completed && !task.locked ? ` ` : ''}

`; if (task.completed) { taskElement.style.opacity = '0.7'; taskElement.innerHTML += `

✓

`; } taskListDiv.appendChild(taskElement); }); } function selectTask(taskId) { selectedTask = tasks.find(t => t.id === taskId); updateTaskDisplay(); taskMenu.style.display = 'none'; // Show task selected notification showNotification(`Now tracking: ${selectedTask.description}`, 'info'); } function updateTaskDisplay() { if (gameMode === 'normal' && selectedTask) { taskDisplay.style.display = 'block'; taskDisplay.innerHTML = `

Current Task:

${selectedTask.description}: ${selectedTask.progress}/${selectedTask.required}

`; } else { taskDisplay.style.display = 'none'; } } function updateTaskProgress(taskId, amount) { const task = tasks.find(t => t.id === taskId); if (task && !task.completed && task === selectedTask) { task.progress += amount; if (task.progress >= task.required) { task.completed = true; // Apply rewards if (task.reward.cash) { cashAmount += task.reward.cash; cashDisplay.innerHTML = `$${cashAmount}`; } if (task.reward.tool) { unlockTool(task.reward.tool); showNotification(`New tool unlocked: ${task.reward.tool}!`, 'success'); } // Unlock next tasks if (task.unlocks) { task.unlocks.forEach(taskId => { const nextTask = tasks.find(t => t.id === taskId); if (nextTask) { nextTask.locked = false; showNotification(`New task unlocked: ${nextTask.description}`, 'info'); } }); } selectedTask = null; showNotification(`Task completed! Rewards claimed: ${Object.entries(task.reward) .map(([type, amount]) => `${amount} ${type.toUpperCase()}`).join(', ')}`, 'success'); } updateTaskDisplay(); } } // Toggle task menu visibility tasksButton.addEventListener('click', () => { if (gameMode === 'normal') { updateTaskMenu(); taskMenu.style.display = 'block'; } }); // Close task menu when close button is clicked closeTaskButton.addEventListener('click', () => { taskMenu.style.display = 'none'; }); // Close task menu when clicking outside of it document.addEventListener('click', (event) => { if (event.target !== taskMenu && !taskMenu.contains(event.target) && event.target !== tasksButton) { taskMenu.style.display = 'none'; } }); // Update help button helpButton.textContent = '❓ Help'; helpButton.style.cssText = topButtonStyle; parentDiv.appendChild(helpButton); // Function to create tool buttons function createToolButton(emoji, tooltip) { const button = document.createElement('button'); button.textContent = emoji; button.style.fontSize = '24px'; button.style.padding = '10px'; button.style.cursor = 'pointer'; button.style.backgroundColor = 'transparent'; button.style.border = 'none'; button.style.color = 'white'; button.style.transition = 'transform 0.1s'; button.title = tooltip; button.addEventListener('mouseover', () => { button.style.transform = 'scale(1.1)'; }); button.addEventListener('mouseout', () => { button.style.transform = 'scale(1)'; }); return button; } // Function to show tool cooldown message function showToolCooldownMessage(tool) { const cooldownMessage = document.createElement('div'); cooldownMessage.style.position = 'absolute'; cooldownMessage.style.bottom = '80px'; cooldownMessage.style.left = '50%'; cooldownMessage.style.transform = 'translateX(-50%)'; cooldownMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; cooldownMessage.style.color = 'white'; cooldownMessage.style.padding = '10px 20px'; cooldownMessage.style.borderRadius = '5px'; cooldownMessage.style.fontFamily = 'Arial, sans-serif'; cooldownMessage.style.zIndex = '1000'; cooldownMessage.textContent = `${tool.charAt(0).toUpperCase() + tool.slice(1)} is on cooldown!`; parentDiv.appendChild(cooldownMessage); setTimeout(() => { cooldownMessage.style.opacity = '0'; cooldownMessage.style.transition = 'opacity 0.5s'; setTimeout(() => parentDiv.removeChild(cooldownMessage), 500); }, 1500); } // Function to update tool button appearance function updateToolButton(tool) { const button = { lightning: lightningButton, gravity: gravityButton, wind: windButton, teleporter: teleporterButton, magnet: magnetButton, timeWarp: timeWarpButton, trampoline: trampolineButton, spike: spikeButton } [tool]; if (button) { button.style.filter = 'brightness(0.5)'; setTimeout(() => { button.style.filter = 'brightness(1)'; button.style.transition = 'filter 0.3s'; }, toolCooldowns[tool]); } } // Create tool buttons with enhanced tooltips const lightningButton = createToolButton('⚡', 'Lightning Strike (1)\nCooldown: 1s\nCreates a powerful lightning bolt'); const gravityButton = createToolButton('🌍', 'Gravity Manipulator (2)\nCooldown: 3s\nCreates a gravity well'); const windButton = createToolButton('💨', 'Wind Gust (3)\nCooldown: 2s\nPushes balls away'); const teleporterButton = createToolButton('🌀', 'Teleporter (4)\nCooldown: 4s\nCreates linked portals'); const magnetButton = createToolButton('🧲', 'Magnet (5)\nCooldown: 3s\nAttracts nearby balls'); const timeWarpButton = createToolButton('⏱️', 'Time Warp (6)\nCooldown: 5s\nSlows time in an area'); const trampolineButton = createToolButton('🦘', 'Trampoline (7)\nCooldown: 2s\nBounces balls high'); const spikeButton = createToolButton('🔪', 'Spike (8)\nCooldown: 2s\nDestroys balls on impact'); // Set data attributes for number keys lightningButton.dataset.key = '1'; gravityButton.dataset.key = '2'; windButton.dataset.key = '3'; teleporterButton.dataset.key = '4'; magnetButton.dataset.key = '5'; timeWarpButton.dataset.key = '6'; trampolineButton.dataset.key = '7'; spikeButton.dataset.key = '8'; // Add buttons to toolbar toolbar.appendChild(lightningButton); toolbar.appendChild(gravityButton); toolbar.appendChild(windButton); toolbar.appendChild(teleporterButton); toolbar.appendChild(magnetButton); toolbar.appendChild(timeWarpButton); toolbar.appendChild(trampolineButton); toolbar.appendChild(spikeButton); // Game mode and tool availability let gameMode = 'sandbox'; const availableTools = { sandbox: ['lightning', 'gravity', 'wind', 'teleporter', 'magnet', 'timeWarp', 'trampoline', 'spike'], normal: ['lightning'] }; // Function to unlock a tool in Normal mode function unlockTool(tool) { if (!availableTools.normal.includes(tool)) { availableTools.normal.push(tool); updateToolbarVisibility(); } } // Variables to track if tools are active let activeTool = null; // Function to deactivate all tools function deactivateAllTools() { activeTool = null; [lightningButton, gravityButton, windButton, teleporterButton, magnetButton, timeWarpButton, trampolineButton, spikeButton].forEach(button => { button.style.backgroundColor = 'transparent'; button.style.opacity = gameMode === 'sandbox' || availableTools.normal.includes(button.dataset.tool) ? '1' : '0.5'; }); } // Function to activate or deactivate a tool function activateTool(tool, button) { if (gameMode === 'sandbox' || availableTools.normal.includes(tool)) { if (activeTool === tool) { deactivateAllTools(); } else { deactivateAllTools(); activeTool = tool; button.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; } } } // Update tool buttons [lightningButton, gravityButton, windButton, teleporterButton, magnetButton, timeWarpButton, trampolineButton, spikeButton].forEach(button => { const tool = button.dataset.tool; button.addEventListener('click', () => activateTool(tool, button)); }); // Mode selection logic function setGameMode(mode) { gameMode = mode; deactivateAllTools(); updateToolbarVisibility(); if (mode === 'normal') { // Reset tasks when entering Normal mode tasks.forEach(task => { task.progress = 0; task.completed = false; }); cashAmount = 0; cashDisplay.innerHTML = `$${cashAmount}`; selectedTask = null; tasksButton.style.display = 'inline-block'; // Use inline-block for better alignment } else { tasksButton.style.display = 'none'; } updateTaskDisplay(); } function updateToolbarVisibility() { [lightningButton, gravityButton, windButton, teleporterButton, magnetButton, timeWarpButton, trampolineButton].forEach(button => { const tool = button.dataset.tool; if (gameMode === 'sandbox' || availableTools.normal.includes(tool)) { button.style.display = 'block'; button.style.opacity = '1'; } else { button.style.display = 'block'; button.style.opacity = '0.5'; } }); } sandboxMode.button.addEventListener('click', () => setGameMode('sandbox')); normalMode.button.addEventListener('click', () => setGameMode('normal')); // Initialize toolbar visibility updateToolbarVisibility(); // This entire block should be removed (lines 717-723) // Add click event listeners to tool buttons lightningButton.addEventListener('click', () => activateTool('lightning', lightningButton)); gravityButton.addEventListener('click', () => activateTool('gravity', gravityButton)); windButton.addEventListener('click', () => activateTool('wind', windButton)); teleporterButton.addEventListener('click', () => activateTool('teleporter', teleporterButton)); magnetButton.addEventListener('click', () => activateTool('magnet', magnetButton)); timeWarpButton.addEventListener('click', () => activateTool('timeWarp', timeWarpButton)); trampolineButton.addEventListener('click', () => activateTool('trampoline', trampolineButton)); // Function to update changelog with enhanced styling and dates function updateChangelog(version, changes, date = new Date().toLocaleDateString()) { const entry = document.createElement('div'); entry.className = 'changelog-entry'; entry.innerHTML = ` v${version} ${changes} ${date} `; changelogList.insertBefore(entry, changelogList.firstChild); } // Add changelog styling const changelogStyle = document.createElement('style'); changelogStyle.textContent = ` .changelog-entry { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .changelog-version { color: #00ffff; font-weight: bold; min-width: 60px; } .changelog-description { color: rgba(255, 255, 255, 0.9); margin-left: 15px; flex-grow: 1; } .changelog-date { color: rgba(255, 255, 255, 0.5); font-size: 0.9em; margin-left: 10px; } `; document.head.appendChild(changelogStyle); // Initial changelog entries updateChangelog('2.1.0', 'Added organized top bar with improved button styling', '2/01/2025'); updateChangelog('2.0.0', 'Major update to tools and game mechanics', '2/01/2025'); updateChangelog('1.9.2', 'Fixed some bugs', '2/01/2025'); updateChangelog('1.9.1', 'Fixed some bugs', '2/01/2025'); updateChangelog('1.9.0', 'Added Spike tool: Summons a spike that can destroy balls on impact', '20/12/2024'); updateChangelog('1.8.3', 'Added ability to select/unselect tools using number keys', '15/12/2024'); updateChangelog('1.8.2', 'Updated cash animation for new display position', '10/12/2024'); updateChangelog('1.8.1', 'Moved cash display to bottom right of the screen', '5/12/2024'); updateChangelog('1.8.0', 'Implemented task system for Normal mode', '1/12/2024'); updateChangelog('1.7.0', 'Added cash earning animation with flying cash icon and green trail', '25/11/2024'); updateChangelog('1.6.2', 'Fixed some bugs', '20/11/2024'); updateChangelog('1.6.1', 'Fixed some bugs', '15/11/2024'); updateChangelog('1.6.0', 'Added Sandbox and Normal game modes', '10/11/2024'); updateChangelog('1.5.1', 'Fixed some bugs', '8/11/2024'); updateChangelog('1.5.0', 'Added help menu with tool explanations', '6/11/2024'); updateChangelog('1.4.2', 'Fixed some bugs', '5/11/2024'); updateChangelog('1.4.1', 'Improved changelog UI and animations', '3/11/2024'); updateChangelog('1.4.0', 'Added Time Warp and Trampoline Placer tools', '2/11/2024'); updateChangelog('1.3.1', 'Fixed some bugs', '2/11/2024'); updateChangelog('1.3.0', 'Added new tools: Gravity Manipulator, Wind Gust, Teleporter, and Magnet', '1/11/2024'); updateChangelog('1.2.0', 'Initial game release', '1/11/2024'); // Function to create lightning strike import { LightningStrike } from 'three/addons/geometries/LightningStrike.js'; function createLightningStrike(position) { const startHeight = 200; // Higher starting point const strikeTime = 100; // Time in ms for the strike to reach ground const mainBoltPoints = []; const branchBolts = []; const segments = 25; const branchCount = Math.floor(Math.random() * 4) + 3; // Create initial points for the descending strike const startPoint = new THREE.Vector3( position.x + (Math.random() - 0.5) * 20, startHeight, position.z + (Math.random() - 0.5) * 20 ); // Function to generate lightning path function generatePath(start, end, segments, maxOffset) { const points = [start.clone()]; for (let i = 1; i < segments; i++) { const progress = i / segments; const point = new THREE.Vector3(); point.lerpVectors(start, end, progress); // Add zigzag effect const offsetScale = Math.sin(progress * Math.PI) * maxOffset; point.x += (Math.random() - 0.5) * offsetScale; point.z += (Math.random() - 0.5) * offsetScale; points.push(point); } points.push(end.clone()); return points; } // Create the descending lightning effect let currentProgress = 0; const strikeInterval = setInterval(() => { currentProgress = Math.min(currentProgress + 0.2, 1); // Generate new path for this frame const currentEndPoint = new THREE.Vector3( position.x, startHeight - (startHeight - position.y) * currentProgress, position.z ); mainBoltPoints.length = 0; // Clear previous points mainBoltPoints.push(...generatePath(startPoint, currentEndPoint, segments, 8)); // Generate branch bolts branchBolts.length = 0; // Clear previous branches for (let i = 0; i < branchCount; i++) { const branchStartIndex = Math.floor(Math.random() * (segments - 8)) + 4; const branchStart = mainBoltPoints[branchStartIndex]; const branchEnd = branchStart.clone().add(new THREE.Vector3( (Math.random() - 0.5) * 15, -5 - Math.random() * 10, (Math.random() - 0.5) * 15 )); const branchPoints = generatePath(branchStart, branchEnd, 8, 3); branchBolts.push(branchPoints); } if (currentProgress >= 1) { clearInterval(strikeInterval); // Create impact effect createShockwave(position); // Check for ball hits in impact area const impactRadius = 10; balls.forEach(ball => { const distance = new THREE.Vector2( ball.mesh.position.x - position.x, ball.mesh.position.z - position.z ).length(); if (distance < impactRadius) { destroyBall(ball, position); } }); } }, strikeTime / 5); // Create visual elements const visualGroup = new THREE.Group(); gameScene.add(visualGroup); // Create dynamic lights const skyLight = new THREE.PointLight(0x00ffff, 100, 200, 2); skyLight.position.copy(startPoint); gameScene.add(skyLight); const groundFlash = new THREE.PointLight(0x00ffff, 80, 50, 2); groundFlash.position.copy(position); gameScene.add(groundFlash); const ambientFlash = new THREE.PointLight(0xaaeeff, 30, 150, 1.5); ambientFlash.position.copy(new THREE.Vector3(position.x, startHeight / 2, position.z)); gameScene.add(ambientFlash); // Animation variables let animationTime = 0; const duration = 0.8; function updateLightning() { // Update main bolt const mainGeometry = new THREE.BufferGeometry().setFromPoints(mainBoltPoints); const mainMaterial = new THREE.LineBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.8, linewidth: 3 }); // Remove old lines visualGroup.clear(); // Add new main bolt const mainBolt = new THREE.Line(mainGeometry, mainMaterial); visualGroup.add(mainBolt); // Add branch bolts branchBolts.forEach(branchPoints => { const branchGeometry = new THREE.BufferGeometry().setFromPoints(branchPoints); const branchMaterial = new THREE.LineBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.6, linewidth: 2 }); const branchBolt = new THREE.Line(branchGeometry, branchMaterial); visualGroup.add(branchBolt); }); } function animateLightning() { animationTime += 0.016; if (animationTime > duration) { gameScene.remove(visualGroup); gameScene.remove(skyLight); gameScene.remove(groundFlash); gameScene.remove(ambientFlash); return; } const progress = animationTime / duration; const fadeOut = 1 - progress; // Flicker effect const flicker = 0.7 + Math.random() * 0.3; // Update all materials visualGroup.children.forEach(bolt => { bolt.material.opacity = fadeOut * flicker; }); // Update lights with more dramatic flicker skyLight.intensity = 100 * fadeOut * flicker; groundFlash.intensity = 80 * fadeOut * flicker; ambientFlash.intensity = 30 * fadeOut * (0.8 + Math.random() * 0.4); // Position lights along the bolt if (mainBoltPoints.length > 1) { const midIndex = Math.floor(mainBoltPoints.length * progress); if (midIndex < mainBoltPoints.length) { const midPoint = mainBoltPoints[midIndex]; skyLight.position.copy(midPoint); } } requestAnimationFrame(animateLightning); } // Start the animations updateLightning(); animateLightning(); // Add thunder sound effect here if you want // playThunderSound(); } function createLightningBranch(start, end, width) { const points = []; points.push(start); let currentPoint = start.clone(); const segments = 10; const direction = end.clone().sub(start).normalize(); const perpendicular = new THREE.Vector3(-direction.z, 0, direction.x).normalize(); for (let i = 0; i < segments; i++) { const t = (i + 1) / segments; currentPoint.lerpVectors(start, end, t); // Create zig-zag effect const zigzag = Math.sin(t * Math.PI * 2) * width * (1 - t); currentPoint.add(perpendicular.clone().multiplyScalar(zigzag)); // Add some randomness currentPoint.x += (Math.random() - 0.5) * width * 0.5; currentPoint.y += (Math.random() - 0.5) * width * 0.2; currentPoint.z += (Math.random() - 0.5) * width * 0.5; points.push(currentPoint.clone()); } const lightningGeometry = new THREE.BufferGeometry().setFromPoints(points); const lightningMaterial = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.8 }); return new THREE.Line(lightningGeometry, lightningMaterial); } // Tool cooldown and effect durations const toolCooldowns = { lightning: 1000, gravity: 3000, wind: 2000, teleporter: 4000, magnet: 3000, timeWarp: 5000, trampoline: 2000, spike: 2000 }; const toolLastUsed = { lightning: 0, gravity: 0, wind: 0, teleporter: 0, magnet: 0, timeWarp: 0, trampoline: 0, spike: 0 }; // Gravity Manipulator function createGravityField(position) { const radius = 15; const geometry = new THREE.SphereGeometry(radius, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, transparent: true, opacity: 0.3, emissive: 0x00ff00, emissiveIntensity: 0.5 }); const gravityField = new THREE.Mesh(geometry, material); gravityField.position.copy(position); gameScene.add(gravityField); // Apply gravity effect function applyGravityEffect() { balls.forEach(ball => { const distance = ball.mesh.position.distanceTo(gravityField.position); if (distance < radius) { const force = new CANNON.Vec3(0, -20, 0); // Increased downward force ball.body.applyForce(force, ball.body.position); } }); requestAnimationFrame(applyGravityEffect); } applyGravityEffect(); // Remove gravity field after 5 seconds setTimeout(() => { gameScene.remove(gravityField); }, 5000); } // Wind Gust function createWindGust(position, direction) { const length = 20; const arrowHelper = new THREE.ArrowHelper(direction, position, length, 0x0000ff); gameScene.add(arrowHelper); // Apply wind effect function applyWindEffect() { balls.forEach(ball => { const distance = ball.mesh.position.distanceTo(position); if (distance < length) { const force = direction.clone().multiplyScalar(50); // Adjust force strength ball.body.applyForce(force, ball.body.position); } }); requestAnimationFrame(applyWindEffect); } applyWindEffect(); // Remove wind gust after 3 seconds setTimeout(() => { gameScene.remove(arrowHelper); }, 3000); } // Teleporter let teleporterEntrance = null; let teleporterExit = null; function createTeleporter(position) { const geometry = new THREE.TorusGeometry(2, 0.5, 16, 100); const material = new THREE.MeshBasicMaterial({ color: 0xff00ff }); const teleporter = new THREE.Mesh(geometry, material); teleporter.position.copy(position); teleporter.rotation.x = Math.PI / 2; gameScene.add(teleporter); if (!teleporterEntrance) { teleporterEntrance = teleporter; } else { teleporterExit = teleporter; // Start teleportation effect teleportBalls(); } } function teleportBalls() { if (teleporterEntrance && teleporterExit) { balls.forEach(ball => { if (ball.mesh.position.distanceTo(teleporterEntrance.position) < 2) { ball.body.position.copy(teleporterExit.position); ball.body.velocity.set(0, 10, 0); // Give a slight upward velocity } }); requestAnimationFrame(teleportBalls); } } // Magnet function createMagnet(position) { const geometry = new THREE.SphereGeometry(2, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.8, roughness: 0.2, emissive: 0xff0000, emissiveIntensity: 0.5 }); const magnet = new THREE.Mesh(geometry, material); magnet.position.copy(position); gameScene.add(magnet); // Apply magnetic effect function applyMagneticEffect() { balls.forEach(ball => { const distance = ball.mesh.position.distanceTo(magnet.position); if (distance < 20) { const direction = magnet.position.clone().sub(ball.mesh.position).normalize(); const force = direction.multiplyScalar(100 / (distance * distance)); ball.body.applyForce(force, ball.body.position); } }); requestAnimationFrame(applyMagneticEffect); } applyMagneticEffect(); // Remove magnet after 5 seconds setTimeout(() => { gameScene.remove(magnet); }, 5000); } // Time Warp function createTimeWarp(position) { const radius = 12; const geometry = new THREE.SphereGeometry(radius, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x00ffff, transparent: true, opacity: 0.4, emissive: 0x00ffff, emissiveIntensity: 0.3, side: THREE.DoubleSide }); const timeWarpField = new THREE.Mesh(geometry, material); timeWarpField.position.copy(position); gameScene.add(timeWarpField); let timeScale = 0.5; // Slow down time by default // Apply time warp effect function applyTimeWarpEffect() { balls.forEach(ball => { const distance = ball.mesh.position.distanceTo(timeWarpField.position); if (distance < radius) { ball.body.velocity.scale(timeScale); } }); requestAnimationFrame(applyTimeWarpEffect); } applyTimeWarpEffect(); // Remove time warp field after 5 seconds setTimeout(() => { gameScene.remove(timeWarpField); }, 5000); } // Trampoline Placer function createTrampoline(position) { const size = 8; const height = 0.5; const geometry = new THREE.BoxGeometry(size, height, size); const material = new THREE.MeshStandardMaterial({ color: 0xff8000, metalness: 0.3, roughness: 0.7, emissive: 0xff8000, emissiveIntensity: 0.2 }); const trampoline = new THREE.Mesh(geometry, material); trampoline.position.copy(position); trampoline.position.y = height / 2; // Adjust Y position to sit on the ground gameScene.add(trampoline); // Create physics body for trampoline const trampolineShape = new CANNON.Box(new CANNON.Vec3(size / 2, height / 2, size / 2)); const trampolineBody = new CANNON.Body({ mass: 0, // Static body shape: trampolineShape, position: new CANNON.Vec3(position.x, height / 2, position.z), material: new CANNON.Material({ restitution: 1.5 }) // Very bouncy }); world.addBody(trampolineBody); // Remove trampoline after 10 seconds setTimeout(() => { gameScene.remove(trampoline); world.removeBody(trampolineBody); }, 10000); } function createSpike(position) { const height = 20; // Increased height for more dramatic effect const radius = 3; // Increased base radius const geometry = new THREE.ConeGeometry(radius, height, 32, 1); const material = new THREE.MeshStandardMaterial({ color: 0xFF0000, metalness: 0.9, roughness: 0.1, emissive: 0xFF0000, emissiveIntensity: 0.3 }); const spike = new THREE.Mesh(geometry, material); // Start position high above the target point spike.position.set(position.x, position.y + 50, position.z); spike.rotation.x = Math.PI; // Point downward gameScene.add(spike); // Create warning indicator const warningGeometry = new THREE.CircleGeometry(radius * 1.5, 32); const warningMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, transparent: true, opacity: 0.5, side: THREE.DoubleSide }); const warning = new THREE.Mesh(warningGeometry, warningMaterial); warning.position.set(position.x, 0.1, position.z); warning.rotation.x = -Math.PI / 2; gameScene.add(warning); // Create physics body for the spike const spikeShape = new CANNON.Cylinder(radius, 0.1, height, 8); const spikeBody = new CANNON.Body({ mass: 0, shape: spikeShape, material: new CANNON.Material({ friction: 0.5, restitution: 0.3 }) }); spikeBody.position.set(position.x, position.y + 50, position.z); spikeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI); world.addBody(spikeBody); // Warning animation const warningDuration = 1000; const startWarningTime = Date.now(); function animateWarning() { const elapsedTime = Date.now() - startWarningTime; const progress = elapsedTime / warningDuration; if (progress < 1) { warningMaterial.opacity = 0.5 * (1 + Math.sin(progress * Math.PI * 8)); warning.scale.setScalar(1 + 0.2 * Math.sin(progress * Math.PI * 4)); requestAnimationFrame(animateWarning); } else { // Start spike descent after warning const descentDuration = 500; // Half second for descent const startDescentTime = Date.now(); function animateDescent() { const descentElapsed = Date.now() - startDescentTime; const descentProgress = Math.min(descentElapsed / descentDuration, 1); const easedProgress = 1 - Math.pow(1 - descentProgress, 4); // Quartic ease-in const newY = position.y + 50 * (1 - easedProgress); spike.position.y = newY; spikeBody.position.y = newY; if (descentProgress < 1) { requestAnimationFrame(animateDescent); } else { // Impact effects createShockwave(position); createDebris(position); // Screen shake effect camera.position.y += 0.5; setTimeout(() => camera.position.y -= 0.5, 50); // Check for ball collisions in an area const impactRadius = radius * 2; balls.forEach(ball => { const distance = new THREE.Vector2( ball.mesh.position.x - position.x, ball.mesh.position.z - position.z ).length(); if (distance < impactRadius + ball.mesh.geometry.parameters.radius) { destroyBall(ball, position); } }); // Cleanup setTimeout(() => { gameScene.remove(spike); gameScene.remove(warning); world.removeBody(spikeBody); }, 2000); } } animateDescent(); } } animateWarning(); } function createShockwave(position) { const geometry = new THREE.RingBufferGeometry(0.1, 5, 32); const material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.5, side: THREE.DoubleSide }); const shockwave = new THREE.Mesh(geometry, material); shockwave.position.copy(position); shockwave.rotation.x = -Math.PI / 2; gameScene.add(shockwave); const startTime = Date.now(); const duration = 1000; // 1 second function animateShockwave() { const elapsedTime = Date.now() - startTime; const progress = Math.min(elapsedTime / duration, 1); shockwave.scale.setScalar(1 + progress * 2); material.opacity = 0.5 * (1 - progress); if (progress < 1) { requestAnimationFrame(animateShockwave); } else { gameScene.remove(shockwave); } } animateShockwave(); } function createDebris(position) { const debrisCount = 20; const debrisGeometry = new THREE.IcosahedronBufferGeometry(0.1, 0); const debrisMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.7, metalness: 0.2 }); for (let i = 0; i < debrisCount; i++) { const debris = new THREE.Mesh(debrisGeometry, debrisMaterial); debris.position.copy(position); gameScene.add(debris); const velocity = new THREE.Vector3( (Math.random() - 0.5) * 5, Math.random() * 5 + 2, (Math.random() - 0.5) * 5 ); const startTime = Date.now(); const duration = 1000 + Math.random() * 1000; // 1-2 seconds function animateDebris() { const elapsedTime = Date.now() - startTime; const progress = Math.min(elapsedTime / duration, 1); debris.position.x += velocity.x * 0.016; // Assuming 60 FPS debris.position.y += velocity.y * 0.016 - 9.8 * 0.016 * 0.016 * progress * 10; // Add gravity debris.position.z += velocity.z * 0.016; debris.rotation.x += 0.1; debris.rotation.y += 0.1; if (progress < 1) { requestAnimationFrame(animateDebris); } else { gameScene.remove(debris); } } animateDebris(); } } let combo = 0; let lastComboTime = 0; const comboResetTime = 2000; // 2 seconds to reset combo function destroyBall(ball, destroyerPosition) { const currentTime = Date.now(); if (currentTime - lastComboTime < comboResetTime) { combo++; } else { combo = 1; } lastComboTime = currentTime; const explosionColor = ball.mesh.material.color; const explosionRadius = ball.mesh.geometry.parameters.radius * 2; createEnhancedExplosion(ball.mesh.position, explosionColor, explosionRadius, combo); // Remove the ball gameScene.remove(ball.mesh); world.removeBody(ball.body); balls.splice(balls.indexOf(ball), 1); // Trigger cash animation with combo multiplier const baseAmount = Math.floor(Math.random() * 10) + 1; const comboMultiplier = Math.min(combo, 5); // Cap the multiplier at 5x const amount = baseAmount * comboMultiplier; const ballScreenPosition = toScreenPosition(ball.mesh, camera); const canvasRect = renderer.domElement.getBoundingClientRect(); ballScreenPosition.x += canvasRect.left; ballScreenPosition.y += canvasRect.top; animateCashEarned(amount, ballScreenPosition); // Update task progress if (gameMode === 'normal') { updateTaskProgress(1, 1); // Task 1: Explode balls updateTaskProgress(3, amount); // Task 3: Earn money } // Display combo text if (combo > 1) { displayComboText(combo, ball.mesh.position); } } function createEnhancedExplosion(position, color, radius, combo) { const particleCount = 100 * combo; const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const velocities = []; for (let i = 0; i < particleCount; i++) { const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI; const r = radius * (Math.random() * 0.3 + 0.7) * (combo * 0.2 + 1); const x = r * Math.sin(phi) * Math.cos(theta); const y = r * Math.sin(phi) * Math.sin(theta); const z = r * Math.cos(phi); positions.push(x, y, z); const particleColor = color.clone().multiplyScalar(1 + Math.random() * 0.5); colors.push(particleColor.r, particleColor.g, particleColor.b); sizes.push(Math.random() * 0.5 + 0.5); velocities.push((Math.random() - 0.5) * 0.3 * combo, (Math.random() - 0.5) * 0.3 * combo, (Math.random() - 0.5) * 0.3 * combo); } geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1)); const material = new THREE.PointsMaterial({ size: 0.2, vertexColors: true, blending: THREE.AdditiveBlending, transparent: true, opacity: 1 }); const particles = new THREE.Points(geometry, material); particles.position.copy(position); gameScene.add(particles); const startTime = Date.now(); const duration = 1000 + (combo * 200); // Longer duration for higher combos function animateExplosion() { const elapsedTime = Date.now() - startTime; if (elapsedTime > duration) { gameScene.remove(particles); return; } const progress = elapsedTime / duration; const positions = particles.geometry.attributes.position.array; const opacityFactor = 1 - progress; particles.material.opacity = opacityFactor; for (let i = 0; i < positions.length; i += 3) { positions[i] += velocities[i] * (progress * 10); positions[i + 1] += velocities[i + 1] * (progress * 10) + 9.8 * Math.pow(progress, 2) * 0.5; positions[i + 2] += velocities[i + 2] * (progress * 10); } particles.geometry.attributes.position.needsUpdate = true; requestAnimationFrame(animateExplosion); } animateExplosion(); } function displayComboText(combo, position) { const comboText = document.createElement('div'); comboText.textContent = `${combo}x Combo!`; comboText.style.position = 'absolute'; comboText.style.fontSize = `${20 + combo * 2}px`; comboText.style.fontWeight = 'bold'; comboText.style.color = `hsl(${combo * 30}, 100%, 50%)`; comboText.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; comboText.style.transition = 'transform 0.5s, opacity 0.5s'; comboText.style.pointerEvents = 'none'; const vector = new THREE.Vector3(position.x, position.y, position.z); vector.project(camera); const x = (vector.x * 0.5 + 0.5) * canvas.clientWidth; const y = (vector.y * -0.5 + 0.5) * canvas.clientHeight; comboText.style.left = `${x}px`; comboText.style.top = `${y}px`; comboText.style.transform = 'translate(-50%, -50%) scale(0.5)'; comboText.style.opacity = '0'; parentDiv.appendChild(comboText); requestAnimationFrame(() => { comboText.style.transform = 'translate(-50%, -50%) scale(1)'; comboText.style.opacity = '1'; }); setTimeout(() => { comboText.style.transform = 'translate(-50%, -100%) scale(1.5)'; comboText.style.opacity = '0'; }, 1000); setTimeout(() => { parentDiv.removeChild(comboText); }, 1500); } // Function to handle click events function onMouseClick(event) { const rect = renderer.domElement.getBoundingClientRect(); const x = ((event.clientX - rect.left) / rect.width) * 2 - 1; const y = -((event.clientY - rect.top) / rect.height) * 2 + 1; const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(new THREE.Vector2(x, y), camera); const intersects = raycaster.intersectObjects(gameScene.children); if (intersects.length > 0) { const hitPoint = intersects[0].point; const currentTime = Date.now(); const clickedBall = balls.find(ball => ball.mesh === intersects[0].object); // Handle no active tool case first if (!activeTool && clickedBall) { destroyBall(clickedBall, hitPoint); return; } // Check if tool is available and not on cooldown if (activeTool && (gameMode === 'sandbox' || availableTools.normal.includes(activeTool))) { if (currentTime - toolLastUsed[activeTool] < toolCooldowns[activeTool]) { showToolCooldownMessage(activeTool); return; } // Handle spike tool separately if (activeTool === 'spike') { if (clickedBall) { toolLastUsed[activeTool] = currentTime; updateToolButton(activeTool); createSpike(clickedBall.mesh.position); } return; } // Handle lightning strikes on balls immediately if (activeTool === 'lightning' && clickedBall) { toolLastUsed[activeTool] = currentTime; updateToolButton(activeTool); createLightningStrike(clickedBall.mesh.position); destroyBall(clickedBall, hitPoint); return; } // Handle other tools toolLastUsed[activeTool] = currentTime; updateToolButton(activeTool); switch (activeTool) { case 'lightning': createLightningStrike(hitPoint); break; case 'gravity': createGravityField(hitPoint); break; case 'wind': const windDirection = new THREE.Vector3( camera.position.x - hitPoint.x, 0, camera.position.z - hitPoint.z ).normalize(); createWindGust(hitPoint, windDirection); break; case 'teleporter': createTeleporter(hitPoint); break; case 'magnet': createMagnet(hitPoint); break; case 'timeWarp': createTimeWarp(hitPoint); break; case 'trampoline': createTrampoline(hitPoint); break; } } // Update task progress for using tools if (gameMode === 'normal' && activeTool === 'lightning') { updateTaskProgress(2, 1); // Task 2: Use lightning strike } } } // Add click event listener renderer.domElement.addEventListener('click', onMouseClick); // Create help menu const helpMenu = document.createElement('div'); helpMenu.style.position = 'absolute'; helpMenu.style.top = '50%'; helpMenu.style.left = '50%'; helpMenu.style.transform = 'translate(-50%, -50%)'; helpMenu.style.width = '80%'; helpMenu.style.maxWidth = '600px'; helpMenu.style.maxHeight = '80%'; helpMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; helpMenu.style.color = 'white'; helpMenu.style.padding = '20px'; helpMenu.style.borderRadius = '10px'; helpMenu.style.fontFamily = 'Arial, sans-serif'; helpMenu.style.fontSize = '16px'; helpMenu.style.overflowY = 'auto'; helpMenu.style.display = 'none'; parentDiv.appendChild(helpMenu); // Create close button for help menu const closeButton = document.createElement('button'); closeButton.textContent = '✖'; closeButton.style.position = 'absolute'; closeButton.style.top = '10px'; closeButton.style.right = '10px'; closeButton.style.fontSize = '24px'; closeButton.style.backgroundColor = 'transparent'; closeButton.style.border = 'none'; closeButton.style.color = 'white'; closeButton.style.cursor = 'pointer'; closeButton.style.zIndex = '1000'; closeButton.style.padding = '5px 10px'; helpMenu.appendChild(closeButton); // Add content to help menu const helpContent = `

Tool Guide

⚡ Lightning Strike (1): Creates a lightning bolt that strikes the clicked location, potentially causing explosions.
🌍 Gravity Manipulator (2): Creates a field that increases gravity in the affected area, pulling balls downward.
💨 Wind Gust (3): Generates a directional force that pushes balls in a specific direction.
🌀 Teleporter (4): Creates linked portals. The first click sets the entrance, the second sets the exit. Balls entering one portal will exit from the other.
🧲 Magnet (5): Creates a magnetic field that attracts nearby balls.
⏱️ Time Warp (6): Slows down time in a localized area, affecting the speed of balls passing through it.
🦘 Trampoline (7): Adds a bouncy surface to the terrain, launching balls upward when they touch it.
🔪 Spike (8): Summons a spike from the sky that falls to the clicked location after a short delay. The spike can destroy balls on impact.

Click on a tool or press its corresponding number key to activate it, then click in the game area to use the tool. Press the same number key again to deactivate the tool.

`; helpMenu.innerHTML += helpContent; // Toggle help menu visibility helpButton.addEventListener('click', () => { helpMenu.style.display = 'block'; }); // Close help menu when close button is clicked closeButton.addEventListener('click', (event) => { event.stopPropagation(); // Prevent the click from propagating to the helpMenu helpMenu.style.display = 'none'; }); // Close help menu when clicking outside of it document.addEventListener('click', (event) => { if (event.target !== helpMenu && !helpMenu.contains(event.target) && event.target !== helpButton) { helpMenu.style.display = 'none'; } }); // Cash animation function function animateCashEarned(amount, startPosition) { const cashIcon = document.createElement('img'); cashIcon.src = 'https://play.rosebud.ai/assets/cash.png?6eBz'; cashIcon.style.position = 'absolute'; cashIcon.style.width = '30px'; cashIcon.style.height = '30px'; cashIcon.style.left = `${startPosition.x - 15}px`; cashIcon.style.top = `${startPosition.y - 15}px`; cashIcon.style.zIndex = '1000'; parentDiv.appendChild(cashIcon); // Create canvas for trail const trailCanvas = document.createElement('canvas'); trailCanvas.style.position = 'absolute'; trailCanvas.style.left = '0'; trailCanvas.style.top = '0'; trailCanvas.width = parentDiv.clientWidth; trailCanvas.height = parentDiv.clientHeight; parentDiv.appendChild(trailCanvas); const ctx = trailCanvas.getContext('2d'); const startTime = performance.now(); const duration = 1000; // Animation duration in milliseconds const cashDisplayRect = cashDisplay.getBoundingClientRect(); const parentRect = parentDiv.getBoundingClientRect(); const endPosition = { x: cashDisplayRect.left - parentRect.left + (cashDisplayRect.width / 2), y: cashDisplayRect.top - parentRect.top + (cashDisplayRect.height / 2) }; function animate(currentTime) { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); // Cubic ease-out const currentX = startPosition.x + (endPosition.x - startPosition.x) * easeProgress; const currentY = startPosition.y + (endPosition.y - startPosition.y) * easeProgress; cashIcon.style.left = `${currentX - 15}px`; cashIcon.style.top = `${currentY - 15}px`; // Draw trail ctx.beginPath(); ctx.moveTo(currentX, currentY); ctx.lineTo(currentX + (Math.random() - 0.5) * 10, currentY + (Math.random() - 0.5) * 10); ctx.strokeStyle = `rgba(0, 255, 0, ${(1 - progress) * 0.5})`; ctx.lineWidth = 3; ctx.stroke(); if (progress < 1) { requestAnimationFrame(animate); } else { parentDiv.removeChild(cashIcon); parentDiv.removeChild(trailCanvas); cashAmount += amount; cashDisplay.innerHTML = `$${cashAmount}`; } } requestAnimationFrame(animate); } // Helper function to convert 3D position to screen coordinates function toScreenPosition(obj, camera) { const vector = new THREE.Vector3(); const widthHalf = 0.5 * renderer.domElement.width; const heightHalf = 0.5 * renderer.domElement.height; obj.updateMatrixWorld(); vector.setFromMatrixPosition(obj.matrixWorld); vector.project(camera); vector.x = (vector.x * widthHalf) + widthHalf; vector.y = -(vector.y * heightHalf) + heightHalf; return { x: vector.x, y: vector.y }; } // Start animation animate(); // Add event listeners for start screen buttons document.getElementById('startButton').addEventListener('click', () => { startScreen.style.display = 'none'; showLoadingScreen(); }); function showLoadingScreen() { const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'black'; loadingScreen.style.display = 'flex'; loadingScreen.style.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.zIndex = '1000'; parentDiv.appendChild(loadingScreen); const ball = document.createElement('div'); ball.style.width = '50px'; ball.style.height = '50px'; ball.style.borderRadius = '50%'; ball.style.backgroundColor = 'white'; ball.style.position = 'relative'; loadingScreen.appendChild(ball); const loadingText = document.createElement('div'); loadingText.textContent = 'Loading'; loadingText.style.color = 'white'; loadingText.style.marginTop = '20px'; loadingText.style.fontSize = '24px'; loadingScreen.appendChild(loadingText); let bounceHeight = 0; let bounceDirection = 1; function animateLoading() { if (!assetsLoaded) { bounceHeight += bounceDirection * 2; if (bounceHeight > 50 || bounceHeight < 0) { bounceDirection *= -1; } ball.style.transform = `translateY(${bounceHeight}px)`; requestAnimationFrame(animateLoading); } else { // Assets loaded, animate text flying into ball const ballRect = ball.getBoundingClientRect(); const textRect = loadingText.getBoundingClientRect(); const distanceX = ballRect.left - textRect.left + (ballRect.width - textRect.width) / 2; const distanceY = ballRect.top - textRect.top + (ballRect.height - textRect.height) / 2; loadingText.style.transition = 'all 0.5s ease-in'; loadingText.style.transform = `translate(${distanceX}px, ${distanceY}px) scale(0.1)`; loadingText.style.opacity = '0'; setTimeout(() => { // Explode the ball ball.style.transition = 'all 0.2s ease-out'; ball.style.transform = 'scale(2)'; ball.style.opacity = '0'; setTimeout(() => { loadingScreen.remove(); startGame(); }, 200); }, 500); } } animateLoading(); } function startGame() { // Initialize the game here console.log("Starting the game..."); animate(); // Start your main game animation loop } document.getElementById('optionsButton').addEventListener('click', () => { optionsMenu.style.display = 'flex'; }); document.getElementById('closeOptionsButton').addEventListener('click', () => { optionsMenu.style.display = 'none'; }); // Animation for the ball dodging weapons function animateBallDodging() { const ball = document.getElementById('ball'); const weapon1 = document.getElementById('weapon1'); const weapon2 = document.getElementById('weapon2'); let time = 0; function animate() { time += 0.016; // Assuming 60fps, each frame is about 16ms // Animate ball with smoother sine wave movement const ballPosition = Math.sin(time * 2) * 30 + 40; ball.style.left = `${ballPosition}px`; // Add subtle scaling to ball const ballScale = 1 + Math.sin(time * 4) * 0.1; ball.style.transform = `scale(${ballScale})`; // Animate weapons with varying speeds and reset positions const weapon1Position = (time * 40) % 130 - 30; const weapon2Position = ((time * 50) + 65) % 130 - 30; weapon1.style.top = `${weapon1Position}px`; weapon2.style.top = `${weapon2Position}px`; // Add subtle scaling to weapons const weapon1Scale = 1 + Math.sin(time * 5) * 0.1; const weapon2Scale = 1 + Math.sin((time + 1) * 5) * 0.1; weapon1.style.transform = `scale(${weapon1Scale})`; weapon2.style.transform = `scale(${weapon2Scale})`; requestAnimationFrame(animate); } animate(); } // Start the animation when the start screen is shown animateBallDodging(); // Function to handle option changes function handleOptionChange(optionId, value) { console.log(`${optionId} changed to ${value}`); switch (optionId) { case 'musicVolume': // Adjust music volume break; case 'sfxVolume': // Adjust SFX volume break; case 'shadows': renderer.shadowMap.enabled = value; break; case 'antiAliasing': renderer.antialias = value; renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); // Force renderer update break; case 'quality': setGraphicsQuality(value); break; } } function setGraphicsQuality(quality) { const qualitySettings = { low: { pixelRatio: 1, shadowMapSize: 1024, bloomStrength: 0.5, bloomRadius: 0.5, smaaQuality: 0 }, medium: { pixelRatio: window.devicePixelRatio, shadowMapSize: 2048, bloomStrength: 1, bloomRadius: 0.75, smaaQuality: 1 }, high: { pixelRatio: window.devicePixelRatio * 1.5, shadowMapSize: 4096, bloomStrength: 1.5, bloomRadius: 1, smaaQuality: 2 } }; const settings = qualitySettings[quality]; renderer.setPixelRatio(settings.pixelRatio); sunLight.shadow.mapSize.width = settings.shadowMapSize; sunLight.shadow.mapSize.height = settings.shadowMapSize; bloomPass.strength = settings.bloomStrength; bloomPass.radius = settings.bloomRadius; // Update SMAA pass quality composer.removePass(smaaPass); smaaPass = new SMAAPass( canvas.offsetWidth * settings.pixelRatio, canvas.offsetHeight * settings.pixelRatio, settings.smaaQuality ); composer.addPass(smaaPass); // Update composer size composer.setSize( canvas.offsetWidth * settings.pixelRatio, canvas.offsetHeight * settings.pixelRatio ); // Show quality change notification showQualityNotification(quality); } // Add event listeners for option changes // Function to add event listeners after elements are created function addEventListeners() { const musicVolumeSlider = document.getElementById('musicVolume'); const sfxVolumeSlider = document.getElementById('sfxVolume'); const shadowsCheckbox = document.getElementById('shadows'); const antiAliasingCheckbox = document.getElementById('antiAliasing'); const qualitySelect = document.getElementById('quality'); if (musicVolumeSlider) { musicVolumeSlider.addEventListener('input', (e) => handleOptionChange('musicVolume', e.target.value)); } if (sfxVolumeSlider) { sfxVolumeSlider.addEventListener('input', (e) => handleOptionChange('sfxVolume', e.target.value)); } if (shadowsCheckbox) { shadowsCheckbox.addEventListener('change', (e) => handleOptionChange('shadows', e.target.checked)); } if (antiAliasingCheckbox) { antiAliasingCheckbox.addEventListener('change', (e) => handleOptionChange('antiAliasing', e.target.checked)); } if (qualitySelect) { qualitySelect.addEventListener('change', (e) => handleOptionChange('quality', e.target.value)); } } // Call addEventListeners after the DOM is fully loaded document.addEventListener('DOMContentLoaded', addEventListeners); // Pause menu functionality function togglePause() { isPaused = !isPaused; pauseMenu.style.display = isPaused ? 'block' : 'none'; pauseButton.classList.toggle('paused', isPaused); // Add blur effect to game canvas when paused canvas.style.filter = isPaused ? 'blur(5px)' : 'none'; canvas.style.transition = 'filter 0.3s ease'; if (!isPaused) { animate(); // Resume animation } } // Add event listener for pause button pauseButton.addEventListener('click', togglePause); // Add event listeners for pause menu buttons document.getElementById('resumeButton').addEventListener('click', togglePause); document.getElementById('saveButton').addEventListener('click', saveGame); document.getElementById('upgradesButton').addEventListener('click', showUpgrades); document.getElementById('optionsButtonPause').addEventListener('click', () => { pauseMenu.style.display = 'none'; optionsMenu.style.display = 'flex'; }); document.getElementById('mainMenuButton').addEventListener('click', () => { location.reload(); // Temporary solution - should implement proper menu transition }); // Save game functionality function saveGame(isAutoSave = false) { const gameState = { playerStats: playerStats, cashAmount: cashAmount, availableTools: availableTools, tasks: tasks, gameMode: gameMode, graphicsSettings: { quality: document.getElementById('quality').value, shadows: document.getElementById('shadows').checked, antiAliasing: document.getElementById('antiAliasing').checked }, audioSettings: { musicVolume: document.getElementById('musicVolume').value, sfxVolume: document.getElementById('sfxVolume').value }, saveDate: new Date().toISOString() }; try { localStorage.setItem('gameState', JSON.stringify(gameState)); if (!isAutoSave) { showSaveNotification('Game Saved Successfully!'); } } catch (error) { console.error('Save failed:', error); showSaveNotification('Save Failed!', true); } } function showSaveNotification(message, isError = false) { const notification = document.createElement('div'); notification.style.position = 'absolute'; notification.style.top = '20px'; notification.style.right = '-300px'; // Start off-screen notification.style.backgroundColor = isError ? 'rgba(255, 0, 0, 0.8)' : 'rgba(0, 255, 0, 0.8)'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.color = 'white'; notification.style.zIndex = '2000'; notification.style.fontSize = '16px'; notification.style.fontWeight = 'bold'; notification.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)'; notification.style.transition = 'right 0.5s cubic-bezier(0.4, 0, 0.2, 1)'; notification.style.width = '250px'; const icon = document.createElement('span'); icon.textContent = isError ? '❌ ' : '💾 '; notification.appendChild(icon); const text = document.createElement('span'); text.textContent = message; notification.appendChild(text); parentDiv.appendChild(notification); // Slide in requestAnimationFrame(() => { notification.style.right = '20px'; }); // Slide out after delay setTimeout(() => { notification.style.right = '-300px'; setTimeout(() => notification.remove(), 500); }, 2000); } // Add auto-save functionality let autoSaveInterval = setInterval(() => { if (!isPaused && gameMode === 'normal') { saveGame(true); } }, 300000); // Auto-save every 5 minutes function showQualityNotification(quality) { const qualityMessages = { low: 'Graphics set to Low - Better performance', medium: 'Graphics set to Medium - Balanced', high: 'Graphics set to High - Best visuals' }; const notification = document.createElement('div'); notification.style.position = 'absolute'; notification.style.bottom = '20px'; notification.style.right = '20px'; notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.zIndex = '2000'; notification.style.opacity = '0'; notification.style.transition = 'opacity 0.3s ease-in-out'; const icon = document.createElement('span'); icon.textContent = '⚙️ '; notification.appendChild(icon); const text = document.createElement('span'); text.textContent = qualityMessages[quality]; notification.appendChild(text); parentDiv.appendChild(notification); requestAnimationFrame(() => { notification.style.opacity = '1'; }); setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => notification.remove(), 300); }, 2000); } // Upgrades menu functionality function showUpgrades() { pauseMenu.style.display = 'none'; upgradesMenu.style.display = 'block'; updateUpgradesList(); } function updateUpgradesList() { const upgradesList = document.getElementById('upgradesList'); upgradesList.innerHTML = ''; Object.entries(playerStats).forEach(([stat, level]) => { const cost = upgradesCost[stat] * Math.pow(1.5, level - 1); const upgradeItem = document.createElement('div'); upgradeItem.className = 'upgrade-item'; upgradeItem.innerHTML = `

${formatStatName(stat)}

Level ${level}

`; upgradesList.appendChild(upgradeItem); }); } function formatStatName(stat) { return stat .split(/(?=[A-Z])/) .map(word => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } function purchaseUpgrade(stat) { const cost = upgradesCost[stat] * Math.pow(1.5, playerStats[stat] - 1); if (cashAmount >= cost) { cashAmount -= cost; playerStats[stat]++; cashDisplay.innerHTML = `$${cashAmount}`; updateUpgradesList(); } } document.getElementById('closeUpgradesButton').addEventListener('click', () => { upgradesMenu.style.display = 'none'; pauseMenu.style.display = 'block'; });