Juego Five Nights at Freddy's HTML: Oficina, cámaras, susto repentino

345 31specmoreland

Remix Abrir en el editor Publica tu código

Juego Five Nights at Freddy's HTML: Oficina, cámaras, susto repentino

Recomendado

22 July 2025

Icono giratorio de carga CSS

12 January 2026

Juego Friday Night Funkin' Impostor Mod HTML5

12 December 2025

Código fuente HTML5 del juego aleatorio Volley

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Five Nights at Epstein's Island - Alpha v1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="game-container">
    <div id="goon-hint">PRESS [G] TO GOON</div>
    
    <div id="office-view">
        <div class="room-wrapper">
            <div class="wall left-wall">
                <div id="door-frame">
                    <div id="actual-door"></div>
                </div>
                <div class="door-controls">
                    <div id="door-status-light"></div>
                    <button class="btn-door" onclick="toggleDoor()">DOOR</button>
                    <button class="btn-light" onmousedown="toggleLight(true)" onmouseup="toggleLight(false)">LIGHT</button>
                </div>
            </div>
            
            <div class="wall center-wall">
                <div class="desk">
                    <div class="fan"></div>
                </div>
            </div>

<div id="ui-layer">
            <div class="stat-box">TIME: <span id="clock">12</span> AM</div>
            <div class="stat-box">POWER: <span id="power">100</span>%</div>
        </div>
    </div>

<div id="camera-system">
        <div class="static-effect"></div>
        
        <div id="cam-nav-bar">
            <button class="cam-btn" onclick="changeCam(0, 'MAIN HALLWAY')">HALLWAY</button>
            <button class="cam-btn" onclick="changeCam(1, 'EPSTEINS ROOM')">ROOM</button>
            <button class="cam-btn" onclick="changeCam(2, 'CORRIDOR')">CORRIDOR</button>
            <button class="cam-btn" onclick="changeCam(3, 'END HALLWAY')">END HALLWAY</button>
        </div>

<div class="cam-label" id="cam-name">CAM 1 - MAIN HALLWAY</div>
        <div id="host-presence">WARNING: SUBJECT DETECTED</div>
        
        <div id="feed-container">
            <img id="cam-feed" src="https://picsum.photos/id/231/1200/800">
        </div>
    </div>

<div id="monitor-toggle" onclick="toggleMonitor()">FLIP MONITOR</div>
</div>

<div id="jumpscare-screen">
    <img id="jumpscare-img" src="https://media.giphy.com/media/3o7TKqnN349PBUtGFO/giphy.gif">
    <h1 id="fail-text">YOU WERE FOUND</h1>
</div>

CSS

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #000; color: #fff;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

#game-container { position: relative; width: 100vw; height: 100vh; perspective: 1200px; }
#goon-hint { position: absolute; top: 10px; right: 10px; font-size: 0.8rem; color: #444; z-index: 100; }

#office-view { width: 100%; height: 100%; display: flex; justify-content: center; background: #050505; }
.room-wrapper { display: flex; width: 100%; height: 100%; transition: filter 0.2s; }
.wall { height: 100%; position: relative; }
.left-wall { width: 30%; background: #1a1a1a; border-right: 5px solid #000; }
.center-wall { width: 40%; background: #111; display: flex; align-items: flex-end; justify-content: center; }
.right-wall { width: 30%; background: #1a1a1a; border-left: 5px solid #000; }

#door-frame { position: absolute; top: 15%; left: 10%; width: 80%; height: 75%; background: #000; border: 8px solid #222; overflow: hidden; }
#actual-door { width: 100%; height: 100%; background: #333; transition: transform 0.4s ease; transform: translateY(-100%); }
#actual-door.closed { transform: translateY(0%); }

.door-controls { position: absolute; bottom: 30px; left: 105%; z-index: 10; }
.btn-door, .btn-light { display: block; width: 70px; height: 50px; margin: 10px 0; background: #444; color: white; border: 3px solid #666; cursor: pointer; }
#door-status-light { width: 20px; height: 20px; background: #0f0; border-radius: 50%; margin: 0 auto; }

#ui-layer { position: absolute; top: 20px; left: 20px; z-index: 20; }
.stat-box { background: rgba(0,0,0,0.8); padding: 10px; margin-bottom: 5px; border-left: 4px solid #0f0; }

#monitor-toggle { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 45px; background: rgba(40,40,40,0.9); border: 2px solid #fff; cursor: pointer; text-align: center; line-height: 45px; z-index: 100; }

#camera-system { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 50; }
#cam-nav-bar { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 60; background: rgba(0,0,0,0.7); padding: 10px; border: 1px solid #555; }
.cam-btn { padding: 10px; background: #222; color: #fff; border: 1px solid #fff; cursor: pointer; }

#feed-container { width: 100%; height: 100%; overflow: hidden; }
#cam-feed { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) sepia(0.3); }
.static-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://media.giphy.com/media/oEI9uWU0WMrQmID69D/giphy.gif'); opacity: 0.05; pointer-events: none; z-index: 51; }

.cam-label { position: absolute; bottom: 60px; left: 40px; font-size: 1.5rem; z-index: 60; color: #0f0; }
#host-presence { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #ff0000; font-weight: bold; font-size: 3rem; display: none;
    text-shadow: 0 0 20px #ff0000; z-index: 65; text-align: center;
}

#jumpscare-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1000; flex-direction: column; justify-content: center; align-items: center; }

/**
 * FIVE NIGHTS AT EPSTEIN'S ISLAND
 * Alpha v1.0 - Persistent Tracking & Goon Logic
 */

let power = 100;
let time = 0;
let monitorOpen = false;
let doorClosed = false;
let currentCam = 0;
let hostLocation = 0; 
let gameStarted = false;

const sounds = {
    ambient: document.getElementById('snd-ambient'),
    door: document.getElementById('snd-door'),
    static: document.getElementById('snd-static'),
    scare: document.getElementById('snd-jumpscare'),
    blip: document.getElementById('snd-blip')
};

const camImages = [
    "https://picsum.photos/id/231/1200/800", // HALLWAY
    "https://picsum.photos/id/232/1200/800", // ROOM
    "https://picsum.photos/id/233/1200/800", // CORRIDOR
    "https://picsum.photos/id/234/1200/800"  // END HALLWAY
];

// Press G to Goon
window.addEventListener('keydown', (e) => {
    if (e.key.toLowerCase() === 'g' && gameStarted) {
        power = 0;
        document.getElementById('fail-text').innerText = "YOU GOONED TOO HARD";
        handlePowerOutage();
    }
});

// Start Game
document.addEventListener('click', () => {
    if (!gameStarted) {
        gameStarted = true;
        sounds.ambient.volume = 0.3;
        sounds.ambient.play();
        updateCamView();
    }
}, { once: true });

// Power System
setInterval(() => {
    if (gameStarted && power > 0) {
        let drain = 0.04; 
        if (monitorOpen) drain += 0.15;
        if (doorClosed) drain += 0.45;
        power -= drain;
        document.getElementById('power').innerText = Math.max(0, Math.floor(power));
        if (power <= 0) handlePowerOutage();
    }
}, 1000);

// Enemy Movement (AI)
setInterval(() => {
    if (gameStarted && power > 0) {
        // 40% chance to move every 5 seconds
        if (Math.random() > 0.6) {
            hostLocation++;
            console.log("Enemy Position: " + hostLocation);
            
            // Critical Fix: Update the UI immediately if the monitor is open
            if (monitorOpen) updateCamView();
            
            if (hostLocation > 4) checkAttack();
        }
    }
}, 5000);

// Night Progression (30s per hour)
setInterval(() => {
    if (gameStarted && time < 6) {
        time++;
        document.getElementById('clock').innerText = time;
        if (time === 6) {
            alert("6 AM - YOU SURVIVED");
            location.reload();
        }
    }
}, 30000);

// Game Actions
function toggleMonitor() {
    if (!gameStarted || power <= 0) return;
    monitorOpen = !monitorOpen;
    sounds.blip.play();
    document.getElementById('camera-system').style.display = monitorOpen ? 'block' : 'none';
    
    if (monitorOpen) {
        sounds.static.volume = 0.1;
        sounds.static.play();
        updateCamView();
    } else {
        sounds.static.pause();
    }
}

function toggleDoor() {
    if (!gameStarted || power <= 0) return;
    doorClosed = !doorClosed;
    sounds.door.currentTime = 0;
    sounds.door.play();
    const doorEl = document.getElementById('actual-door');
    if (doorClosed) doorEl.classList.add('closed');
    else doorEl.classList.remove('closed');
    document.getElementById('door-status-light').style.backgroundColor = doorClosed ? 'red' : '#0f0';
}

function toggleLight(on) {
    if (!gameStarted || power <= 0) return;
    document.querySelector('.room-wrapper').style.filter = on ? "brightness(1.8)" : "brightness(1)";
}

function handlePowerOutage() {
    gameStarted = false;
    document.getElementById('camera-system').style.display = 'none';
    document.getElementById('actual-door').classList.remove('closed');
    document.getElementById('office-view').style.filter = "brightness(0.01)";
    setTimeout(triggerJumpscare, 3000);
}

function triggerJumpscare() {
    gameStarted = false;
    sounds.scare.play();
    document.getElementById('jumpscare-screen').style.display = 'flex';
    setTimeout(() => { location.reload(); }, 4000);
}