Code du jeu HTML Five Nights at Diddy's

593 033711

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 November 2025

Effet de survol du bouton en verre liquide CSS

19 January 2026

Subway Surfers Barcelone : Chargeur de jeu WebGL

22 January 2026

Modèle HTML pour compagnies aériennes : Tailwind, défilement fluide, icônes

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