Code du jeu HTML Five Nights at Diddy's

83 033711

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

16 January 2026

Intégration de jeu Flash avec Ruffle Player

17 December 2025

Barre de navigation inférieure avec icônes et CSS Tailwind

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

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>

Recommandé

Intégration de jeu Flash avec Ruffle Player

Barre de navigation inférieure avec icônes et CSS Tailwind

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS