import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // Add Google Fonts link const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'; document.head.appendChild(link); import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; const activeDodgeballs = []; // Array to store enemy objects const enemies = []; let playerHits = 0; // Track the number of times the player has been hit let isGameOver = false; // Flag to check if the game is over let currentLevel = 1; // Track current level const TOTAL_LEVELS = 3; // Total number of levels in the game // Level configurations const LEVEL_CONFIG = { 1: { enemies: [{ texture: 'https://play.rosebud.ai/assets/Bully1.png?HglU', x: -5, y: 1, z: -3, speed: 1, strength: 1 }, { texture: 'https://play.rosebud.ai/assets/Bully2.png?to1N', x: 5, y: 1, z: -3, speed: 1, strength: 1 }, { texture: 'https://play.rosebud.ai/assets/Bully3.png?5YE5', x: 0, y: 1, z: -5, speed: 1, strength: 1 }] }, 2: { enemies: [{ texture: 'https://play.rosebud.ai/assets/Bully4.png?n80P', x: -5, y: 1, z: -3, speed: 1.5, strength: 1.5 }, { texture: 'https://play.rosebud.ai/assets/giant monster bully with orange ball in hand.png?TuMB', x: 0, y: 1, z: -5, speed: 1.5, strength: 1.5 }] }, 3: { enemies: [{ texture: 'https://play.rosebud.ai/assets/BossEnemy.png?esuZ', x: 0, y: 1, z: -5, speed: 2, strength: 2 }] } }; let playerThrownFirstBall = false; // Flag to track if the player has thrown the first ball let playerInvincible = false; // Flag to track player invincibility let lastHitTime = 0; // Time of the last hit const invincibilityDuration = 1000; // Duration of invincibility in milliseconds const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen 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); // Create title menu const titleMenu = document.createElement('div'); titleMenu.id = 'titleMenu'; titleMenu.style.position = 'absolute'; titleMenu.style.top = '0'; titleMenu.style.left = '0'; titleMenu.style.width = '100%'; titleMenu.style.height = '100%'; titleMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; titleMenu.style.display = 'flex'; titleMenu.style.flexDirection = 'column'; titleMenu.style.justifyContent = 'center'; titleMenu.style.alignItems = 'center'; titleMenu.style.color = '#00FF00'; titleMenu.style.fontFamily = '"Press Start 2P", cursive'; titleMenu.style.textShadow = '2px 2px #000000'; titleMenu.innerHTML = `

Dodgeball
Showdown

Created by Brain Joose

`; parentDiv.appendChild(titleMenu); // Create hit display const hitDisplay = document.createElement('div'); hitDisplay.id = 'hitDisplay'; hitDisplay.style.position = 'absolute'; hitDisplay.style.top = '10px'; hitDisplay.style.left = '10px'; hitDisplay.style.color = 'white'; hitDisplay.style.fontSize = '24px'; hitDisplay.textContent = 'Level 1 - Hits: 0 / 3'; hitDisplay.style.display = 'none'; // Initially hidden parentDiv.appendChild(hitDisplay); // Initialize audio variables let backgroundMusic; let bounceSound; let gameStarted = false; // 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'; titleMenu.style.display = 'flex'; // Initialize background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/Dodgeball Frenzy.mp3?iYxW'); backgroundMusic.loop = true; backgroundMusic.volume = 0.1; // Adjusted volume for the new track // Initialize bounce sound bounceSound = new Audio('https://play.rosebud.ai/assets/ballbounce.mp3?b9Nx'); bounceSound.volume = 0.3; // Adjust volume as needed }; // Function to start the game function startGame() { titleMenu.style.display = 'none'; hitDisplay.style.display = 'block'; hitDisplay.textContent = 'Hits: 0 / 3'; gameStarted = true; isGameOver = false; playerHits = 0; playerThrownFirstBall = false; playerInvincible = false; lastHitTime = 0; // Clear active dodgeballs activeDodgeballs.forEach(dodgeball => { scene.remove(dodgeball.mesh); world.removeBody(dodgeball.body); }); activeDodgeballs.length = 0; // Reset enemies enemies.forEach(enemy => { enemy.hits = 0; enemy.body.position.copy(enemy.mesh.position); }); // Reset player position playerBody.position.set(0, 1, 5); playerBody.velocity.set(0, 0, 0); camera.position.set(0, 2.8, 5); controls.lock(); backgroundMusic.currentTime = 0; backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); } // Function to show instructions function showInstructions() { const instructionsScreen = document.createElement('div'); instructionsScreen.style.position = 'absolute'; instructionsScreen.style.top = '0'; instructionsScreen.style.left = '0'; instructionsScreen.style.width = '100%'; instructionsScreen.style.height = '100%'; instructionsScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; instructionsScreen.style.color = '#00FF00'; instructionsScreen.style.fontFamily = '"Press Start 2P", cursive'; instructionsScreen.style.padding = '40px'; instructionsScreen.style.boxSizing = 'border-box'; instructionsScreen.style.overflow = 'auto'; instructionsScreen.style.textShadow = '2px 2px #000000'; instructionsScreen.style.lineHeight = '1.5'; instructionsScreen.innerHTML = `

How to Play:

- Use arrow keys to move
- Move the mouse to look around
- Click to throw dodgeballs
- Hit enemies 3 times to eliminate them
- Avoid getting hit 3 times yourself
- Eliminate all enemies to win!

`; parentDiv.appendChild(instructionsScreen); document.getElementById('closeInstructions').addEventListener('click', () => { parentDiv.removeChild(instructionsScreen); }); } // Add event listeners for the buttons document.getElementById('startButton').addEventListener('click', startGame); document.getElementById('instructionsButton').addEventListener('click', showInstructions); loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); // Define collision groups const COLLISION_GROUPS = { ENVIRONMENT: 1, PLAYER: 2, ENEMY: 4, DODGEBALL: 8, DIVIDER: 16 }; const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position to better view the big ball camera.position.set(0, 1.8, 0); // Set camera slightly below the top of the player's head // 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(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(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 } }; // Remove sky creation code // Set up PointerLockControls const controls = new PointerLockControls(camera, document.body); // Add event listener for clicking on the game canvas to start pointer lock canvas.addEventListener('click', () => { controls.lock(); }); // Add event listener for pointer lock state changes controls.addEventListener('lock', () => { console.log('Controls locked'); }); controls.addEventListener('unlock', () => { console.log('Controls unlocked'); }); // Set up movement variables let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; const playerVelocity = new THREE.Vector3(); const playerDirection = new THREE.Vector3(); // Create player physics body const playerShape = new CANNON.Cylinder(0.3, 0.3, 2, 8); // Cylinder shape for player, 2 units tall const playerBody = new CANNON.Body({ mass: 70, // Average human mass in kg shape: playerShape, material: new CANNON.Material(), linearDamping: 0.9, // Add damping to simulate friction angularDamping: 0.9, collisionFilterGroup: COLLISION_GROUPS.PLAYER, collisionFilterMask: COLLISION_GROUPS.ENVIRONMENT | COLLISION_GROUPS.DODGEBALL | COLLISION_GROUPS.DIVIDER, fixedRotation: true, // Prevent the player from tipping over sleepSpeedLimit: 0.1, // Lower sleep speed limit to prevent sinking sleepTimeLimit: 0.5 // Lower sleep time limit to wake up faster from collisions }); playerBody.position.set(0, 1, 5); // Position the player 5 units behind the divider line playerBody.fixedRotation = true; // Prevent rotation world.addBody(playerBody); // Set initial camera position to match player position camera.position.set(0, 2.8, 5); // Set camera slightly above player's head // Add key listeners for movement document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Add mouse click listener for throwing document.addEventListener('click', onMouseClick); // Variables for dodgeball cooldown let isCooldown = false; let lastShotTime = 0; function onKeyDown(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; case 'Space': throwDodgeball(); break; } } function onMouseClick(event) { // Only throw on left click (button 0) and when the game has started if (event.button === 0 && gameStarted) { throwDodgeball(); } } function throwDodgeball() { if (!isCooldown) { const newDodgeball = createDodgeball(); // Set the initial position of the dodgeball const throwDirection = camera.getWorldDirection(new THREE.Vector3()); const startPosition = new THREE.Vector3().addVectors(camera.position, throwDirection.multiplyScalar(1)); newDodgeball.mesh.position.copy(startPosition); newDodgeball.body.position.copy(startPosition); // Apply force to throw the dodgeball const throwForce = 15; // Adjust this value to change throw strength const force = new CANNON.Vec3().copy(throwDirection).scale(throwForce); newDodgeball.body.applyImpulse(force, newDodgeball.body.position); // Add the new dodgeball to the active dodgeballs array activeDodgeballs.push(newDodgeball); // Set cooldown isCooldown = true; lastShotTime = Date.now(); // Set the flag indicating the player has thrown the first ball playerThrownFirstBall = true; } } function onKeyUp(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } } function movePlayer(delta) { playerDirection.set(0, 0, 0); if (moveForward) { playerDirection.z -= 1; } if (moveBackward) { playerDirection.z += 1; } if (moveLeft) { playerDirection.x -= 1; } if (moveRight) { playerDirection.x += 1; } playerDirection.normalize(); // Get the camera's forward and right vectors const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion); const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion); // Calculate the movement vector const movement = new THREE.Vector3() .addScaledVector(forward, -playerDirection.z) // Negate z-direction .addScaledVector(right, playerDirection.x); movement.y = 0; // Ensure no vertical movement movement.normalize(); const speed = 5; // Adjust this value to change player speed const newVelocity = movement.multiplyScalar(speed); // Apply new velocity to the player body playerBody.velocity.x = newVelocity.x; playerBody.velocity.z = newVelocity.z; // Ensure the player stays above the ground if (playerBody.position.y < 1) { playerBody.position.y = 1; playerBody.velocity.y = 0; } // Prevent player from crossing the divider line if (playerBody.position.z <= 0.01) { playerBody.position.z = 0.01; playerBody.velocity.z = Math.max(0, playerBody.velocity.z); } // Update player body rotation based on camera rotation const cameraRotation = new THREE.Euler().setFromQuaternion(camera.quaternion); playerBody.quaternion.setFromEuler(0, cameraRotation.y, 0); } // Helper function for linear interpolation function lerp(start, end, t) { return start * (1 - t) + end * t; } // Create gym environment function createGym() { const gymWidth = 30; const gymLength = 50; const gymHeight = 10; // Create divider line const dividerWidth = 0.1; const dividerHeight = 0.01; const dividerGeometry = new THREE.BoxGeometry(gymLength, dividerHeight, dividerWidth); const dividerMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFFFF }); // White color const dividerMesh = new THREE.Mesh(dividerGeometry, dividerMaterial); dividerMesh.position.set(0, dividerHeight / 2, 0); // Slightly above the ground scene.add(dividerMesh); // Floor const floorGeometry = new THREE.PlaneGeometry(gymWidth, gymLength); const floorTexture = textureLoader.load('https://develop.play.rosebud.ai/assets/WoodFloor_04.png?MBRT'); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set(10, 20); const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTexture, color: 0xD2B48C // Light brown color }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor); // Walls const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 // Brownish red color (Saddle Brown) }); const wallThickness = 0.2; const createWall = (width, height, posX, posY, posZ, rotY) => { const wallGeometry = new THREE.BoxGeometry(width, height, wallThickness); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(posX, posY, posZ); wall.rotation.y = rotY; wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); }; // Side walls createWall(gymLength, gymHeight, 0, gymHeight / 2, -gymWidth / 2, 0); createWall(gymLength, gymHeight, 0, gymHeight / 2, gymWidth / 2, 0); // End walls createWall(gymWidth, gymHeight, -gymLength / 2, gymHeight / 2, 0, Math.PI / 2); createWall(gymWidth, gymHeight, gymLength / 2, gymHeight / 2, 0, Math.PI / 2); // Ceiling const ceilingGeometry = new THREE.PlaneGeometry(gymWidth, gymLength); const ceilingMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF }); const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial); ceiling.position.y = gymHeight; ceiling.rotation.x = Math.PI / 2; scene.add(ceiling); // Basketball hoops const createHoop = (posX) => { const poleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 3.05, 8); const poleMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 }); const pole = new THREE.Mesh(poleGeometry, poleMaterial); pole.position.set(posX, 1.525, -gymWidth / 2 + 1); scene.add(pole); const backboardGeometry = new THREE.BoxGeometry(1.8, 1.05, 0.05); const backboardMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF }); const backboard = new THREE.Mesh(backboardGeometry, backboardMaterial); backboard.position.set(posX, 3.05, -gymWidth / 2 + 0.15); scene.add(backboard); const rimGeometry = new THREE.TorusGeometry(0.225, 0.02, 16, 100); const rimMaterial = new THREE.MeshStandardMaterial({ color: 0xFF4500 }); const rim = new THREE.Mesh(rimGeometry, rimMaterial); rim.position.set(posX, 3.05 - 0.15, -gymWidth / 2 + 0.6); rim.rotation.x = Math.PI / 2; scene.add(rim); }; createHoop(-gymLength / 2 + 1); createHoop(gymLength / 2 - 1); // Physics const floorShape = new CANNON.Box(new CANNON.Vec3(gymWidth / 2, 0.1, gymLength / 2)); const floorBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, collisionFilterGroup: COLLISION_GROUPS.ENVIRONMENT, collisionFilterMask: COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.ENEMY | COLLISION_GROUPS.DODGEBALL }); floorBody.addShape(floorShape); floorBody.position.set(0, -0.1, 0); world.addBody(floorBody); // Add wall physics bodies const wallShape = new CANNON.Box(new CANNON.Vec3(gymLength / 2, gymHeight / 2, wallThickness / 2)); const sideWallShape = new CANNON.Box(new CANNON.Vec3(gymWidth / 2, gymHeight / 2, wallThickness / 2)); const createWallBody = (width, height, posX, posY, posZ, rotY) => { const wallBody = new CANNON.Body({ mass: 0, collisionFilterGroup: COLLISION_GROUPS.ENVIRONMENT, collisionFilterMask: COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.ENEMY | COLLISION_GROUPS.DODGEBALL }); if (rotY === 0) { wallBody.addShape(wallShape); } else { wallBody.addShape(sideWallShape); } wallBody.position.set(posX, posY, posZ); wallBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), rotY); world.addBody(wallBody); }; // Side walls createWallBody(gymLength, gymHeight, 0, gymHeight / 2, -gymWidth / 2, 0); createWallBody(gymLength, gymHeight, 0, gymHeight / 2, gymWidth / 2, 0); // End walls createWallBody(gymWidth, gymHeight, -gymLength / 2, gymHeight / 2, 0, Math.PI / 2); createWallBody(gymWidth, gymHeight, gymLength / 2, gymHeight / 2, 0, Math.PI / 2); // Add physics body for the divider line const dividerShape = new CANNON.Box(new CANNON.Vec3(gymLength / 2, gymHeight / 2, dividerWidth / 2)); const dividerBody = new CANNON.Body({ mass: 0, collisionResponse: true, collisionFilterGroup: COLLISION_GROUPS.DIVIDER, collisionFilterMask: COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.ENEMY // Only collide with players and enemies }); // Static body dividerBody.addShape(dividerShape); dividerBody.position.set(0, gymHeight / 2, 0); world.addBody(dividerBody); // Create the enemies closer to the middle white divider enemies.push(createEnemy('https://play.rosebud.ai/assets/Bully4.png?n80P', -5, 1, -3)); enemies.push(createEnemy('https://play.rosebud.ai/assets/Bully1.png?HglU', 5, 1, -3)); enemies.push(createEnemy('https://play.rosebud.ai/assets/Bully3.png?5YE5', 0, 1, -5)); } // Function to create a dodgeball function createDodgeball(thrownByPlayer = true) { const radius = 0.15; // Size of the dodgeball const segments = 32; const dodgeballGeometry = new THREE.SphereGeometry(radius, segments, segments); const dodgeballMaterial = new THREE.MeshStandardMaterial({ color: thrownByPlayer ? 0xFF0000 : 0xFF8C00 // Red for player, Orange for enemy }); const dodgeballMesh = new THREE.Mesh(dodgeballGeometry, dodgeballMaterial); dodgeballMesh.castShadow = true; scene.add(dodgeballMesh); // Create physics body for the dodgeball const shape = new CANNON.Sphere(radius); const body = new CANNON.Body({ position: new CANNON.Vec3(0, 0, 0), velocity: new CANNON.Vec3(0, 0, 0), mass: 1, // Mass of 1kg shape: shape, material: new CANNON.Material(), collisionFilterGroup: COLLISION_GROUPS.DODGEBALL, collisionFilterMask: COLLISION_GROUPS.ENVIRONMENT | COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.ENEMY }); world.addBody(body); return { mesh: dodgeballMesh, body: body, creationTime: Date.now(), thrownByPlayer: thrownByPlayer }; } // Setup gym lighting const mainLight = new THREE.PointLight(0xFFFFFF, 1, 100); mainLight.position.set(0, 8, 0); mainLight.castShadow = true; mainLight.shadow.mapSize.width = 2048; mainLight.shadow.mapSize.height = 2048; scene.add(mainLight); const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5); scene.add(ambientLight); // Create initial scene createGym(); function animate() { requestAnimationFrame(animate); if (isGameOver) return; // Stop animation if game is over const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded && gameStarted) { world.step(deltaTime); movePlayer(deltaTime); // Check win condition checkWinCondition(); // Smoothly update camera position based on physics body const lerpFactor = 0.1; // Adjust this value to change smoothing (0.1 = 10% of the way there each frame) const eyeHeight = 1.6; // Typical eye height for a person camera.position.x = lerp(camera.position.x, playerBody.position.x, lerpFactor); camera.position.z = lerp(camera.position.z, playerBody.position.z, lerpFactor); camera.position.y = lerp(camera.position.y, playerBody.position.y + eyeHeight, lerpFactor); // Update camera rotation directly from PointerLockControls camera.quaternion.copy(controls.getObject().quaternion); // Check for collisions checkCollisions(); // Make the enemies face the camera and handle AI behavior enemies.forEach(enemy => { enemy.mesh.lookAt(camera.position); // Move the enemy left and right const newX = enemy.initialX + Math.sin(Date.now() * 0.001 * enemy.movementSpeed) * enemy.movementAmplitude; enemy.mesh.position.x = newX; enemy.body.position.x = newX; // Ensure enemy doesn't cross the divider line if (enemy.body.position.z > -0.01) { enemy.body.position.z = -0.01; enemy.mesh.position.z = -0.01; } // Enemy AI: decide when to shoot if (playerThrownFirstBall && Math.random() < 0.03 && !enemy.isCooldown) { // 3% chance to shoot each frame const newDodgeball = enemyShootAtPlayer(enemy, camera.position); if (newDodgeball) { activeDodgeballs.push(newDodgeball); } } // Handle enemy cooldown if (enemy.isCooldown && Date.now() - enemy.lastShotTime >= 1000) { // 1 second cooldown enemy.isCooldown = false; } }); // Update all dodgeballs for (let i = activeDodgeballs.length - 1; i >= 0; i--) { const dodgeball = activeDodgeballs[i]; dodgeball.mesh.position.copy(dodgeball.body.position); dodgeball.mesh.quaternion.copy(dodgeball.body.quaternion); // Remove the dodgeball if it goes out of bounds or is too old const maxLifetime = 5000; // 5 seconds const maxDistanceSquared = 30 * 30; // 30 units squared if (Math.abs(dodgeball.body.position.y) > 20 || Math.abs(dodgeball.body.position.x) > 50 || Math.abs(dodgeball.body.position.z) > 50 || Date.now() - dodgeball.creationTime > maxLifetime || dodgeball.body.position.lengthSquared() > maxDistanceSquared) { scene.remove(dodgeball.mesh); world.removeBody(dodgeball.body); activeDodgeballs.splice(i, 1); } } // Handle player cooldown if (isCooldown && Date.now() - lastShotTime >= 200) { // Reduced cooldown time to 200ms isCooldown = false; } // Check for collisions checkCollisions(); // Animate explosions explosionAnimations.forEach((animation, index) => { animation(); if (Date.now() - explosionStartTimes[index] > 1000) { explosionAnimations.splice(index, 1); explosionStartTimes.splice(index, 1); } }); } // Update player invincibility visual effect if (playerInvincible) { const elapsedTime = Date.now() - lastHitTime; const blinkRate = 100; // Blink every 100ms if (Math.floor(elapsedTime / blinkRate) % 2 === 0) { playerBody.material.opacity = 0.5; } else { playerBody.material.opacity = 1; } } else { playerBody.material.opacity = 1; } composer.render(); } // Initialize explosion animations array const explosionAnimations = []; const explosionStartTimes = []; // Function to check for collisions between player and dodgeballs function checkCollisions() { if (isGameOver) return; // Don't check collisions if the game is over const playerRadius = 0.5; // Increased player radius for more forgiving collisions const dodgeballRadius = 0.15; const playerSphere = new THREE.Sphere(new THREE.Vector3(playerBody.position.x, playerBody.position.y, playerBody.position.z), playerRadius); // Check player collisions for (let dodgeballIndex = activeDodgeballs.length - 1; dodgeballIndex >= 0; dodgeballIndex--) { const dodgeball = activeDodgeballs[dodgeballIndex]; if (!dodgeball || !dodgeball.body) { // Remove invalid dodgeball activeDodgeballs.splice(dodgeballIndex, 1); continue; } if (!dodgeball.thrownByPlayer) { // Only check enemy dodgeballs const dodgeballSphere = new THREE.Sphere(new THREE.Vector3(dodgeball.body.position.x, dodgeball.body.position.y, dodgeball.body.position.z), dodgeballRadius); if (playerSphere.intersectsSphere(dodgeballSphere)) { handlePlayerHit(dodgeball); removeDodgeball(dodgeballIndex); continue; } } } // Check enemy collisions for (let dodgeballIndex = activeDodgeballs.length - 1; dodgeballIndex >= 0; dodgeballIndex--) { const dodgeball = activeDodgeballs[dodgeballIndex]; if (!dodgeball || !dodgeball.body) { // Remove invalid dodgeball activeDodgeballs.splice(dodgeballIndex, 1); continue; } if (dodgeball.thrownByPlayer) { for (let enemyIndex = enemies.length - 1; enemyIndex >= 0; enemyIndex--) { const enemy = enemies[enemyIndex]; const enemyDistance = enemy.body.position.distanceTo(dodgeball.body.position); if (enemyDistance < 0.5 + dodgeballRadius) { // Assuming enemy radius is 0.5 handleEnemyHit(enemy, enemyIndex, dodgeball); removeDodgeball(dodgeballIndex); break; // Only handle one enemy collision per dodgeball per frame } } } } } function handlePlayerHit(dodgeball) { const currentTime = Date.now(); if (!playerInvincible && currentTime - lastHitTime > invincibilityDuration) { // Apply damage playerHits++; updateHitDisplay(); if (playerHits >= 3) { // Reset player position and hits, but keep current level playerHits = 0; playerBody.position.set(0, 1, 5); playerBody.velocity.set(0, 0, 0); camera.position.set(0, 2.8, 5); loadLevel(currentLevel); hitDisplay.textContent = `Level ${currentLevel} - Hits: ${playerHits} / 3`; controls.lock(); } // Play bounce sound playBounceSound(); // Set player as invincible playerInvincible = true; lastHitTime = currentTime; // Reset invincibility after duration setTimeout(() => { playerInvincible = false; }, invincibilityDuration); // Calculate bounce direction const bounceDirection = new CANNON.Vec3() .copy(dodgeball.body.position) .vsub(playerBody.position) .unit(); // Apply bounce impulse const bounceStrength = 8; // Increased bounce strength for more noticeable effect dodgeball.body.applyImpulse(bounceDirection.scale(bounceStrength), dodgeball.body.position); // Add a larger upward impulse to prevent the ball from rolling on the ground dodgeball.body.applyImpulse(new CANNON.Vec3(0, 4, 0), dodgeball.body.position); // Visual feedback for player hit createHitEffect(playerBody.position); } } function createHitEffect(position) { const hitGeometry = new THREE.SphereGeometry(0.5, 32, 32); const hitMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, transparent: true, opacity: 0.5 }); const hitMesh = new THREE.Mesh(hitGeometry, hitMaterial); hitMesh.position.copy(position); scene.add(hitMesh); // Animate the hit effect const startTime = Date.now(); const animateHit = () => { const elapsedTime = Date.now() - startTime; const scale = 1 + elapsedTime / 200; // Grow over time hitMesh.scale.set(scale, scale, scale); hitMesh.material.opacity = Math.max(0, 0.5 - elapsedTime / 500); if (elapsedTime < 500) { requestAnimationFrame(animateHit); } else { scene.remove(hitMesh); } }; animateHit(); } function removeDodgeball(index) { if (index >= 0 && index < activeDodgeballs.length && activeDodgeballs[index]) { const dodgeball = activeDodgeballs[index]; if (dodgeball.mesh) { scene.remove(dodgeball.mesh); } if (dodgeball.body) { world.removeBody(dodgeball.body); } activeDodgeballs.splice(index, 1); } } // Function to update the hit display function updateHitDisplay() { const hitDisplay = document.getElementById('hitDisplay'); if (hitDisplay) { hitDisplay.textContent = `Hits: ${playerHits} / 3`; } } // Function to handle game over function resetGame() { // Reset game state isGameOver = false; playerHits = 0; currentLevel = 1; // Reset player position playerBody.position.set(0, 1, 5); playerBody.velocity.set(0, 0, 0); camera.position.set(0, 2.8, 5); // Update display hitDisplay.textContent = `Level ${currentLevel} - Hits: ${playerHits} / 3`; // Load first level loadLevel(currentLevel); // Reset controls controls.lock(); } function backToMenu() { // Remove game over screen const gameOverScreen = document.getElementById('gameOverScreen'); if (gameOverScreen) { parentDiv.removeChild(gameOverScreen); } // Hide hit display hitDisplay.style.display = 'none'; // Show title menu titleMenu.style.display = 'flex'; // Reset game state isGameOver = false; gameStarted = false; playerHits = 0; playerThrownFirstBall = false; playerInvincible = false; lastHitTime = 0; // Clear active dodgeballs activeDodgeballs.forEach(dodgeball => { scene.remove(dodgeball.mesh); world.removeBody(dodgeball.body); }); activeDodgeballs.length = 0; // Clear enemies enemies.forEach(enemy => { scene.remove(enemy.mesh); world.removeBody(enemy.body); }); enemies.length = 0; // Reset to level 1 currentLevel = 1; loadLevel(currentLevel); // Reset player position playerBody.position.set(0, 1, 5); playerBody.velocity.set(0, 0, 0); camera.position.set(0, 2.8, 5); // Reset background music if (backgroundMusic) { backgroundMusic.currentTime = 0; } } // Function to create an enemy function createEnemy(textureUrl, x, y, z) { const enemyGeometry = new THREE.PlaneGeometry(1, 2); // Adjust size as needed const enemyTexture = textureLoader.load(textureUrl); const enemyMaterial = new THREE.MeshBasicMaterial({ map: enemyTexture, transparent: true, side: THREE.DoubleSide }); const enemyMesh = new THREE.Mesh(enemyGeometry, enemyMaterial); enemyMesh.position.set(x, y, z); scene.add(enemyMesh); // Create a physics body for the enemy const enemyShape = new CANNON.Box(new CANNON.Vec3(0.5, 1, 0.1)); // Thin box const enemyBody = new CANNON.Body({ mass: 50, // Heavy dynamic body shape: enemyShape, material: new CANNON.Material(), fixedRotation: true, // Prevent rotation collisionFilterGroup: COLLISION_GROUPS.ENEMY, collisionFilterMask: COLLISION_GROUPS.ENVIRONMENT | COLLISION_GROUPS.DODGEBALL | COLLISION_GROUPS.DIVIDER }); enemyBody.position.copy(enemyMesh.position); world.addBody(enemyBody); return { mesh: enemyMesh, body: enemyBody, lastShotTime: 0, isCooldown: false, initialX: x, movementAmplitude: 2, // The distance the enemy will move left and right movementSpeed: 1 + Math.random() * 0.5, // Random speed between 1 and 1.5 hits: 0 // Add hit counter }; } function enemyShootAtPlayer(enemy, playerPosition) { if (!enemy.isCooldown) { const enemyPosition = enemy.mesh.position; const direction = new THREE.Vector3().subVectors(playerPosition, enemyPosition).normalize(); const dodgeball = createDodgeball(false); // false indicates it's thrown by an enemy // Set initial position const startPosition = new THREE.Vector3().addVectors(enemyPosition, direction.multiplyScalar(1)); dodgeball.mesh.position.copy(startPosition); dodgeball.body.position.copy(startPosition); // Apply force const throwForce = 15; const force = new CANNON.Vec3().copy(direction).scale(throwForce); dodgeball.body.applyImpulse(force, dodgeball.body.position); // Set cooldown enemy.isCooldown = true; enemy.lastShotTime = Date.now(); return dodgeball; } return null; } function handleEnemyHit(enemy, index, dodgeball) { enemy.hits++; // Play bounce sound playBounceSound(); // Calculate the collision normal const collisionNormal = new CANNON.Vec3().copy(dodgeball.body.position).vsub(enemy.body.position).unit(); // Apply an impulse to the dodgeball to make it bounce off const bounceImpulse = 5; // Adjust this value to control the bounce strength dodgeball.body.applyImpulse(collisionNormal.scale(bounceImpulse), dodgeball.body.position); // Add a small upward impulse to prevent the ball from rolling on the ground dodgeball.body.applyImpulse(new CANNON.Vec3(0, 2, 0), dodgeball.body.position); if (enemy.hits >= 3) { // Create explosion effect createExplosion(enemy.mesh.position); // Remove enemy scene.remove(enemy.mesh); world.removeBody(enemy.body); enemies.splice(index, 1); } } function createExplosion(position) { const particleCount = 50; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = position.x + (Math.random() - 0.5) * 2; positions[i + 1] = position.y + (Math.random() - 0.5) * 2; positions[i + 2] = position.z + (Math.random() - 0.5) * 2; colors[i] = 1; colors[i + 1] = 0.5; colors[i + 2] = 0; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true }); const particles = new THREE.Points(geometry, material); scene.add(particles); // Animate explosion const animateExplosion = () => { const positions = particles.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i] += (Math.random() - 0.5) * 0.1; positions[i + 1] += (Math.random() - 0.5) * 0.1; positions[i + 2] += (Math.random() - 0.5) * 0.1; } particles.geometry.attributes.position.needsUpdate = true; }; // Remove explosion after 1 second setTimeout(() => { scene.remove(particles); }, 1000); return animateExplosion; } function checkWinCondition() { if (enemies.length === 0) { if (currentLevel === TOTAL_LEVELS) { // Only reset the game when all levels are complete resetGame(); } else { // Advance to next level if not at the final level currentLevel++; loadLevel(currentLevel); // Update display hitDisplay.textContent = `Level ${currentLevel} - Hits: ${playerHits} / 3`; // Show level transition screen showLevelTransition(); } } } function loadLevel(level) { // Clear existing enemies and dodgeballs enemies.forEach(enemy => { scene.remove(enemy.mesh); world.removeBody(enemy.body); }); enemies.length = 0; // Clear active dodgeballs activeDodgeballs.forEach(dodgeball => { scene.remove(dodgeball.mesh); world.removeBody(dodgeball.body); }); activeDodgeballs.length = 0; // Reset player state for new level playerThrownFirstBall = false; // Load new enemies from configuration const levelEnemies = LEVEL_CONFIG[level].enemies; levelEnemies.forEach(enemyConfig => { const enemy = createEnemy( enemyConfig.texture, enemyConfig.x, enemyConfig.y, enemyConfig.z ); enemy.movementSpeed = enemyConfig.speed; enemy.throwStrength = enemyConfig.strength; enemies.push(enemy); }); } function showLevelTransition() { const transitionScreen = document.createElement('div'); transitionScreen.style.position = 'absolute'; transitionScreen.style.top = '0'; transitionScreen.style.left = '0'; transitionScreen.style.zIndex = '1000'; transitionScreen.style.width = '100%'; transitionScreen.style.height = '100%'; transitionScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; transitionScreen.style.color = '#00FF00'; transitionScreen.style.display = 'flex'; transitionScreen.style.justifyContent = 'center'; transitionScreen.style.alignItems = 'center'; transitionScreen.style.fontSize = '36px'; transitionScreen.style.fontFamily = '"Press Start 2P", cursive'; transitionScreen.innerHTML = `Level ${currentLevel}`; parentDiv.appendChild(transitionScreen); // Remove transition screen after 2 seconds setTimeout(() => { parentDiv.removeChild(transitionScreen); controls.lock(); }, 2000); } // Function to play bounce sound function playBounceSound() { if (bounceSound) { // Create a new audio instance from the original const bounceInstance = bounceSound.cloneNode(); bounceInstance.volume = 0.3; bounceInstance.play().catch(error => { console.warn('Bounce sound playback was prevented:', error); }); // Clean up the instance after it plays bounceInstance.onended = () => { bounceInstance.remove(); }; } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate();

DodgeballShowdown

How to Play:

Dodgeball
Showdown