Código HTML del juego Five Nights at Diddy's

594 033711

Abrir en el editor Publica tu código

Código HTML del juego Five Nights at Diddy's

Recomendado

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

1 April 2026

GN-Math: Juegos desbloqueados, búsqueda, clasificación y juego.

19 December 2025

Cargador de juegos HTML: New Super Mario Bros.

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 Diddy's</title>
    <style>
        body {
            background-color: #050505;
            color: #ffffff;
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

#game-screen {
            width: 800px;
            height: 500px;
            border: 4px solid #333;
            position: relative;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                        url('https://images.unsplash.com/photo-1514525253361-bee8718a340b?q=80&w=1000&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            box-shadow: 0 0 50px #000 inset;
        }

#static {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://media.giphy.com/media/oEI9uWUicG3Pq/giphy.gif');
            opacity: 0.05;
            pointer-events: none;
        }

#ui-top {
            position: absolute;
            top: 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 30px;
            box-sizing: border-box;
            font-size: 24px;
            text-shadow: 2px 2px #000;
        }

#diddy-shadow {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 400px;
            filter: brightness(0) contrast(1);
            opacity: 0.3;
            transition: opacity 0.5s;
        }

.controls {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
        }

button {
            background: #222;
            color: #0f0;
            border: 2px solid #0f0;
            padding: 10px 20px;
            cursor: pointer;
            font-family: inherit;
            text-transform: uppercase;
        }

button:hover {
            background: #0f0;
            color: #000;
        }

#alert-msg {
            color: #f00;
            font-weight: bold;
            display: none;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div id="game-screen">
        <div id="static"></div>
        
        <div id="ui-top">
            <div>POWER: <span id="power">100</span>%</div>
            <div>12:00 AM</div>
        </div>

<div style="text-align: center; margin-top: 150px;">
            <h1 style="letter-spacing: 10px; color: #600;">OFFICE 01</h1>
            <p id="status">THE PARTY IS JUST BEGINNING...</p>
        </div>

<div id="diddy-shadow">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M40,190 Q50,100 100,100 Q150,100 160,190" />
                <circle fill="currentColor" cx="100" cy="60" r="40" />
            </svg>
        </div>

<div class="controls">
            <button onclick="toggleLight()">TOGGLE LIGHT</button>
            <button onclick="checkCameras()">CHECK CAMERAS</button>
            <div id="alert-msg">DIDDY IS IN THE KITCHEN</div>
        </div>
    </div>

function checkCameras() {
            const alertMsg = document.getElementById('alert-msg');
            alertMsg.style.display = "block";
            setTimeout(() => { alertMsg.style.display = "none"; }, 2000);
            drainPower(2);
        }

function drainPower(amount) {
            power -= amount;
            if (power < 0) power = 0;
            document.getElementById('power').innerText = power;
            if (power === 0) {
                document.body.innerHTML = "<h1 style='color:red; font-size:50px;'>POWER OUTAGE - NO MORE PARTIES</h1>";
            }
        }

// Natural power drain
        setInterval(() => {
            drainPower(1);
        }, 5000);
    </script>
</body>
</html>

CSS