The Void- Locked Down Engine

23 ZapTozzzzz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE VOID - LCKD DOWN ENGINE</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

html, body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #020203;
            font-family: monospace;
            color: #777;
        }

#gameCanvas {
            width: 100vw;
            height: 100vh;
            display: block;
            cursor: pointer;
        }

/* Suffocating Vignette that tightens as panic increases */
        #vignette {
            position: absolute;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 40;
            background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.95) 85%);
            transition: background 0.2s ease;
        }

/* Corrupted TV Static Noise overlay */
        #static-noise {
            position: absolute;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 45;
            opacity: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            mix-blend-mode: overlay;
        }

/* Bare Minimum HUD */
        #hud {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(5, 5, 5, 0.95);
            padding: 15px 25px;
            border-radius: 4px;
            font-size: 12px;
            border: 1px solid #222;
            z-index: 100;
            pointer-events: none;
            line-height: 1.6;
            letter-spacing: 1px;
        }

.realm-real { color: #666; font-weight: bold; }
        .realm-void { color: #800; font-weight: bold; text-shadow: 0 0 5px #ff0000; }
        .danger-text { color: #ff0000; font-weight: bold; animation: glitch-text 0.1s infinite; }

.sanity-container {
            width: 140px;
            height: 6px;
            background: #111;
            border: 1px solid #333;
            margin-top: 6px;
            overflow: hidden;
        }
        #sanity-fill {
            width: 100%;
            height: 100%;
            background: #800;
            transition: width 0.1s ease;
        }

@keyframes glitch-text {
            0% { transform: translate(1px, 0); } 100% { transform: translate(-1px, 0); }
        }

#shift-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
        }

/* THE JUMP SCARE CONTAINER OVERLAY */
        #jumpscare-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 60;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #000;
            opacity: 0;
            color: #ff0000;
            font-size: 9vw;
            font-weight: 900;
            letter-spacing: 20px;
            text-align: center;
        }

#jumpscare-overlay span {
            font-size: 1.5vw;
            color: #222;
            margin-top: 30px;
            letter-spacing: 4px;
        }

.shifting #shift-overlay { animation: flash-shift 0.3s ease-out forwards; }
        .scared #jumpscare-overlay { animation: flash-scare 2.0s ease-in-out forwards; }
        .scared #gameCanvas { animation: violent-shake 0.1s infinite; }

@keyframes flash-shift {
            0% { opacity: 0.9; background: #222; }
            100% { opacity: 0; }
        }

@keyframes flash-scare {
            0% { opacity: 0; transform: scale(1.5) skewX(10deg); filter: invert(0); }
            5% { opacity: 1; transform: scale(1.0) skewX(0deg); filter: invert(1); filter: red; }
            10% { filter: invert(0); }
            15% { filter: invert(1); }
            20% { opacity: 1; filter: invert(0); background: #000; }
            90% { opacity: 1; }
            100% { opacity: 0; }
        }

@keyframes violent-shake {
            0% { transform: translate(-20px, 30px) scale(1.2); filter: contrast(3) brightness(0.5); }
            50% { transform: translate(30px, -20px) scale(1.1); filter: contrast(4) brightness(1.5); }
            100% { transform: translate(-20px, 30px) scale(1.2); }
        }
    </style>
</head>
<body>

<div id="vignette"></div>
    <div id="static-noise"></div>
    <div id="shift-overlay"></div>
    <div id="jumpscare-overlay">C O N S U M E D<span>R E T U R N   T O   D A R K N E S S</span></div>
    
    <div id="hud">
        <div>REALM // <span id="realm-name" class="realm-real">REALITY</span></div>
        <div>THREAT // <span id="stalker-status">MINIMAL</span></div>
        <div style="margin-top: 4px;">SANITY MATRIX:</div>
        <div class="sanity-container">
            <div id="sanity-fill"></div>
        </div>
        <div style="margin-top: 10px; border-top: 1px solid #222; padding-top: 6px; color: #444; font-size: 10px;">
            • MOVE: W, A, S, D // LOOK: MOUSE<br>
            • SPACEBAR: SHIFT BOUNDARY MATRIX<br>
            • LOCATE THE ESCAPE PORTAL PILLAR
        </div>
    </div>

<canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const realmNameText = document.getElementById('realm-name');
        const stalkerStatusText = document.getElementById('stalker-status');
        const staticNoise = document.getElementById('static-noise');
        const vignette = document.getElementById('vignette');
        const sanityFill = document.getElementById('sanity-fill');

function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

const MAP_SIZE = 12;

const MAP_REALITY = [
            1,1,1,1,1,1,1,1,1,1,1,1,
            1,0,1,0,0,0,0,0,0,0,0,1,
            1,0,1,1,1,1,0,1,1,1,1,1,
            1,0,0,0,0,1,0,1,0,0,0,1,
            1,1,1,1,0,1,0,1,0,1,1,1,
            1,0,0,1,0,1,0,0,0,1,0,1,
            1,0,0,1,0,1,1,1,1,1,0,1,
            1,0,1,1,0,0,0,0,0,0,0,1,
            1,0,1,0,0,1,1,1,1,1,0,1,
            1,0,1,1,1,1,0,0,0,1,0,1,
            1,0,0,0,0,0,0,1,0,1,0,1,
            1,1,1,1,1,1,1,1,1,1,1,1
        ];

const MAP_VOID = [
            1,1,1,1,1,1,1,1,1,1,1,1,
            1,0,0,0,0,0,0,0,0,0,0,1,
            1,0,1,1,1,1,0,1,1,1,1,1,
            1,0,1,0,0,0,0,0,0,1,0,1,
            1,0,1,0,1,1,1,1,0,1,0,1,
            1,0,0,0,1,0,0,1,0,0,0,1,
            1,1,1,0,1,0,0,1,1,1,0,1,
            1,0,0,0,1,0,0,0,0,1,0,1,
            1,0,1,1,1,1,1,1,0,1,0,1,
            1,0,1,0,0,0,0,1,0,0,0,1,
            1,0,0,0,0,0,0,1,0,0,3,1, 
            1,1,1,1,1,1,1,1,1,1,1,1
        ];

let playerX = 1.5, playerY = 1.5;
        let playerAngle = 0;
        let fov = Math.PI / 3;
        let moveSpeed = 0.05;
        let rotSpeed = 0.0025;

let isReality = true; 
        let voidTerrorMeter = 0; // Maxes at 250 (100 inside void config triggers monster activity)

let specter = {
            x: 10.5, y: 1.5,      
            active: false,
            baseSpeed: 0.02,
            speed: 0.02,         
            radius: 0.4          
        };

let keys = { w: false, a: false, s: false, d: false };
        let isLockoutActive = false;

// --- WEB AUDIO ENGINE FRAMEWORK ---
        let audioCtx = null;
        let voidOsc = null;
        let voidGain = null;
        let lastBeepTime = 0;

function initAudioEngine() {
            if (audioCtx) return;
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Continuous low-end brown drone configuration
            voidOsc = audioCtx.createOscillator();
            voidGain = audioCtx.createGain();
            const lowpassFilter = audioCtx.createBiquadFilter();

voidOsc.type = 'sawtooth';
            voidOsc.frequency.setValueAtTime(36.7, audioCtx.currentTime); // D1 deep resonant drone
            
            lowpassFilter.type = 'lowpass';
            lowpassFilter.frequency.setValueAtTime(85, audioCtx.currentTime); // Smothered fog filter

voidOsc.connect(lowpassFilter);
            lowpassFilter.connect(voidGain);
            voidGain.connect(audioCtx.destination);

voidGain.gain.setValueAtTime(0, audioCtx.currentTime); // Silent inside safety zone
            voidOsc.start();
        }

function playInsanityBeep(panicRatio, timestamp) {
            if (!audioCtx || isLockoutActive) return;

// Panic scales the interval gap down (Ranges from 1.25 seconds to a fast 0.16 seconds)
            const gapInterval = 1.25 - (panicRatio * 1.09);
            
            if (timestamp - lastBeepTime > gapInterval) {
                const osc = audioCtx.createOscillator();
                const gain = audioCtx.createGain();
                
                // Panic shifts tone from deep heartbeat to an alert whistle
                const pitchValue = 60 + (panicRatio * 240);
                osc.type = panicRatio > 0.65 ? 'triangle' : 'sine';
                osc.frequency.setValueAtTime(pitchValue, audioCtx.currentTime);
                osc.frequency.linearRampToValueAtTime(pitchValue * 0.7, audioCtx.currentTime + 0.12);

gain.gain.setValueAtTime(0.08 + (panicRatio * 0.15), audioCtx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.14);

osc.connect(gain);
                gain.connect(audioCtx.destination);

osc.start();
                osc.stop(audioCtx.currentTime + 0.14);
                lastBeepTime = timestamp;
            }
        }

function playMonsterScream() {
            if (!audioCtx) return;

// Generate multi-tiered additive clipping digital frequencies
            for (let i = 0; i < 4; i++) {
                const osc = audioCtx.createOscillator();
                const gain = audioCtx.createGain();
                
                osc.type = i % 2 === 0 ? 'sawtooth' : 'square';
                osc.frequency.setValueAtTime(120 + (i * 70), audioCtx.currentTime);
                osc.frequency.linearRampToValueAtTime(1300 - (i * 180), audioCtx.currentTime + 1.4);

gain.gain.setValueAtTime(0.35, audioCtx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 1.5);

osc.connect(gain);
                gain.connect(audioCtx.destination);

osc.start();
                osc.stop(audioCtx.currentTime + 1.5);
            }
        }

canvas.addEventListener('click', () => {
            if (!isLockoutActive) {
                canvas.requestPointerLock();
                initAudioEngine();
            }
        });

document.addEventListener('pointerlockchange', () => {
            if (document.pointerLockElement !== canvas) {
                keys.w = keys.a = keys.s = keys.d = false;
            }
        });

function updateLookDirection(e) {
            if (document.pointerLockElement !== canvas || isLockoutActive) return;
            playerAngle += e.movementX * rotSpeed;
        }
        document.addEventListener('mousemove', updateLookDirection, false);

window.addEventListener('keydown', (e) => {
            if (isLockoutActive) return;
            let key = e.key.toLowerCase();
            if (key === 'w' || key === 'a' || key === 's' || key === 'd') keys[key] = true;

if (e.key === ' ' || key === 'spacebar') {
                toggleDimensionRealm();
            }
        });

window.addEventListener('keyup', (e) => {
            let key = e.key.toLowerCase();
            if (key === 'w' || key === 'a' || key === 's' || key === 'd') keys[key] = false;
        });

function toggleDimensionRealm() {
            if (!audioCtx) initAudioEngine();
            let currentGridPos = Math.floor(playerY) * MAP_SIZE + Math.floor(playerX);
            let targetMap = isReality ? MAP_VOID : MAP_REALITY;

if (targetMap[currentGridPos] === 1) {
                stalkerStatusText.innerHTML = "<span class='danger-text'>PATH DISRUPTED</span>";
                return;
            }

isReality = !isReality;
            document.body.classList.add('shifting');
            setTimeout(() => document.body.classList.remove('shifting'), 300);

if (isReality) {
                realmNameText.innerText = "REALITY";
                realmNameText.className = "realm-real";
                staticNoise.style.opacity = 0;
                vignette.style.background = `radial-gradient(circle, transparent 30%, rgba(0,0,0,0.95) 85%)`;
                if (voidGain) voidGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.4);
            } else {
                realmNameText.innerText = "THE VOID";
                realmNameText.className = "realm-void";
            }
        }

function triggerJumpScare() {
            isLockoutActive = true;
            keys.w = keys.a = keys.s = keys.d = false;
            document.exitPointerLock();

if (voidGain) voidGain.gain.setValueAtTime(0, audioCtx.currentTime);
            playMonsterScream();

document.body.classList.add('scared');

setTimeout(() => {
                document.body.classList.remove('scared');
                playerX = 1.5; playerY = 1.5; playerAngle = 0;
                isReality = true; voidTerrorMeter = 0;
                specter.active = false; specter.x = 10.5; specter.y = 1.5;
                staticNoise.style.opacity = 0;
                vignette.style.background = `radial-gradient(circle, transparent 30%, rgba(0,0,0,0.95) 85%)`;
                
                realmNameText.innerText = "REALITY";
                realmNameText.className = "realm-real";
                stalkerStatusText.innerHTML = "MINIMAL";
                isLockoutActive = false;
            }, 2000);
        }
        function loop(timestamp) {
            let activeMap = isReality ? MAP_REALITY : MAP_VOID;

if (!isLockoutActive) {
                let cos = Math.cos(playerAngle);
                let sin = Math.sin(playerAngle);
                let nextX = playerX; let nextY = playerY;

if (keys.w) { nextX += cos * moveSpeed; nextY += sin * moveSpeed; }
                if (keys.s) { nextX -= cos * moveSpeed; nextY -= sin * moveSpeed; }
                if (keys.a) { nextX += sin * moveSpeed; nextY -= cos * moveSpeed; }
                if (keys.d) { nextX -= sin * moveSpeed; nextY += cos * moveSpeed; }

if (activeMap[Math.floor(playerY) * MAP_SIZE + Math.floor(nextX)] !== 1) playerX = nextX;
                if (activeMap[Math.floor(nextY) * MAP_SIZE + Math.floor(playerX)] !== 1) playerY = nextY;

if (activeMap[Math.floor(playerY) * MAP_SIZE + Math.floor(playerX)] === 3) {
                    isLockoutActive = true;
                    alert("ESCAPE SUCCESSFUL.");
                    location.reload();
                    return;
                }

// Balance tracking calculations
                let normalizedPanic = Math.min(1.0, voidTerrorMeter / 250);
                sanityFill.style.width = (100 - (normalizedPanic * 100)) + "%";

if (!isReality) {
                    if (voidTerrorMeter < 250) voidTerrorMeter += 0.5;
                    
                    if (voidGain) voidGain.gain.setTargetAtTime(0.4, audioCtx.currentTime, 0.5);

if (voidTerrorMeter > 100) { 
                        specter.active = true;
                        stalkerStatusText.innerHTML = "<span class='danger-text'>CRITICAL DISTURBANCE</span>";
                    }

if (specter.active) {
                        let diffX = playerX - specter.x;
                        let diffY = playerY - specter.y;
                        let dist = Math.hypot(diffX, diffY);

specter.speed = specter.baseSpeed + (1.2 / (dist + 1.0)) * 0.02;

specter.x += (diffX / dist) * specter.speed;
                        specter.y += (diffY / dist) * specter.speed;

let threatFactor = Math.max(0, 1.0 - (dist * 0.15));
                        staticNoise.style.opacity = threatFactor * 0.8;
                        
                        let vigTighten = Math.max(10, 35 - (threatFactor * 25));
                        vignette.style.background = `radial-gradient(circle, transparent ${vigTighten}%, rgba(0,0,0,0.98) 75%)`;

normalizedPanic = Math.max(normalizedPanic, threatFactor);

if (dist < 2.0 && Math.random() > 0.8) {
                            playerAngle += (Math.random() - 0.5) * 0.05;
                        }

if (dist < specter.radius) triggerJumpScare();
                    } else {
                        let dynamicVig = Math.max(20, 35 - (normalizedPanic * 10));
                        vignette.style.background = `radial-gradient(circle, transparent ${dynamicVig}%, rgba(0,0,0,0.95) 85%)`;
                        staticNoise.style.opacity = normalizedPanic * 0.25;
                    }

playInsanityBeep(normalizedPanic, timestamp / 1000);

} else {
                    if (voidTerrorMeter > 0) voidTerrorMeter -= 1.5;
                    if (voidTerrorMeter <= 100) {
                        specter.active = false;
                        stalkerStatusText.innerHTML = "MINIMAL";
                        staticNoise.style.opacity = 0;
                    }
                    if (voidTerrorMeter > 0) {
                        playInsanityBeep(normalizedPanic, timestamp / 1000);
                    }
                }
            }

// Render Engine Execution
            ctx.fillStyle = isReality ? '#1c1c24' : '#030305';
            ctx.fillRect(0, 0, canvas.width, canvas.height / 2);
            ctx.fillStyle = isReality ? '#121217' : '#000000';
            ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);

const NUM_RAYS = canvas.width;
            for (let i = 0; i < NUM_RAYS; i++) {
                let rayAngle = (playerAngle - fov / 2) + (i / NUM_RAYS) * fov;
                let cosRay = Math.cos(rayAngle); let sinRay = Math.sin(rayAngle);
                let distance = 0; let hitWall = false; let objectType = 0;

while (!hitWall && distance < 16) {
                    distance += 0.05;
                    let checkX = Math.floor(playerX + cosRay * distance);
                    let checkY = Math.floor(playerY + sinRay * distance);

if (checkX < 0 || checkX >= MAP_SIZE || checkY < 0 || checkY >= MAP_SIZE) {
                        hitWall = true; distance = 16;
                    } else {
                        let tile = activeMap[checkY * MAP_SIZE + checkX];
                        if (tile === 1 || tile === 3) { hitWall = true; objectType = tile; }
                    }
                }

let correctedDistance = distance * Math.cos(rayAngle - playerAngle);
                let wallHeight = Math.min(canvas.height, (canvas.height / correctedDistance));
                let startY = (canvas.height - wallHeight) / 2;
                
                let colorIntensity = Math.max(2, 160 - (correctedDistance * 14));

if (objectType === 3) {
                    ctx.fillStyle = `rgb(${colorIntensity}, ${colorIntensity * 0.65}, 0)`;
                } else {
                    if (isReality) {
                        ctx.fillStyle = `rgb(${colorIntensity}, ${colorIntensity}, ${colorIntensity * 1.1})`; 
                    } else {
                        ctx.fillStyle = `rgb(${colorIntensity * 0.9}, ${colorIntensity * 0.15}, 0)`; 
                    }
                }
                ctx.fillRect(i, startY, 1, wallHeight);

// 4. THE HOLDER ENTITY COLUMN GENERATOR
                if (specter.active && !isReality) {
                    let specterAngle = Math.atan2(specter.y - playerY, specter.x - playerX) - playerAngle;
                    while (specterAngle < -Math.PI) specterAngle += 2 * Math.PI;
                    while (specterAngle > Math.PI) specterAngle -= 2 * Math.PI;

if (Math.abs(specterAngle) < fov) {
                        let specterDist = Math.hypot(specter.x - playerX, specter.y - playerY);
                        let correctedSpecterDist = specterDist * Math.cos(specterAngle);

if (correctedSpecterDist < correctedDistance && correctedSpecterDist > 0.1) {
                            let spriteScreenX = (0.5 + specterAngle / fov) * canvas.width;
                            let spriteHeight = Math.min(canvas.height, canvas.height / correctedSpecterDist);

if (Math.abs(i - spriteScreenX) < (spriteHeight / 4.0)) {
                                let spriteStartY = (canvas.height - spriteHeight) / 2;
                                let dynamicTear = (Math.random() - 0.5) * (spriteHeight * 0.15) * (2.0 / correctedSpecterDist);
                                let finalStartY = spriteStartY + dynamicTear;

requestAnimationFrame(loop);
        }

// Run engine deployment loop
        requestAnimationFrame(loop);
    </script>
</body>
</html>

CSS

The Void- Locked Down Engine

Recommended