Webleb - UI Elements

HTML CSS JS

<!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; }

@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); }
            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">H O L D E R<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: 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');

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

const MAP_SIZE = 12;

// REALITY MAP: Cold, decaying gray structural concrete blocks
        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
        ];

// VOID MAP: Corrupted rust layout grids
        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, // 3 = Golden Escape Pillar
            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;

// UNRELENTING STALKER VALUES
        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;

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

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() {
            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%)`;
            } else {
                realmNameText.innerText = "THE VOID";
                realmNameText.className = "realm-void";
            }
        }

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

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() {
            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;
                }

if (!isReality) {
                    voidTerrorMeter += 1;
                    
                    if (voidTerrorMeter > 100) { // Awakens rapidly inside the void (approx 2 seconds)
                        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);

// Enraged Chase Mechanic: Moves faster the closer it gets
                        specter.speed = specter.baseSpeed + (1.2 / (dist + 1.0)) * 0.02;

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

// Visual Panic Scales: Tunnel vision closes in, static amplifies
                        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%)`;

// Side-tearing camera glitches when monster stalks very close
                        if (dist < 2.0 && Math.random() > 0.8) {
                            playerAngle += (Math.random() - 0.5) * 0.05;
                        }

if (dist < specter.radius) triggerJumpScare();
                    }
                } else {
                    if (voidTerrorMeter > 0) voidTerrorMeter -= 1.2;
                    if (voidTerrorMeter <= 100) {
                        specter.active = false;
                        stalkerStatusText.innerHTML = "MINIMAL";
                        staticNoise.style.opacity = 0;
                    }
                }
            }

// Render Engine Execution
            // Ceiling and Floor Fills (Ashen grays vs complete pitch void shadow black)
            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;
                
                // Dim down light values strictly based on distance matrix (Deep industrial fog)
                let colorIntensity = Math.max(2, 160 - (correctedDistance * 14));

if (objectType === 3) {
                    // Golden Gate Pillar is a dirty dim amber brass frame
                    ctx.fillStyle = `rgb(${colorIntensity}, ${colorIntensity * 0.65}, 0)`; 
                } else {
                    if (isReality) {
                        ctx.fillStyle = `rgb(${colorIntensity}, ${colorIntensity}, ${colorIntensity * 1.1})`; // Concrete Slate Gray
                    } else {
                        ctx.fillStyle = `rgb(${colorIntensity * 0.9}, ${colorIntensity * 0.15}, 0)`; // Corrupted Industrial Rust Red
                    }
                }
                ctx.fillRect(i, startY, 1, wallHeight);

// 4. THE HOLDER ENTITY: Towering shifting column of raw black static noise
                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);

// The entity column width expands as it steps closer
                            if (Math.abs(i - spriteScreenX) < (spriteHeight / 4.0)) {
                                let spriteStartY = (canvas.height - spriteHeight) / 2;
                                
                                // Extreme desynchronization vibration algorithm
                                let dynamicTear = (Math.random() - 0.5) * (spriteHeight * 0.15) * (2.0 / correctedSpecterDist);
                                let finalStartY = spriteStartY + dynamicTear;

// The silhouette scales its shading down to absolute featureless pitch black
                                let staticFlckr = Math.floor(Math.random() * 25);
                                ctx.fillStyle = `rgb(${staticFlckr}, ${staticFlckr * 0.1}, ${staticFlckr * 0.1})`; 
                                
                                ctx.fillRect(i, finalStartY - (spriteHeight * 0.1), 1, spriteHeight * 1.2);
                            }
                        }
                    }
                }
            }

requestAnimationFrame(loop);
        }

loop();
    </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen