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

81 033711

Abrir en el editor Video Publica tu código

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

Recomendado

10 December 2025

Juego de niveles cuadrados: HTML, CSS, JavaScript

11 September 2025

Juego Brick Breaker HTML Canvas JavaScript

1 March 2023

Iconos sociales con CSS/HTML

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>

Recomendado

Juego de niveles cuadrados: HTML, CSS, JavaScript

Juego Brick Breaker HTML Canvas JavaScript

Iconos sociales con CSS/HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS