Dark Corridors (HORROR)

76 Mad_Official

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Dark Corridors</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }
        body {
            background-color: #050505;
            color: #d1d1d1;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }
        #game-container {
            position: relative;
            width: 800px;
            height: 500px;
            border: 2px solid #333;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
            background: #000;
            overflow: hidden;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        #ui-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
            pointer-events: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #dialogue-box {
            font-size: 14px;
            color: #eee;
            text-shadow: 1px 1px 2px #000;
            min-height: 36px;
        }
        #inventory {
            font-size: 12px;
            color: #888;
        }
        #controls-bar {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        button {
            background: #222;
            color: #aaa;
            border: 1px solid #444;
            padding: 5px 10px;
            font-family: inherit;
            font-size: 11px;
            cursor: pointer;
            border-radius: 3px;
        }
        button:hover {
            background: #333;
            color: #fff;
        }
        #jumpscare-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            display: none;
            z-index: 100;
            pointer-events: none;
        }
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 50;
            gap: 20px;
        }
        h1 {
            color: #8b0000;
            letter-spacing: 4px;
            font-size: 32px;
            text-shadow: 0 0 8px rgba(139, 0, 0, 0.6);
        }
        p {
            font-size: 12px;
            color: #777;
            max-width: 400px;
            text-align: center;
            line-height: 1.5;
        }
    </style>
</head>
<body>

<div id="game-container">
    <div id="controls-bar">
        <button id="toggle-audio">Mute Audio</button>
        <button id="toggle-jumpscares">Jumpscares: ON</button>
    </div>

<div id="start-screen">
        <h1>THE DARK CORRIDORS</h1>
        <p>Explore the abandoned facility to find the keycard and escape. Click on objects to inspect or interact with them.</p>
        <button id="start-btn" style="padding: 10px 20px; font-size: 14px; background: #500; color: #fff; border: 1px solid #800;">ENTER THE DARKNESS</button>
    </div>

<div id="ui-overlay">
        <div id="dialogue-box">It's too dark to see clearly...</div>
        <div id="inventory">Inventory: Empty</div>
    </div>
</div>

function initAudio() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
}

function playDrone() {
    if (audioMuted || !audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sawtooth';
    osc.frequency.setValueAtTime(55, audioCtx.currentTime); // Low A
    gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
    
    // Lowpass filter for muffled ambient sound
    const filter = audioCtx.createBiquadFilter();
    filter.type = 'lowpass';
    filter.frequency.setValueAtTime(200, audioCtx.currentTime);

osc.connect(filter);
    filter.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
}

function playScream() {
    if (audioMuted || !audioCtx) return;
    
    // Noise buffer for harsh scream effect
    const bufferSize = audioCtx.sampleRate * 1.5;
    const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
    const data = buffer.getChannelData(0);
    for (let i = 0; i < bufferSize; i++) {
        data[i] = Math.random() * 2 - 1;
    }

const noise = audioCtx.createBufferSource();
    noise.buffer = buffer;

const filter = audioCtx.createBiquadFilter();
    filter.type = 'highpass';
    filter.frequency.setValueAtTime(1000, audioCtx.currentTime);

const gain = audioCtx.createGain();
    gain.gain.setValueAtTime(0.8, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 1.5);

noise.connect(filter);
    filter.connect(gain);
    gain.connect(audioCtx.destination);
    noise.start();
}

function playClickSound() {
    if (audioMuted || !audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(400, audioCtx.currentTime);
    gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
}

// --- Game Logic & Canvas Rendering ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const jsCanvas = document.getElementById('jumpscare-overlay');
const jsCtx = jsCanvas.getContext('2d');

let mouseX = 400;
let mouseY = 250;
let currentRoom = 'entrance';
let inventory = [];
let boxMoved = false;

const dialogueBox = document.getElementById('dialogue-box');
const inventoryBox = document.getElementById('inventory');

// Room definitions
const rooms = {
    entrance: {
        title: "Main Entrance",
        draw: function() {
            // Room background (Dark office space)
            ctx.fillStyle = '#111116';
            ctx.fillRect(0, 0, 800, 500);

// Door to Archives
            ctx.fillStyle = '#222';
            ctx.fillRect(650, 150, 100, 250);
            ctx.fillStyle = '#444';
            ctx.fillRect(660, 160, 80, 230);
            ctx.fillStyle = '#888';
            ctx.fillRect(670, 270, 10, 10); // Knob

// Desk on right
            ctx.fillStyle = '#2d1e18';
            ctx.fillRect(100, 300, 250, 120);
            
            // Drawer
            ctx.strokeStyle = '#1a100c';
            ctx.lineWidth = 2;
            ctx.strokeRect(120, 350, 210, 50);
            ctx.fillStyle = '#aaa';
            ctx.fillRect(215, 370, 20, 10); // Drawer Handle
        },
        click: function(x, y) {
            // Clicked Desk Drawer
            if (x >= 120 && x <= 330 && y >= 350 && y <= 400) {
                playClickSound();
                dialogueBox.innerText = "You search the desk drawer. Just old paperclips and dust.";
            } 
            // Clicked Door
            else if (x >= 650 && x <= 750 && y >= 150 && y <= 400) {
                playClickSound();
                if (inventory.includes('Keycard')) {
                    dialogueBox.innerText = "You swipe the keycard! The lock clicks open. YOU ESCAPED!";
                    triggerWin();
                } else {
                    currentRoom = 'archives';
                    dialogueBox.innerText = "You stepped into the Archive Room.";
                }
            }
        }
    },
    archives: {
        title: "Archive Room",
        draw: function() {
            ctx.fillStyle = '#0c0d12';
            ctx.fillRect(0, 0, 800, 500);

// Back Door
            ctx.fillStyle = '#1b1b1b';
            ctx.fillRect(50, 150, 90, 250);

// Filing cabinet
            ctx.fillStyle = '#3a3d40';
            ctx.fillRect(450, 200, 180, 220);

// Storage box on top of cabinet
            if (!boxMoved) {
                ctx.fillStyle = '#6e533c';
                ctx.fillRect(480, 130, 120, 70);
                ctx.fillStyle = '#4d3928';
                ctx.fillText("STORAGE", 510, 170);
            } else {
                // Moved box
                ctx.fillStyle = '#6e533c';
                ctx.fillRect(650, 330, 120, 70);

// Keycard exposed
                if (!inventory.includes('Keycard')) {
                    ctx.fillStyle = '#00ffff';
                    ctx.fillRect(520, 175, 40, 25);
                    ctx.fillStyle = '#000';
                    ctx.font = '10px Courier New';
                    ctx.fillText("KEY", 528, 192);
                }
            }
        },
        click: function(x, y) {
            // Click Door Back
            if (x >= 50 && x <= 140 && y >= 150 && y <= 400) {
                playClickSound();
                currentRoom = 'entrance';
                dialogueBox.innerText = "Returned to Main Entrance.";
            }
            // Click Storage Box
            else if (!boxMoved && x >= 480 && x <= 600 && y >= 130 && y <= 200) {
                playClickSound();
                boxMoved = true;
                dialogueBox.innerText = "You slid the heavy cardboard box aside. Something shone beneath it!";
            }
            // Click Keycard
            else if (boxMoved && !inventory.includes('Keycard') && x >= 520 && x <= 560 && y >= 175 && y <= 200) {
                playClickSound();
                inventory.push('Keycard');
                inventoryBox.innerText = "Inventory: Keycard";
                dialogueBox.innerText = "You found the Access Keycard!";
                
                // Trigger Jumpscare on pick up if enabled
                if (jumpscaresEnabled) {
                    setTimeout(triggerJumpscare, 400);
                }
            }
        }
    }
};

// Render Lighting / Flashlight effect
function drawTorch() {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-in';
    
    const gradient = ctx.createRadialGradient(mouseX, mouseY, 20, mouseX, mouseY, 180);
    gradient.addColorStop(0, 'rgba(0,0,0,1)');
    gradient.addColorStop(0.8, 'rgba(0,0,0,0.85)');
    gradient.addColorStop(1, 'rgba(0,0,0,0)');

ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 180, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

// Jumpscare Visual Generator
function triggerJumpscare() {
    playScream();
    jsCanvas.style.display = 'block';

let frames = 0;
    const interval = setInterval(() => {
        frames++;
        jsCtx.fillStyle = '#000';
        jsCtx.fillRect(0, 0, 800, 500);

// Flash spooky face
        jsCtx.fillStyle = frames % 2 === 0 ? '#ff0000' : '#ffffff';
        
        // Distorted Eye Sockets
        jsCtx.beginPath();
        jsCtx.arc(300 + (Math.random() * 20 - 10), 200, 60, 0, Math.PI * 2);
        jsCtx.arc(500 + (Math.random() * 20 - 10), 200, 60, 0, Math.PI * 2);
        jsCtx.fill();

// Scream Mouth
        jsCtx.beginPath();
        jsCtx.ellipse(400, 350, 80, 110 + (Math.random() * 20), 0, 0, Math.PI * 2);
        jsCtx.fill();

if (frames > 25) {
            clearInterval(interval);
            jsCanvas.style.display = 'none';
        }
    }, 40);
}

function triggerWin() {
    dialogueBox.innerText = "CONGRATULATIONS! You unlocked the door and escaped!";
}

// Main Render Loop
function render() {
    ctx.clearRect(0, 0, 800, 500);
    rooms[currentRoom].draw();
    drawTorch();
    requestAnimationFrame(render);
}

// Event Listeners
canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;
});

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    rooms[currentRoom].click(x, y);
});

document.getElementById('start-btn').addEventListener('click', () => {
    initAudio();
    playDrone();
    document.getElementById('start-screen').style.display = 'none';
});

document.getElementById('toggle-audio').addEventListener('click', (e) => {
    audioMuted = !audioMuted;
    e.target.innerText = audioMuted ? "Unmute Audio" : "Mute Audio";
});

document.getElementById('toggle-jumpscares').addEventListener('click', (e) => {
    jumpscaresEnabled = !jumpscaresEnabled;
    e.target.innerText = jumpscaresEnabled ? "Jumpscares: ON" : "Jumpscares: OFF";
});

// Start engine
render();
</script>
</body>
</html>

CSS

Dark Corridors (HORROR)

Recommended