sem-titulo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fábrica Abandonada</title>

<style>
    body {
        margin: 0;
        background: #080808;
        color: white;
        font-family: Arial, sans-serif;
        text-align: center;
    }

    #game {
        max-width: 700px;
        margin: auto;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
    }

    h1 {
        color: #ff3333;
        text-shadow: 0 0 15px red;
    }

    #room {
        height: 330px;
        border: 3px solid #555;
        background:
            radial-gradient(circle at 50% 40%, #333, #050505 70%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0;
        font-size: 80px;
        position: relative;
        overflow: hidden;
    }

    #monster {
        display: none;
        position: absolute;
        font-size: 120px;
        animation: aparecer .3s;
    }

    @keyframes aparecer {
        from { transform: scale(0); }
        to { transform: scale(1); }
    }

    button {
        padding: 15px 20px;
        margin: 6px;
        border: none;
        border-radius: 8px;
        background: #333;
        color: white;
        font-size: 16px;
        cursor: pointer;
    }

    button:hover {
        background: #666;
    }

    #message {
        min-height: 50px;
        font-size: 18px;
    }

    #inventory {
        color: #ffd700;
    }
</style>
</head>

<body>

<div id="game">

<h1>🏭 FÁBRICA ABANDONADA</h1>

<p>Você entrou na antiga fábrica de brinquedos...</p>

<div id="room">
    🚪
    <div id="monster">👹</div>
</div>

<p id="message">
    A porta atrás de você acabou de fechar...
</p>

<p>
    Inventário:
    <span id="inventory">Nada</span>
</p>

<button onclick="explorar()">🔎 Explorar</button>
<button onclick="pegarChave()">🔑 Procurar chave</button>
<button onclick="abrirPorta()">🚪 Abrir porta</button>

</div>

<script>

let chave = false;
let finalizado = false;

function mensagem(texto) {
    document.getElementById("message").innerText = texto;
}

function explorar() {

    if (finalizado) return;

    let eventos = [
        "Você encontra caixas espalhadas pelo chão.",
        "Um brinquedo caiu sozinho da prateleira...",
        "Você ouve passos no corredor.",
        "As luzes começam a piscar.",
        "Há marcas estranhas perto da porta."
    ];

    let evento = eventos[Math.floor(Math.random() * eventos.length)];

    mensagem(evento);

    // Chance de aparecer o monstro
    if (Math.random() < 0.25) {
        mostrarMonstro();
    }
}

function pegarChave() {

    if (finalizado) return;

    if (!chave) {
        chave = true;
        document.getElementById("inventory").innerText = "🔑 Chave";
        mensagem("Você encontrou uma chave enferrujada!");
    } else {
        mensagem("Você já pegou a chave.");
    }
}

function abrirPorta() {

    if (finalizado) return;

    if (chave) {

        finalizado = true;

        document.getElementById("room").innerHTML = "🚪✨";

        mensagem(
            "A porta abriu! Você conseguiu escapar da fábrica! 🎉"
        );

    } else {
        mensagem(
            "A porta está trancada. Você precisa encontrar uma chave."
        );
    }
}

function mostrarMonstro() {

    let monster = document.getElementById("monster");

    monster.style.display = "block";

    mensagem(
        "😱 VOCÊ VIU ALGUMA COISA NO ESCURO! CORRA!"
    );

    setTimeout(() => {
        monster.style.display = "none";
    }, 1500);
}

</script>

</body>
</html>