3D FNaF

I'll enhance the FNaF game with 3D elements using Three.js and add jump scares with more complex animatronic AI. Here's the improved version: 3D FNaF

Time: 12:00 AM

Power: 100%

Animatronics: All quiet

// Game state const game = { time: 0, maxTime: 6 * 60 * 2, // 6am = 6 hours * 60 mins * 2 (half minute increments) power: 100, powerDrain: 0.1, cameras: [ { id: 1, name: "Show Stage", animatronics: ["freddy", "bonnie", "chica"] }, { id: 2, name: "Dining Area", animatronics: ["freddy", "bonnie"] }, { id: 3, name: "Pirate Cove", animatronics: ["foxy"] }, { id: 4, name: "Backstage", animatronics: ["bonnie"] }, { id: 5, name: "Office", animatronics: [] } ], currentCamera: 4, // Start in office animatronicPositions: { freddy: { location: 0, aggression: 0.1, cooldown: 0 }, bonnie: { location: 0, aggression: 0.15, cooldown: 0 }, chica: { location: 0, aggression: 0.12, cooldown: 0 }, foxy: { location: 0, aggression: 0.2, cooldown: 0 } }, leftDoorClosed: false, rightDoorClosed: false, leftLightOn: false, rightLightOn: false, gameOver: false, jumpscareActive: false }; // Three.js setup let scene, camera, renderer, officeScene, cameraScenes = []; let animatronicModels = {}; function init3D() { // Main scene setup scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('camera-view').appendChild(renderer.domElement); // Create camera scenes createOfficeScene(); createCameraScenes(); // Position camera camera.position.z = 5; } function createOfficeScene() { officeScene = new THREE.Scene(); // Office walls const geometry = new THREE.BoxGeometry(10, 5, 10); const material = new THREE.MeshBasicMaterial({ color: 0x333333, side: THREE.BackSide }); const walls = new THREE.Mesh(geometry, material); officeScene.add(walls); // Add doors const leftDoorGeometry = new THREE.BoxGeometry(1, 2.5, 0.2); const rightDoorGeometry = new THREE.BoxGeometry(1, 2.5, 0.2); const doorMaterial = new THREE.MeshBasicMaterial({ color: 0x555555 }); const leftDoor = new THREE.Mesh(leftDoorGeometry, doorMaterial); leftDoor.position.set(-3, 0, 5); officeScene.add(leftDoor); const rightDoor = new THREE.Mesh(rightDoorGeometry, doorMaterial); rightDoor.position.set(3, 0, 5); officeScene.add(rightDoor); } function createCameraScenes() { // Create simple scenes for each camera for (let i = 0; i < game.cameras.length - 1; i++) { const camScene = new THREE.Scene(); const bgColor = i === 2 ? 0x000055 : 0x000000; // Pirate Cove is bluer camScene.background = new THREE.Color(bgColor); // Add some basic elements const geometry = new THREE.BoxGeometry(2, 2, 2); const material = new THREE.MeshBasicMaterial({ color: 0x888888 }); const cube = new THREE.Mesh(geometry, material); camScene.add(cube); cameraScenes.push(camScene); } } // DOM elements const timeDisplay = document.getElementById('time-display'); const powerDisplay = document.getElementById('power-level'); const animatronicStatus = document.getElementById('animatronic-status'); const jumpscareDiv = document.getElementById('jumpscare'); const jumpscareImage = document.getElementById('jumpscare-image'); const gameOverScreen = document.getElementById('game-over'); const gameOverTime = document.getElementById('game-over-time'); const restartButton = document.getElementById('restart'); // Camera buttons document.querySelectorAll('button[id^="cam"]').forEach(button => { button.addEventListener('click', function() { if (game.gameOver || game.jumpscareActive) return; const camId = parseInt(this.id.replace('cam', '')); game.currentCamera = camId - 1; updateCameraView(); game.power -= 1; // Higher power cost for changing cameras }); }); // Door and light buttons document.getElementById('door-left').addEventListener('click', function() { if (game.gameOver || game.jumpscareActive) return; game.leftDoorClosed = !game.leftDoorClosed; this.textContent = game.leftDoorClosed ? 'Open Left Door' : 'Close Left Door'; }); document.getElementById('door-right').addEventListener('click', function() { if (game.gameOver || game.jumpscareActive) return; game.rightDoorClosed = !game.rightDoorClosed; this.textContent = game.rightDoorClosed ? 'Open Right Door' : 'Close Right Door'; }); document.getElementById('light-left').addEventListener('click', function() { if (game.gameOver || game.jumpscareActive) return; game.leftLightOn = !game.leftLightOn; this.textContent = game.leftLightOn ? 'Turn Off Left Light' : 'Left Light'; checkHallway('left'); }); document.getElementById('light-right').addEventListener('click', function() { if (game.gameOver || game.jumpscareActive) return; game.rightLightOn = !game.rightLightOn; this.textContent = game.rightLightOn ? 'Turn Off Right Light' : 'Right Light'; checkHallway('right'); }); // Restart button restartButton.addEventListener('click', function() { resetGame(); }); function updateGameTime() { const hour = Math.floor(game.time / 120); const minute = Math.floor((game.time % 120) / 2); const ampm = hour >= 6 ? 'AM' : 'PM'; const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour; timeDisplay.textContent = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`; } function updatePower() { // Base power drain game.power -= game.powerDrain; // Additional drain for closed doors and lights if (game.leftDoorClosed) game.power -= 1.5; if (game.rightDoorClosed) game.power -= 1.5; if (game.leftLightOn) game.power -= 2; if (game.rightLightOn) game.power -= 2; powerDisplay.textContent = `${Math.max(0, Math.floor(game.power))}%`; if (game.power <= 0) { endGame('out of power'); } } function updateCameraView() { if (game.currentCamera === 4) { // Office scene = officeScene; } else { scene = cameraScenes[game.currentCamera]; } } function checkHallway(side) { if (game.jumpscareActive) return; // Check for animatronics in the hallway let animatronicPresent = false; if (side === 'left') { if (game.animatronicPositions.bonnie.location === 9) { animatronicPresent = true; triggerJumpscare('bonnie'); } } else { if (game.animatronicPositions.chica.location === 9) { animatronicPresent = true; triggerJumpscare('chica'); } } return animatronicPresent; } function moveAnimatronics() { // Update animatronic positions based on AI for (const [name, data] of Object.entries(game.animatronicPositions)) { if (data.cooldown > 0) { data.cooldown--; continue; } // Calculate movement probability based on aggression and time progression const timeFactor = game.time / game.maxTime; const moveProb = data.aggression * (0.5 + timeFactor * 1.5); if (Math.random() < moveProb) { data.location = Math.min(data.location + 1, 10); // Special behavior for Foxy if (name === 'foxy' && data.location === 5 && Math.random() < 0.3) { data.location = 8; // Foxy dashes } } // Check for attacks if (data.location >= 10) { if ((name === 'freddy' && !game.leftDoorClosed) || (name === 'bonnie' && !game.leftDoorClosed) || (name === 'chica' && !game.rightDoorClosed) || (name === 'foxy')) { triggerJumpscare(name); } } } updateAnimatronicStatus(); } function updateAnimatronicStatus() { const statuses = []; for (const [name, data] of Object.entries(game.animatronicPositions)) { if (data.location === 0) continue; let locationDesc; if (data.location < 3) locationDesc = "backstage"; else if (data.location < 6) locationDesc = "moving through restaurant"; else if (data.location < 8) locationDesc = "near office"; else if (data.location < 10) locationDesc = "at door"; else locationDesc = "ATTACKING"; statuses.push(`${name}: ${locationDesc}`); } animatronicStatus.textContent = statuses.length > 0 ? statuses.join(', ') : "All quiet"; } function triggerJumpscare(animatronic) { if (game.jumpscareActive) return; game.jumpscareActive = true; jumpscareImage.src = `https://via.placeholder.com/800x600/FF0000/FFFFFF?text=${animatronic.toUpperCase()}+JUMPSCARE`; jumpscareDiv.style.display = 'flex'; // Play scream sound (would be added with Howler.js in a real implementation) setTimeout(() => { endGame(`${animatronic} got you`); game.jumpscareActive = false; jumpscareDiv.style.display = 'none'; }, 2000); } function endGame(reason) { console.log(`Game over: ${reason}`); game.gameOver = true; gameOverTime.textContent = timeDisplay.textContent; gameOverScreen.classList.remove('hidden'); } function resetGame() { game.time = 0; game.power = 100; game.leftDoorClosed = false; game.rightDoorClosed = false; game.leftLightOn = false; game.rightLightOn = false; game.gameOver = false; game.jumpscareActive = false; game.animatronicPositions = { freddy: { location: 0, aggression: 0.1, cooldown: 0 }, bonnie: { location: 0, aggression: 0.15, cooldown: 0 }, chica: { location: 0, aggression: 0.12, cooldown: 0 }, foxy: { location: 0, aggression: 0.2, cooldown: 0 } }; document.getElementById('door-left').textContent = 'Close Left Door'; document.getElementById('door-right').textContent = 'Close Right Door'; document.getElementById('light-left').textContent = 'Left Light'; document.getElementById('light-right').textContent = 'Right Light'; gameOverScreen.classList.add('hidden'); jumpscareDiv.style.display = 'none'; // Reset to office view game.currentCamera = 4; updateCameraView(); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } function gameLoop() { if (game.gameOver || game.jumpscareActive) return; game.time++; if (game.time >= game.maxTime) { endGame('survived until 6am'); return; } updateGameTime(); updatePower(); moveAnimatronics(); // Slow down the game loop to make it playable setTimeout(gameLoop, 1000); } // Initialize and start the game window.addEventListener('load', () => { init3D(); resetGame(); animate(); gameLoop(); }); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

GAME OVER