// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; // Script loader function function loadScript(url) { return new Promise((resolve, reject) => { // Check if the script is already loaded if (document.querySelector(`script[src="${url}"]`)) { resolve(); return; } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.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'; // Initialize score and score increment flag let score = 0; let scoreIncrementedThisRound = false; // Function to update score display function updateScoreDisplay() { const scoreDisplay = document.getElementById('scoreDisplay'); if (scoreDisplay) { scoreDisplay.textContent = `Score: ${score}`; } else { const newScoreDisplay = document.createElement('div'); newScoreDisplay.id = 'scoreDisplay'; newScoreDisplay.style.position = 'absolute'; newScoreDisplay.style.top = '10px'; newScoreDisplay.style.left = '10px'; newScoreDisplay.style.fontSize = '24px'; newScoreDisplay.style.color = 'white'; newScoreDisplay.textContent = `Score: ${score}`; parentDiv.appendChild(newScoreDisplay); } } // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; // Add chase theme music, bite sound effect, and Cujo's roar sounds const chaseMusic = new Audio('https://play.rosebud.ai/assets/Charles Bernstein 16 Final Confrontation.mp3?eOHm'); chaseMusic.loop = true; let isMusicPlaying = false; const biteSound = new Audio('https://play.rosebud.ai/assets/monster-bite-44538 (1).mp3?AdeM'); const cujoRoarSounds = [ new Audio('https://play.rosebud.ai/assets/leopard-roar-high-pitched-195921.mp3?C8gW'), new Audio('https://play.rosebud.ai/assets/leopard-attack-193175.mp3?Qf37'), new Audio('https://play.rosebud.ai/assets/leopard-roar-deep-pitched-195922.mp3?jfcC') ]; // Optionally, add URL remapping if needed loadingManager.setURLModifier((url) => { if (url.includes('Textures/colormap.png')) { return 'https://play.rosebud.ai/assets/3D_playground_character_colormap.png?N9vm'; } return url; }); const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create main menu const mainMenu = document.createElement('div'); mainMenu.id = 'mainMenu'; mainMenu.style.position = 'absolute'; mainMenu.style.top = '0'; mainMenu.style.left = '0'; mainMenu.style.width = '100%'; mainMenu.style.height = '100%'; mainMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; mainMenu.style.display = 'flex'; mainMenu.style.flexDirection = 'column'; mainMenu.style.justifyContent = 'center'; mainMenu.style.alignItems = 'center'; mainMenu.style.zIndex = '1000'; const gameTitle = document.createElement('h1'); gameTitle.textContent = 'Killer Survival'; gameTitle.style.color = 'white'; gameTitle.style.fontSize = '48px'; gameTitle.style.marginBottom = '20px'; const playButton = document.createElement('button'); playButton.textContent = 'Play'; playButton.style.fontSize = '24px'; playButton.style.padding = '10px 20px'; playButton.style.cursor = 'pointer'; mainMenu.appendChild(gameTitle); mainMenu.appendChild(playButton); parentDiv.appendChild(mainMenu); // Game state let gameStarted = false; // Function to start the game function startGame() { gameStarted = true; mainMenu.style.display = 'none'; // Show the health bar container when the game starts healthBarContainer.style.display = 'flex'; // Initialize score display updateScoreDisplay(); // Start your game logic here animate(); // Start the animation loop } // Event listener for play button playButton.addEventListener('click', startGame); // 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 health bar container const healthBarContainer = document.createElement('div'); healthBarContainer.id = 'healthBarContainer'; healthBarContainer.style.position = 'absolute'; healthBarContainer.style.bottom = '20px'; healthBarContainer.style.left = '20px'; healthBarContainer.style.display = 'flex'; healthBarContainer.style.alignItems = 'center'; healthBarContainer.style.zIndex = '1000'; // Create icon const healthIcon = document.createElement('img'); healthIcon.src = 'https://play.rosebud.ai/assets/human-face-icon-29.jpg?JOpF'; healthIcon.style.width = '50px'; healthIcon.style.height = '50px'; healthIcon.style.marginRight = '15px'; // Create health bar const barContainer = document.createElement('div'); barContainer.style.display = 'flex'; barContainer.style.flexDirection = 'column'; barContainer.style.gap = '5px'; const healthBar = document.createElement('div'); healthBar.id = 'healthBar'; healthBar.style.width = '200px'; healthBar.style.height = '20px'; healthBar.style.backgroundColor = '#333'; healthBar.style.border = '2px solid #000'; healthBar.style.overflow = 'hidden'; const healthBarFill = document.createElement('div'); healthBarFill.id = 'healthBarFill'; healthBarFill.style.width = '100%'; healthBarFill.style.height = '100%'; healthBarFill.style.backgroundColor = '#00ff00'; healthBarFill.style.transition = 'width 0.5s'; const staminaBar = document.createElement('div'); staminaBar.id = 'staminaBar'; staminaBar.style.width = '200px'; staminaBar.style.height = '10px'; staminaBar.style.backgroundColor = '#333'; staminaBar.style.border = '2px solid #000'; staminaBar.style.overflow = 'hidden'; const staminaBarFill = document.createElement('div'); staminaBarFill.id = 'staminaBarFill'; staminaBarFill.style.width = '100%'; staminaBarFill.style.height = '100%'; staminaBarFill.style.backgroundColor = '#0000ff'; staminaBarFill.style.transition = 'width 0.5s'; healthBar.appendChild(healthBarFill); staminaBar.appendChild(staminaBarFill); barContainer.appendChild(healthBar); barContainer.appendChild(staminaBar); healthBarContainer.appendChild(healthIcon); healthBarContainer.appendChild(barContainer); parentDiv.appendChild(healthBarContainer); // Initially hide the health bar container healthBarContainer.style.display = 'none'; // 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'; }; 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, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; // Add fog to the scene const fogColor = 0xDFE9F3; // A light blueish-gray color const fogDensity = 0.02; // Adjust this value to control fog thickness scene.fog = new THREE.FogExp2(fogColor, fogDensity); function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position for lower spawn camera.position.set(0, 15, 30); // Lowered y-coordinate to match Jeffrey's new height camera.lookAt(0, 5, 0); // Adjusted lookAt to point at Jeffrey's new height // Camera settings for character following const cameraSettings = { offset: new THREE.Vector3(0, 5, 15), smoothSpeed: 0.1, rotationSpeed: 0.5, minPolarAngle: 0.1, maxPolarAngle: Math.PI / 2, minDistance: 8, maxDistance: 30, minFollowDistance: 12, }; // 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; renderer.setClearColor(fogColor); // Set clear color to match fog color // 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; uniform vec3 fogColor; uniform float fogDensity; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; vec3 skyColor = mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ); // Calculate fog float fogFactor = 1.0 - exp( -fogDensity * fogDensity * length( vWorldPosition ) * length( vWorldPosition ) ); gl_FragColor = vec4( mix( skyColor, fogColor, fogFactor ), 1.0 ); } `; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, fogColor: { value: new THREE.Color(fogColor) }, fogDensity: { value: fogDensity } }; 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); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minPolarAngle = cameraSettings.minPolarAngle; controls.maxPolarAngle = cameraSettings.maxPolarAngle; controls.minDistance = cameraSettings.minDistance; controls.maxDistance = cameraSettings.maxDistance; controls.target = new THREE.Vector3(0, 2, 0); // Create flat terrain function createTerrain() { const fenceSize = 300; // Keep the fence size as is const terrainSize = 600; // Make the terrain twice as large as the fence // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(terrainSize, terrainSize); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?nYdD'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?7ReE'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(40, 40); // Double the repeat to maintain texture density texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(40, 40); // Double the repeat to maintain texture density 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; scene.add(terrain); const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, }); groundBody.addShape(groundShape); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 1.5); 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; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.8); scene.add(hemiLight); // Add ambient light to soften shadows const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); // ========================= // Character Integration // ========================= // Variables for character let jeffrey = null; let jeffreyBody = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, }; // Character configuration const characterConfig = { // Movement settings walkSpeed: 18, runSpeed: 30, airSpeed: 13, groundDamping: 0.1, airDamping: 0.1, staminaDrain: 30, // Stamina points drained per second while running staminaRegen: 15, // Stamina points regenerated per second while walking/standing minStaminaToRun: 10, // Minimum stamina required to start running acceleration: 20, turnSpeed: 8, jumpForce: 15, jumpCooldown: 0.1, maxJumps: 2, // Physics settings radius: 0.75, height: 7, // Increased height from 5 to 7 mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual and animation settings scale: 10, startHeight: 8, }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, contactEquationRegularizationTime: 3 } ); world.addContactMaterial(characterGroundContact); // Declare cujo variable let cujo; // No replacement needed // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'ShiftLeft' || event.code === 'ShiftRight') { keysPressed.shift = true; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (event.code === 'ShiftLeft' || event.code === 'ShiftRight') { keysPressed.shift = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Create Jeffrey using geometric shapes function createJeffrey() { const jeffreyGroup = new THREE.Group(); // Body (box) const bodyGeometry = new THREE.BoxGeometry(2, 3, 1); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff // Changed to blue }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 4.5; bodyMesh.castShadow = true; jeffreyGroup.add(bodyMesh); // Head (cube) const headGeometry = new THREE.BoxGeometry(1, 1, 1); const headTexture = textureLoader.load('https://play.rosebud.ai/assets/playerface1.png?CDkR'); const headMaterials = [ new THREE.MeshStandardMaterial({ color: 0xffcc99 }), // Right face (X+) new THREE.MeshStandardMaterial({ color: 0xffcc99 }), // Left face (X-) new THREE.MeshStandardMaterial({ color: 0x8b4513 }), // Top face (Y+) - Brown for hair new THREE.MeshStandardMaterial({ color: 0xffcc99 }), // Bottom face (Y-) new THREE.MeshStandardMaterial({ map: headTexture }), // Front face (Z+) new THREE.MeshStandardMaterial({ color: 0xffcc99 }) // Back face (Z-) ]; const headMesh = new THREE.Mesh(headGeometry, headMaterials); headMesh.position.y = 6.5; headMesh.castShadow = true; jeffreyGroup.add(headMesh); // Arms const armGeometry = new THREE.BoxGeometry(0.5, 2, 0.5); const armMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff // Changed to blue }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-1.25, 5, 0); // Increased y from 4 to 5 leftArm.castShadow = true; jeffreyGroup.add(leftArm); const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(1.25, 5, 0); // Increased y from 4 to 5 rightArm.castShadow = true; jeffreyGroup.add(rightArm); // Legs const legGeometry = new THREE.BoxGeometry(0.75, 2, 0.75); const legMaterial = new THREE.MeshStandardMaterial({ color: 0x444444 // Changed to dark grey }); const leftLeg = new THREE.Mesh(legGeometry, legMaterial); leftLeg.position.set(-0.5, 2.25, 0); leftLeg.castShadow = true; jeffreyGroup.add(leftLeg); const rightLeg = new THREE.Mesh(legGeometry, legMaterial); rightLeg.position.set(0.5, 2.25, 0); rightLeg.castShadow = true; jeffreyGroup.add(rightLeg); // Store limbs for animation jeffrey = { group: jeffreyGroup, leftArm, rightArm, leftLeg, rightLeg, rotation: new THREE.Euler(), health: 100, maxHealth: 100, stamina: 100, maxStamina: 100, isRunning: false }; // Create Jeffrey's physics body jeffreyBody = new CANNON.Body({ mass: 200, // Increased mass from 62 to 200 material: characterPhysMaterial, linearDamping: 0.9, // Increased from 0.02 to 0.9 angularDamping: 0.9, // Increased from 0.9 to match linear damping fixedRotation: true, type: CANNON.Body.DYNAMIC, }); const jeffreyShape = new CANNON.Cylinder(characterConfig.radius, characterConfig.radius, characterConfig.height, 8); const shapeOffset = new CANNON.Vec3(0, 0, 0); jeffreyBody.addShape(jeffreyShape, shapeOffset); jeffreyBody.position.set(-145, characterConfig.height / 2 + 5, -145); // Start at one corner of the map world.addBody(jeffreyBody); // Reset contact tracking isGrounded = false; let groundContactCount = 0; jeffreyBody.addEventListener('collide', (event) => { const contact = event.contact; let otherBody; if (event.contact.bi === jeffreyBody) { otherBody = event.contact.bj; contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount++; isGrounded = true; currentJumps = 0; } }); jeffreyBody.addEventListener('endContact', (event) => { let otherBody; if (event.contact.bi === jeffreyBody) { otherBody = event.contact.bj; event.contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(event.contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount = Math.max(0, groundContactCount - 1); if (groundContactCount === 0) { isGrounded = false; } } }); jeffreyGroup.position.y = -characterConfig.height * 0.3; // Significant downward adjustment scene.add(jeffreyGroup); } // Function to get a random spawn position for Cujo function getRandomSpawnPosition() { const mapSize = 280; // Adjusted based on the increased terrain size const minDistanceFromPlayer = 30; // Minimum distance from the player let x, z; do { x = (Math.random() - 0.5) * mapSize; z = (Math.random() - 0.5) * mapSize; } while (Math.sqrt(x * x + z * z) < minDistanceFromPlayer); return new CANNON.Vec3(x, 1.5, z); } // Create Cujo using geometric shapes function createCujo() { const cujoGroup = new THREE.Group(); // Body (box) const bodyGeometry = new THREE.BoxGeometry(2, 1.5, 3); const furTexture = textureLoader.load('https://play.rosebud.ai/assets/fur.png?V8qk'); furTexture.wrapS = THREE.RepeatWrapping; furTexture.wrapT = THREE.RepeatWrapping; furTexture.repeat.set(2, 2); const bodyMaterial = new THREE.MeshStandardMaterial({ map: furTexture, color: 0xA87A5C, // Light brown color roughness: 0.8, metalness: 0.2 }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 1.75; bodyMesh.castShadow = true; cujoGroup.add(bodyMesh); // Head (sphere) const headGeometry = new THREE.SphereGeometry(0.8, 32, 32); const headMaterial = bodyMaterial.clone(); const headMesh = new THREE.Mesh(headGeometry, headMaterial); headMesh.position.set(0, 2.5, 1.4); headMesh.castShadow = true; cujoGroup.add(headMesh); // Eyes const eyeGeometry = new THREE.CircleGeometry(0.2, 32); const eyeTexture = textureLoader.load('https://play.rosebud.ai/assets/eye_PNG35680.png?XVeq'); const eyeMaterial = new THREE.MeshBasicMaterial({ map: eyeTexture, transparent: true, side: THREE.DoubleSide }); function createEye(x, y, z) { const eye = new THREE.Mesh(eyeGeometry, eyeMaterial); eye.position.set(x, y, z); eye.rotation.y = 0; // Remove the rotation eye.lookAt(0, y, 1000); // Make the eye look forward return eye; } const leftEye = createEye(0.3, 2.7, 2.2); cujoGroup.add(leftEye); const rightEye = createEye(-0.3, 2.7, 2.2); cujoGroup.add(rightEye); // Nose (adjusted position and size) const noseGeometry = new THREE.SphereGeometry(0.17, 32, 32); const noseMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 }); // Black color const nose = new THREE.Mesh(noseGeometry, noseMaterial); nose.position.set(0, 2.4, 2.6); cujoGroup.add(nose); // Ears (rotated 180 degrees to hang down properly) const earGeometry = new THREE.BoxGeometry(0.2, 0.8, 0.6); const earMaterial = bodyMaterial.clone(); const leftEar = new THREE.Mesh(earGeometry, earMaterial); leftEar.position.set(0.6, 2.8, 1.2); leftEar.rotation.set(0, 0, Math.PI + Math.PI / 12); cujoGroup.add(leftEar); const rightEar = new THREE.Mesh(earGeometry, earMaterial); rightEar.position.set(-0.6, 2.8, 1.2); rightEar.rotation.set(0, 0, Math.PI - Math.PI / 12); cujoGroup.add(rightEar); // Upper jaw (skull) const skullGeometry = new THREE.BoxGeometry(0.8, 0.5, 1.2); const skullMaterial = bodyMaterial.clone(); const skullMesh = new THREE.Mesh(skullGeometry, skullMaterial); skullMesh.position.set(0, 2.3, 2); cujoGroup.add(skullMesh); // Lower jaw (thicker and more proportional) const jawGeometry = new THREE.BoxGeometry(0.7, 0.3, 1.1); const jawMaterial = bodyMaterial.clone(); const jawMesh = new THREE.Mesh(jawGeometry, jawMaterial); jawMesh.position.set(0, 2.0, 2); cujoGroup.add(jawMesh); // Teeth (sharper) const teethGeometry = new THREE.ConeGeometry(0.03, 0.10, 32); const teethMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF }); // White color const createTeeth = (parent, yOffset, zOffset, rotationX = Math.PI) => { for (let i = 0; i < 5; i++) { const tooth = new THREE.Mesh(teethGeometry, teethMaterial); tooth.position.set(-0.15 + i * 0.075, yOffset, zOffset); tooth.rotation.x = rotationX; parent.add(tooth); } }; createTeeth(skullMesh, -0.23, 0.58); // Upper teeth, pointing down createTeeth(skullMesh, -0.23, 0.4, 0); // Upper teeth, pointing forward createTeeth(jawMesh, 0.13, 0.5); // Lower teeth, adjusted position // Legs const legGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.5, 32); const legMaterial = bodyMaterial.clone(); const legs = []; const legPositions = [{ x: -0.7, z: 1 }, { x: 0.7, z: 1 }, { x: -0.7, z: -1 }, { x: 0.7, z: -1 }]; legPositions.forEach(pos => { const leg = new THREE.Mesh(legGeometry, legMaterial); leg.position.set(pos.x, 0.75, pos.z); leg.castShadow = true; cujoGroup.add(leg); legs.push(leg); }); // Tail const tailGeometry = new THREE.CylinderGeometry(0.1, 0.2, 1, 32); const tailMaterial = bodyMaterial.clone(); const tailMesh = new THREE.Mesh(tailGeometry, tailMaterial); tailMesh.position.set(0, 2, -1.7); tailMesh.rotation.x = Math.PI / 4; tailMesh.castShadow = true; cujoGroup.add(tailMesh); // Create Cujo's physics body const cujoShape = new CANNON.Box(new CANNON.Vec3(1, 0.75, 1.5)); const cujoBody = new CANNON.Body({ mass: 300, // Increased mass from 200 to 300 material: new CANNON.Material('cujoMaterial'), shape: cujoShape, position: getRandomSpawnPosition(), fixedRotation: true, allowSleep: false, linearDamping: 0.9, angularDamping: 0.9 }); world.addBody(cujoBody); cujoGroup.position.copy(cujoBody.position); scene.add(cujoGroup); return { group: cujoGroup, body: cujoBody, legs: legs, jaw: jawMesh, walkSpeed: 2, chaseSpeed: 20, stealthSpeed: 16, hasHidden: false, updateInterval: 100, lastUpdate: 0, target: new THREE.Vector3(), currentRotation: new THREE.Euler(), rotationSpeed: 2, chaseRange: 40, biteRange: 4, biteCooldown: 2000, lastBiteTime: 0, damage: 10, isStealthMode: true, stealthRange: 50, jumpOutRange: 10, jumpOutCooldown: 5000, lastJumpOutTime: 0, musicRange: 400, jumpOutDuration: 3000, lastJumpOutEndTime: 0, isInvisible: false, isChasing: false, chaseStartPosition: new THREE.Vector3(), hideStartTime: 0, forcedChaseDuration: 10000, // 10 seconds in milliseconds lastForcedChaseStartTime: 0, // New property to track when forced chase started minimumHideTime: 2000 // Minimum time (in milliseconds) Cujo must hide before jumping out }; } // Create Cujo first cujo = createCujo(); // Create contact material between Jeffrey and Cujo const jeffreyCujoContact = new CANNON.ContactMaterial( characterPhysMaterial, cujo.body.material, { friction: 0.01, restitution: 0.1, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 } ); world.addContactMaterial(jeffreyCujoContact); // Now create Jeffrey createJeffrey(); // Function to check line of sight between Jeffrey and Cujo function checkLineOfSight() { const rayStart = jeffrey.group.position.clone(); rayStart.y += characterConfig.height / 2; // Adjust to Jeffrey's eye level const rayEnd = cujo.group.position.clone(); rayEnd.y += 1.5; // Adjust to Cujo's body center const rayDirection = new THREE.Vector3().subVectors(rayEnd, rayStart).normalize(); const raycaster = new THREE.Raycaster(rayStart, rayDirection); // Get all meshes in the scene that could block the view const blockingObjects = scene.children.filter(child => child.isMesh && child !== jeffrey.group && child !== cujo.group); const intersects = raycaster.intersectObjects(blockingObjects); // Check if there's an intersection before reaching Cujo if (intersects.length > 0) { const distanceToCujo = rayStart.distanceTo(rayEnd); return intersects[0].distance > distanceToCujo; } return true; // No obstruction } // Function to update health bar function updateBars(health, stamina) { const healthBarFill = document.getElementById('healthBarFill'); const staminaBarFill = document.getElementById('staminaBarFill'); if (healthBarFill) { healthBarFill.style.width = `${health}%`; // Change color based on health level if (health > 60) { healthBarFill.style.backgroundColor = '#00ff00'; // Green } else if (health > 30) { healthBarFill.style.backgroundColor = '#ffff00'; // Yellow } else { healthBarFill.style.backgroundColor = '#ff0000'; // Red } } if (staminaBarFill) { staminaBarFill.style.width = `${stamina}%`; } } // Update Jeffrey movement function updateJeffreyMovement(deltaTime) { if (!jeffrey || !jeffreyBody) return; // Handle stamina regeneration and drain if (jeffrey.isRunning && moveDirection.length() > 0) { jeffrey.stamina = Math.max(0, jeffrey.stamina - characterConfig.staminaDrain * deltaTime); } else { jeffrey.stamina = Math.min(jeffrey.maxStamina, jeffrey.stamina + characterConfig.staminaRegen * deltaTime); } // Determine if Jeffrey can run const canRun = keysPressed.shift && jeffrey.stamina > characterConfig.minStaminaToRun; jeffrey.isRunning = canRun && moveDirection.length() > 0; // Get camera's forward and right vectors const cameraForward = new THREE.Vector3(); const cameraRight = new THREE.Vector3(); camera.getWorldDirection(cameraForward); cameraForward.y = 0; cameraForward.normalize(); cameraRight.crossVectors(new THREE.Vector3(0, 1, 0), cameraForward).normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(cameraForward); if (keysPressed.a) moveDirection.add(cameraRight); if (keysPressed.d) moveDirection.sub(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Simple walking animation if (moveDirection.length() > 0) { const animationSpeed = 5; const animationAmplitude = 0.2; const time = performance.now() * 0.001; // Convert to seconds jeffrey.leftArm.rotation.x = Math.sin(time * animationSpeed) * animationAmplitude; jeffrey.rightArm.rotation.x = Math.sin(time * animationSpeed + Math.PI) * animationAmplitude; jeffrey.leftLeg.rotation.x = Math.sin(time * animationSpeed + Math.PI) * animationAmplitude; jeffrey.rightLeg.rotation.x = Math.sin(time * animationSpeed) * animationAmplitude; } else { // Reset limb rotations when not moving jeffrey.leftArm.rotation.x = 0; jeffrey.rightArm.rotation.x = 0; jeffrey.leftLeg.rotation.x = 0; jeffrey.rightLeg.rotation.x = 0; } // Get current horizontal velocity const currentVelocity = new THREE.Vector2(jeffreyBody.velocity.x, jeffreyBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { const speed = jeffrey.isRunning ? characterConfig.runSpeed : characterConfig.walkSpeed; const targetVelocity = new THREE.Vector2( moveDirection.x * speed, moveDirection.z * speed ); currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); jeffrey.rotation.y = THREE.MathUtils.lerp( jeffrey.rotation.y, targetAngle, characterConfig.turnSpeed * deltaTime ); jeffrey.group.rotation.y = jeffrey.rotation.y; jeffreyBody.quaternion.setFromEuler(0, jeffrey.rotation.y, 0); } else { currentVelocity.multiplyScalar(1 - characterConfig.groundDamping * deltaTime); } } else { // Air movement if (moveDirection.length() > 0) { const airAcceleration = characterConfig.airSpeed * deltaTime; currentVelocity.x += moveDirection.x * airAcceleration; currentVelocity.y += moveDirection.z * airAcceleration; const maxAirSpeed = characterConfig.airSpeed; if (currentVelocity.length() > maxAirSpeed) { currentVelocity.normalize().multiplyScalar(maxAirSpeed); } const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); jeffrey.rotation.y = THREE.MathUtils.lerp( jeffrey.rotation.y, targetAngle, characterConfig.turnSpeed * deltaTime * 0.5 // Reduced turn speed in air ); jeffrey.group.rotation.y = jeffrey.rotation.y; jeffreyBody.quaternion.setFromEuler(0, jeffrey.rotation.y, 0); } else { currentVelocity.multiplyScalar(1 - characterConfig.airDamping * deltaTime); } } jeffreyBody.velocity.x = currentVelocity.x; jeffreyBody.velocity.z = currentVelocity.y; // Handle jumping if (keysPressed.space && !keysPressed.spaceProcessed) { const now = performance.now(); if (isGrounded && now - lastJumpTime > characterConfig.jumpCooldown * 1000) { jeffreyBody.velocity.y = characterConfig.jumpForce; lastJumpTime = now; isGrounded = false; } keysPressed.spaceProcessed = true; } if (!keysPressed.space) { keysPressed.spaceProcessed = false; } // Update Jeffrey's position based on physics body jeffrey.group.position.copy(jeffreyBody.position).sub(new THREE.Vector3(0, characterConfig.height * 0.3, 0)); jeffrey.group.quaternion.copy(jeffreyBody.quaternion); } // Update camera to follow Jeffrey function updateCamera() { if (!jeffrey) return; // Get Jeffrey's position and current camera direction const jeffreyPos = jeffrey.group.position.clone(); const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Calculate target position (character's upper body) let targetPosition = jeffreyPos.clone().add(new THREE.Vector3(0, characterConfig.height / 2, 0)); // Get camera's current horizontal distance to character const cameraToJeffrey = new THREE.Vector3(); cameraToJeffrey.subVectors(camera.position, jeffreyPos); cameraToJeffrey.y = 0; // Ignore vertical distance const currentDistance = cameraToJeffrey.length(); // Check if Jeffrey is moving towards camera const movementTowardCamera = moveDirection.dot(cameraToJeffrey.normalize()) < 0; // Adjust camera position if too close if (movementTowardCamera && currentDistance < cameraSettings.minFollowDistance) { const idealOffset = cameraToJeffrey.normalize().multiplyScalar(cameraSettings.minFollowDistance); idealOffset.y = camera.position.y - jeffreyPos.y; const newCameraPos = jeffreyPos.clone().add(idealOffset); camera.position.lerp(newCameraPos, cameraSettings.smoothSpeed * 2); } // Update OrbitControls target controls.target.lerp(targetPosition, cameraSettings.smoothSpeed); // Update controls controls.update(); } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); // Function to create a rock function createRock(x, z) { const rockGroup = new THREE.Group(); const geometry = new THREE.DodecahedronGeometry(Math.random() * 0.5 + 0.5, 0); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2 }); const rock = new THREE.Mesh(geometry, material); rock.position.set(x, 0, z); rock.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI); rock.scale.set( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5 ); rock.castShadow = true; rock.receiveShadow = true; rockGroup.add(rock); return rockGroup; } // Function to create a bush function createBush(x, z) { const bushGroup = new THREE.Group(); const geometry = new THREE.SphereGeometry(1.5, 8, 8); const material = new THREE.MeshStandardMaterial({ color: 0x2d572c, roughness: 0.8, metalness: 0.2 }); for (let i = 0; i < 5; i++) { const bush = new THREE.Mesh(geometry, material); bush.position.set( Math.random() * 2 - 1, Math.random() * 1.5, Math.random() * 2 - 1 ); bush.scale.set( Math.random() * 0.5 + 0.75, Math.random() * 0.5 + 0.75, Math.random() * 0.5 + 0.75 ); bush.castShadow = true; bush.receiveShadow = true; bushGroup.add(bush); } bushGroup.position.set(x, 0, z); bushGroup.userData = { isBush: true }; return bushGroup; } // Function to create a log function createLog(x, z) { const logGroup = new THREE.Group(); const geometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 8); const material = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.9, metalness: 0.1 }); const log = new THREE.Mesh(geometry, material); log.position.set(x, 0.2, z); log.rotation.set(Math.random() * 0.2 - 0.1, 0, Math.random() * Math.PI); log.castShadow = true; log.receiveShadow = true; logGroup.add(log); return logGroup; } // Remove this entire block // Function to create a single tree function createTree(x, z) { const treeGroup = new THREE.Group(); // Create trunk (larger) const trunkGeometry = new THREE.CylinderGeometry(0.5, 1, 8, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 4; trunk.castShadow = true; treeGroup.add(trunk); // Create foliage (larger) const foliageGeometry = new THREE.SphereGeometry(4, 8, 8); const foliageMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const foliage = new THREE.Mesh(foliageGeometry, foliageMaterial); foliage.position.y = 10; foliage.scale.y = 1.5; foliage.castShadow = true; treeGroup.add(foliage); // Position the tree treeGroup.position.set(x, 0, z); return treeGroup; } // Function to create a tree physics body function createTreePhysics(x, z) { const trunkShape = new CANNON.Cylinder(0.5, 1, 8, 8); const treeBody = new CANNON.Body({ mass: 0, // Static body shape: trunkShape, position: new CANNON.Vec3(x, 4, z) }); world.addBody(treeBody); return treeBody; } // Function to populate the scene with trees and forest elements function populateForest(treeCount = 300, bushCount = 200, elementCount = 400) { const spread = 540; // Increased to match the new terrain size (600 - 60 buffer) const treeSpread = spread * 0.9; // Slightly smaller spread for trees to avoid fence const elementSpread = spread * 0.95; // Slightly larger spread for other elements const fenceSize = 300; // Make sure this matches the fence size in createChainlinkFence const halfFenceSize = fenceSize / 2; // Populate trees for (let i = 0; i < treeCount; i++) { let x, z; do { x = (Math.random() - 0.5) * treeSpread; z = (Math.random() - 0.5) * treeSpread; } while (x * x + z * z < 900); // Avoid spawning trees too close to the center // Create visual tree const tree = createTree(x, z); scene.add(tree); // Create physics body for tree createTreePhysics(x, z); } // Populate bushes for (let i = 0; i < bushCount; i++) { let x, z; do { x = (Math.random() - 0.5) * fenceSize; z = (Math.random() - 0.5) * fenceSize; } while (x * x + z * z < 400); // Avoid spawning bushes too close to the center const bush = createBush(x, z); scene.add(bush); } // Populate other forest elements for (let i = 0; i < elementCount; i++) { let x, z; do { x = (Math.random() - 0.5) * elementSpread; z = (Math.random() - 0.5) * elementSpread; } while (x * x + z * z < 400); // Avoid spawning elements too close to the center // Randomly choose which element to create const random = Math.random(); let element; if (random < 0.5) { element = createRock(x, z); } else { element = createLog(x, z); } scene.add(element); } } // Populate the scene with trees and forest elements populateForest(300, 200, 400); // 300 trees, 200 bushes, 400 other elements // Create and add the chainlink fence const chainlinkFence = createChainlinkFence(); scene.add(chainlinkFence); // Function to find the nearest bush for Cujo to hide in function findNearestBush(position) { let nearestBush = null; let minDistance = Infinity; const fenceSize = 300; // Make sure this matches the fence size in createChainlinkFence const halfFenceSize = fenceSize / 2; scene.traverse((object) => { if (object.userData && object.userData.isBush) { // Check if the bush is within the fence boundary if (Math.abs(object.position.x) < halfFenceSize && Math.abs(object.position.z) < halfFenceSize) { const distanceToPosition = position.distanceTo(object.position); if (distanceToPosition < minDistance) { minDistance = distanceToPosition; nearestBush = object; } } } }); return nearestBush ? { bush: nearestBush, distance: minDistance } : null; } // Function to check if a position is near a bush function isNearBush(position, maxDistance = 10) { const nearestBush = findNearestBush(position); return nearestBush && nearestBush.distance <= maxDistance; } // Create EXIT sign function createExitSign() { const signGroup = new THREE.Group(); // Create the sign board const signGeometry = new THREE.BoxGeometry(10, 5, 0.5); const signMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const signMesh = new THREE.Mesh(signGeometry, signMaterial); signGroup.add(signMesh); // Create the text const loader = new FontLoader(); loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) { const textGeometry = new TextGeometry('EXIT', { font: font, size: 2, height: 0.2, }); const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); textMesh.position.set(-3.5, -1, 0.3); signGroup.add(textMesh); }); // Position the sign at the opposite end of the map signGroup.position.set(145, 10, 145); signGroup.rotation.y = -Math.PI / 4; return signGroup; } const exitSign = createExitSign(); scene.add(exitSign); // Function to create a chainlink fence function createChainlinkFence() { const fenceGroup = new THREE.Group(); const fenceSize = 300; // Increased from 200 to 300 const postSpacing = 15; // Increased from 10 to 15 const postRadius = 0.3; // Increased from 0.2 to 0.3 const postHeight = 8; // Increased from 5 to 8 const fenceHeight = 6; // Increased from 4 to 6 // Load chainlink texture const chainlinkTexture = textureLoader.load('https://play.rosebud.ai/assets/fence.png?fafg'); chainlinkTexture.wrapS = chainlinkTexture.wrapT = THREE.RepeatWrapping; chainlinkTexture.repeat.set(1, 1); // Significantly reduced repeat values // Create fence material const fenceMaterial = new THREE.MeshStandardMaterial({ map: chainlinkTexture, side: THREE.DoubleSide, transparent: true, alphaTest: 0.5, color: 0xCCCCCC, // Slightly grey color to blend with the texture roughness: 0.7, metalness: 0.3 }); // Create post material const postMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 }); // Grey color // Create posts and fence segments for (let i = -fenceSize / 2; i <= fenceSize / 2; i += postSpacing) { // Create posts const postGeometry = new THREE.CylinderGeometry(postRadius, postRadius, postHeight, 8); const post = new THREE.Mesh(postGeometry, postMaterial); post.position.set(i, postHeight / 2, -fenceSize / 2); fenceGroup.add(post); const post2 = post.clone(); post2.position.set(i, postHeight / 2, fenceSize / 2); fenceGroup.add(post2); const post3 = post.clone(); post3.position.set(-fenceSize / 2, postHeight / 2, i); post3.rotation.y = Math.PI / 2; fenceGroup.add(post3); const post4 = post.clone(); post4.position.set(fenceSize / 2, postHeight / 2, i); post4.rotation.y = Math.PI / 2; fenceGroup.add(post4); // Create fence segments if (i < fenceSize / 2) { const fenceGeometry = new THREE.PlaneGeometry(postSpacing, fenceHeight); // Adjust UV mapping fenceGeometry.attributes.uv.array = new Float32Array([ 0, 0, 1, 0, 0, 1, 1, 1 ]); const fenceSegment = new THREE.Mesh(fenceGeometry, fenceMaterial); fenceSegment.position.set(i + postSpacing / 2, fenceHeight / 2, -fenceSize / 2); fenceGroup.add(fenceSegment); const fenceSegment2 = fenceSegment.clone(); fenceSegment2.position.set(i + postSpacing / 2, fenceHeight / 2, fenceSize / 2); fenceSegment2.rotation.y = Math.PI; fenceGroup.add(fenceSegment2); const fenceSegment3 = fenceSegment.clone(); fenceSegment3.position.set(-fenceSize / 2, fenceHeight / 2, i + postSpacing / 2); fenceSegment3.rotation.y = Math.PI / 2; fenceGroup.add(fenceSegment3); const fenceSegment4 = fenceSegment.clone(); fenceSegment4.position.set(fenceSize / 2, fenceHeight / 2, i + postSpacing / 2); fenceSegment4.rotation.y = -Math.PI / 2; fenceGroup.add(fenceSegment4); } } // Add collision bodies for the fence const fenceShape = new CANNON.Box(new CANNON.Vec3(fenceSize / 2, fenceHeight / 2, 0.1)); const fenceBody1 = new CANNON.Body({ mass: 0 }); fenceBody1.addShape(fenceShape); fenceBody1.position.set(0, fenceHeight / 2, -fenceSize / 2); world.addBody(fenceBody1); const fenceBody2 = new CANNON.Body({ mass: 0 }); fenceBody2.addShape(fenceShape); fenceBody2.position.set(0, fenceHeight / 2, fenceSize / 2); world.addBody(fenceBody2); const fenceBody3 = new CANNON.Body({ mass: 0 }); fenceBody3.addShape(fenceShape); fenceBody3.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2); fenceBody3.position.set(-fenceSize / 2, fenceHeight / 2, 0); world.addBody(fenceBody3); const fenceBody4 = new CANNON.Body({ mass: 0 }); fenceBody4.addShape(fenceShape); fenceBody4.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2); fenceBody4.position.set(fenceSize / 2, fenceHeight / 2, 0); world.addBody(fenceBody4); return fenceGroup; } // Cujo's movement parameters const cujoSpeed = 4; // Reduced from 5 to 4 const cujoUpdateInterval = 3000; let cujoLastUpdate = 0; let cujoTarget = new THREE.Vector3(); let cujoCurrentRotation = new THREE.Euler(); const cujoRotationSpeed = 1.5; // Reduced from 2 to 1.5 function bitePlayer() { if (jeffrey && jeffrey.health > 0) { jeffrey.health = Math.max(0, jeffrey.health - cujo.damage); console.log(`Cujo bit Jeffrey! Health: ${jeffrey.health}`); // Play bite sound biteSound.play(); // Visual feedback for bite const flashDuration = 200; // milliseconds, increased for better visibility const bodyMesh = jeffrey.group.children.find(child => child.geometry instanceof THREE.BoxGeometry); if (bodyMesh) { const originalColor = bodyMesh.material.color.getHex(); bodyMesh.material.color.setHex(0xff0000); // Red flash setTimeout(() => { bodyMesh.material.color.setHex(originalColor); }, flashDuration); } // Game over check if (jeffrey.health <= 0) { console.log("Game Over! Jeffrey has been defeated by Cujo."); gameOver(); } } } function gameOver() { // Stop the game loop cancelAnimationFrame(animationFrameId); // Display game over message const gameOverDiv = document.createElement('div'); gameOverDiv.style.position = 'absolute'; gameOverDiv.style.top = '50%'; gameOverDiv.style.left = '50%'; gameOverDiv.style.transform = 'translate(-50%, -50%)'; gameOverDiv.style.fontSize = '48px'; gameOverDiv.style.color = 'red'; gameOverDiv.style.textAlign = 'center'; gameOverDiv.innerHTML = 'Game Over
Jeffrey has been defeated by Cujo!'; parentDiv.appendChild(gameOverDiv); } let animationFrameId; // Function to handle audio context and user interaction // Function to handle audio context and user interaction function handleAudioContext() { // Check if AudioContext is suspended and resume it if (chaseMusic.audioContext && chaseMusic.audioContext.state === 'suspended') { chaseMusic.audioContext.resume(); } // Remove the event listener once it's been called document.removeEventListener('click', handleAudioContext); document.removeEventListener('keydown', handleAudioContext); } // Add event listeners for user interaction document.addEventListener('click', handleAudioContext); document.addEventListener('keydown', handleAudioContext); function animate() { if (!gameStarted) return; // Don't animate if the game hasn't started animationFrameId = requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { checkExit(); // Check if player has reached the exit world.step(deltaTime); updateJeffreyMovement(deltaTime); // Update Jeffrey movement // Apply screen shake effect if (shakeTime > 0) { shakeTime -= deltaTime * 1000; camera.position.x += (Math.random() - 0.5) * shakeIntensity; camera.position.y += (Math.random() - 0.5) * shakeIntensity; camera.position.z += (Math.random() - 0.5) * shakeIntensity; } else { shakeTime = 0; shakeIntensity = 0; } updateCamera(); // Update camera to follow Jeffrey // Update Cujo if (cujo) { const now = performance.now(); const distanceToJeffrey = cujo.group.position.distanceTo(jeffrey.group.position); const isInLineOfSight = checkLineOfSight(); const isCujoVisibleToCamera = checkCujoVisibility(); // Music control based on distance if (distanceToJeffrey <= cujo.musicRange) { if (!isMusicPlaying) { chaseMusic.play(); isMusicPlaying = true; } } else { if (isMusicPlaying) { chaseMusic.pause(); chaseMusic.currentTime = 0; isMusicPlaying = false; } } // Determine Cujo's behavior const forcedChasePeriod = now - cujo.lastForcedChaseStartTime < cujo.forcedChaseDuration; if (forcedChasePeriod || (isCujoVisibleToCamera && distanceToJeffrey <= 40 && !cujo.isHiding)) { // If Cujo is in forced chase mode, visible to the camera, within 40 units, and not hiding, chase the player cujo.isChasing = true; cujo.isStealthMode = false; cujo.target.copy(jeffrey.group.position); setCujoVisibility(true); } else { const nearestBushWithinRange = findNearestBushWithinRange(jeffrey.group.position, 40); const nearestBushToCujo = findNearestBush(cujo.group.position); const nearestBushToJeffrey = findNearestBush(jeffrey.group.position); if (cujo.isChasing) { if (distanceToJeffrey > cujo.chaseRange || cujo.group.position.distanceTo(cujo.chaseStartPosition) > cujo.chaseRange) { cujo.isChasing = false; cujo.isStealthMode = true; } else { if (nearestBushWithinRange && distanceToJeffrey > nearestBushWithinRange.distance) { cujo.target.copy(nearestBushWithinRange.bush.position); } else { cujo.target.copy(jeffrey.group.position); } cujo.isStealthMode = false; cujo.isHiding = false; setCujoVisibility(true); } } else { const isJumpOutActive = now - cujo.lastJumpOutEndTime < cujo.jumpOutDuration; if (!isJumpOutActive && !forcedChasePeriod) { cujo.isStealthMode = true; if (nearestBushToCujo) { const { bush, distance: distanceToBush } = nearestBushToCujo; if (!cujo.isHiding) { if (distanceToJeffrey > distanceToBush) { const targetBush = findNearestBushWithinRange(jeffrey.group.position, 40); if (targetBush) { cujo.target.copy(targetBush.bush.position); } else { cujo.target.copy(jeffrey.group.position); } } else { cujo.target.copy(jeffrey.group.position); } // Check if the bush is within 40 units of Jeffrey before attempting to hide if (cujo.group.position.distanceTo(bush.position) < 2 && bush.position.distanceTo(jeffrey.group.position) <= 40) { cujo.isHiding = true; cujo.hideStartTime = now; setCujoVisibility(false); cujo.hidingBush = bush; cujo.hasHidden = true; // Set this flag when Cujo hides } } else { // Check if Cujo has been hiding for more than 6 seconds if (now - cujo.hideStartTime > 6000) { cujo.isHiding = false; cujo.isChasing = true; cujo.chaseStartPosition.copy(cujo.group.position); cujo.isStealthMode = false; const targetBush = findNearestBushWithinRange(jeffrey.group.position, 40); if (targetBush) { cujo.target.copy(targetBush.bush.position); } else { cujo.target.copy(jeffrey.group.position); } setCujoVisibility(true); cujo.hidingBush = null; } else { // Find all bushes for potential jump out const allBushes = findNearbyBushes(jeffrey.group.position, 40); // Changed to 40 units const bushesNearJeffrey = findNearbyBushes(jeffrey.group.position, 10); // Find bushes within 10 units of Jeffrey if (allBushes.length > 0 && bushesNearJeffrey.length > 0 && now - cujo.lastJumpOutTime > cujo.jumpOutCooldown && cujo.hasHidden && (now - cujo.hideStartTime >= cujo.minimumHideTime)) { // Choose a random bush from bushes near Jeffrey const jumpBush = bushesNearJeffrey[Math.floor(Math.random() * bushesNearJeffrey.length)]; // Update Cujo's position to the chosen bush cujo.group.position.copy(jumpBush.position); cujo.body.position.copy(jumpBush.position); // Execute jump out action jumpOutAtPlayer(jumpBush.position); cujo.lastJumpOutTime = now; cujo.lastJumpOutEndTime = now; cujo.isChasing = true; cujo.chaseStartPosition.copy(cujo.group.position); cujo.hidingBush = null; cujo.hasHidden = false; // Reset the flag after jumping out cujo.hideStartTime = 0; // Reset hide start time } else { // If not jumping out, find bushes within 40 units of Jeffrey for potential hiding const nearbyBushes = findNearbyBushes(jeffrey.group.position, 40); if (nearbyBushes.length > 0) { // Choose the nearest bush from the nearby ones const nearestBush = nearbyBushes.reduce((nearest, current) => (current.position.distanceTo(cujo.group.position) < nearest.position.distanceTo(cujo.group.position)) ? current : nearest ); cujo.target.copy(nearestBush.position); } else { // If no nearby bushes, move towards Jeffrey cujo.target.copy(jeffrey.group.position); } } } } } else { cujo.isHiding = false; cujo.target.copy(jeffrey.group.position); setCujoVisibility(true); cujo.hidingBush = null; } } else { cujo.isChasing = true; cujo.chaseStartPosition.copy(cujo.group.position); cujo.isStealthMode = false; cujo.isHiding = false; if (nearestBushToJeffrey && nearestBushToJeffrey.distance < distanceToJeffrey) { cujo.target.copy(nearestBushToJeffrey.bush.position); } else { cujo.target.copy(jeffrey.group.position); } setCujoVisibility(true); } } } // Movement and rotation logic const cujoDirection = new THREE.Vector3().subVectors(cujo.target, cujo.group.position).normalize(); const targetAngle = Math.atan2(cujoDirection.x, cujoDirection.z); const currentAngle = cujo.group.rotation.y; let newAngle = currentAngle; const angleDiff = targetAngle - currentAngle; if (Math.abs(angleDiff) > Math.PI) { if (angleDiff > 0) { newAngle = currentAngle + (angleDiff - 2 * Math.PI) * cujo.rotationSpeed * deltaTime; } else { newAngle = currentAngle + (angleDiff + 2 * Math.PI) * cujo.rotationSpeed * deltaTime; } } else { newAngle = currentAngle + angleDiff * cujo.rotationSpeed * deltaTime; } cujo.group.rotation.y = newAngle; cujo.body.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), newAngle); let moveSpeed; if (cujo.isChasing) { moveSpeed = cujo.chaseSpeed; } else if (cujo.isHiding) { moveSpeed = 0; } else { moveSpeed = isInLineOfSight ? cujo.stealthSpeed : cujo.stealthSpeed * 1.5; } moveSpeed *= deltaTime; if (!cujo.isHiding) { cujo.body.position.x += cujoDirection.x * moveSpeed; cujo.body.position.z += cujoDirection.z * moveSpeed; const lowerPosition = cujo.body.position.clone(); lowerPosition.y -= 0.5; cujo.group.position.lerp(lowerPosition, 0.1); } // Leg animation const legAnimationSpeed = cujo.isStealthMode ? 0.0025 : 0.005; cujo.legs.forEach((leg, index) => { const offset = index * Math.PI / 2; leg.position.y = 0.75 + Math.sin(now * legAnimationSpeed + offset) * 0.15; }); // Jaw animation if (cujo.jaw) { if (cujo.isStealthMode || cujo.isHiding) { cujo.jaw.rotation.x = 0; // Keep jaw closed while in stealth mode or hiding } else { cujo.jaw.rotation.x = Math.sin(now * 0.003) * 0.15; cujo.jaw.position.y = 2.0 - Math.abs(Math.sin(now * 0.003) * 0.05); } } // Bite behavior if (distanceToJeffrey <= cujo.biteRange && !cujo.isStealthMode && !cujo.isHiding) { if (now - cujo.lastBiteTime > cujo.biteCooldown) { bitePlayer(); cujo.lastBiteTime = now; // Visual feedback for successful bite cujo.jaw.rotation.x = Math.PI / 6; // Open jaw wider setTimeout(() => { cujo.jaw.rotation.x = 0; // Close jaw after a short delay }, 200); } } } // Update health and stamina bars updateBars(jeffrey.health, (jeffrey.stamina / jeffrey.maxStamina) * 100); } composer.render(); } // Function to play a random Cujo roar sound function playRandomCujoRoar() { const randomIndex = Math.floor(Math.random() * cujoRoarSounds.length); cujoRoarSounds[randomIndex].play(); } function jumpOutAtPlayer(jumpPosition) { console.log("Cujo jumps out at Jeffrey!"); // Visual feedback for jump out action cujo.group.scale.y *= 1.2; cujo.jaw.rotation.x = Math.PI / 4; // Open jaw wide // Check distance between Jeffrey and the bush Cujo is jumping from const distanceToJeffrey = jeffrey.group.position.distanceTo(jumpPosition); // Play a random Cujo roar sound only if within 20 units of Jeffrey if (distanceToJeffrey <= 20) { playRandomCujoRoar(); // Trigger more intense screen shake shakeScreen(1.5, 750); // Increased intensity to 1.5, duration to 750ms } // Reset after a short delay setTimeout(() => { cujo.group.scale.y /= 1.2; cujo.jaw.rotation.x = 0; }, 1000); // Set Cujo's position to slightly above the jump position to avoid clipping const adjustedJumpPosition = new THREE.Vector3(jumpPosition.x, jumpPosition.y + 1, jumpPosition.z); cujo.group.position.copy(adjustedJumpPosition); cujo.body.position.copy(adjustedJumpPosition); // Set Cujo's target to Jeffrey's position cujo.target.copy(jeffrey.group.position); cujo.isHiding = false; cujo.isStealthMode = false; cujo.isChasing = true; cujo.chaseStartPosition.copy(adjustedJumpPosition); cujo.lastJumpOutEndTime = performance.now(); cujo.lastForcedChaseStartTime = performance.now(); // Set the start time for forced chase setCujoVisibility(true); } function setCujoVisibility(visible) { cujo.group.traverse((child) => { if (child.isMesh) { child.visible = visible; } }); } let gameWonThisRound = false; // Check if player has reached the exit function checkExit() { if (jeffrey && jeffrey.group && !gameWonThisRound) { const distanceToExit = jeffrey.group.position.distanceTo(exitSign.position); if (distanceToExit < 10) { // If player is within 10 units of the exit console.log("Player has reached the exit!"); gameWonThisRound = true; gameWon(); } } } // Function to handle winning the game function gameWon() { if (!gameWonThisRound) return; // Prevent multiple calls // Stop the game loop cancelAnimationFrame(animationFrameId); // Increment score and update display score++; updateScoreDisplay(); // Display win message const winDiv = document.createElement('div'); winDiv.style.position = 'absolute'; winDiv.style.top = '50%'; winDiv.style.left = '50%'; winDiv.style.transform = 'translate(-50%, -50%)'; winDiv.style.fontSize = '48px'; winDiv.style.color = 'green'; winDiv.style.textAlign = 'center'; winDiv.innerHTML = 'Congratulations!
You have escaped!'; parentDiv.appendChild(winDiv); // Immediately move Jeffrey away from the exit jeffreyBody.position.set(-145, characterConfig.height / 2 + 5, -145); jeffrey.group.position.copy(jeffreyBody.position); // Start the countdown for the next round startCountdown(5); } // Function to start the countdown for the next round function startCountdown(seconds) { const countdownDiv = document.createElement('div'); countdownDiv.style.position = 'absolute'; countdownDiv.style.top = '70%'; countdownDiv.style.left = '50%'; countdownDiv.style.transform = 'translate(-50%, -50%)'; countdownDiv.style.fontSize = '24px'; countdownDiv.style.color = 'white'; countdownDiv.style.textAlign = 'center'; parentDiv.appendChild(countdownDiv); function updateCountdown(timeLeft) { if (timeLeft > 0) { countdownDiv.textContent = `${timeLeft} seconds until next round...`; setTimeout(() => updateCountdown(timeLeft - 1), 1000); } else { countdownDiv.remove(); startNextRound(); } } updateCountdown(seconds); } // Function to start the next round function startNextRound() { // Remove win message const winDiv = parentDiv.querySelector('div[style*="color: green"]'); if (winDiv) winDiv.remove(); // Reset game state flags gameWonThisRound = false; // Reset game state jeffreyBody.position.set(-145, characterConfig.height / 2 + 5, -145); jeffreyBody.velocity.set(0, 0, 0); jeffrey.group.position.copy(jeffreyBody.position); jeffrey.health = jeffrey.maxHealth; jeffrey.stamina = jeffrey.maxStamina; // Reset Cujo const newCujoPosition = getRandomSpawnPosition(); cujo.body.position.copy(newCujoPosition); cujo.body.velocity.set(0, 0, 0); cujo.group.position.copy(newCujoPosition); // Update health and stamina bars updateBars(jeffrey.health, jeffrey.stamina); // Restart the game loop gameStarted = true; animate(); } // Screen shake effect let shakeTime = 0; let shakeIntensity = 0; function shakeScreen(intensity, duration) { shakeIntensity = intensity; shakeTime = duration; } // 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); // Function to check if Cujo is visible to the camera and within 40 units of Jeffrey function checkCujoVisibility() { if (!cujo || !camera || !jeffrey) return false; // Check distance to Jeffrey first const distanceToJeffrey = cujo.group.position.distanceTo(jeffrey.group.position); if (distanceToJeffrey > 40) return false; // Find nearest bushes for Cujo and Jeffrey const cujoBush = findNearestBush(cujo.group.position); const jeffreyBush = findNearestBush(jeffrey.group.position); // If Cujo is closer to a bush than Jeffrey is, return false if (cujoBush && jeffreyBush && cujoBush.distance < jeffreyBush.distance) { return false; } const frustum = new THREE.Frustum(); const matrix = new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(matrix); const cujoPosition = cujo.group.position.clone(); cujoPosition.y += 1.5; // Adjust to Cujo's approximate center return frustum.containsPoint(cujoPosition); } // Function to find all bushes within a certain range of a position function findNearbyBushes(position, range) { const nearbyBushes = []; scene.traverse((object) => { if (object.userData && object.userData.isBush) { const distance = position.distanceTo(object.position); if (distance <= range) { nearbyBushes.push(object); } } }); return nearbyBushes; } // Helper function to find the nearest bush within range of the player function findNearestBushWithinRange(playerPosition, maxDistanceFromPlayer) { let nearestBush = null; let minDistance = Infinity; scene.traverse((object) => { if (object.userData && object.userData.isBush) { const distanceToPlayer = object.position.distanceTo(playerPosition); if (distanceToPlayer <= maxDistanceFromPlayer) { const distanceToCujo = object.position.distanceTo(cujo.group.position); if (distanceToCujo < minDistance) { minDistance = distanceToCujo; nearestBush = object; } } } }); return nearestBush ? { bush: nearestBush, distance: minDistance } : null; } // Start animation animate();