Five Nights Game HTML: Office, Cameras, Jumpscare

37 31specmoreland

<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);
}

Five Nights Game HTML: Office, Cameras, Jumpscare

Recommended