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>Dimension Shift: Echoes of the Void</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

html, body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #020204;
            font-family: 'Segoe UI', sans-serif;
            color: #fff;
        }

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

#crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
            pointer-events: none;
            box-shadow: 0 0 6px #fff;
            opacity: 0.4;
        }

/* Heads Up Display styling */
        #hud {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(7, 8, 12, 0.9);
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 14px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 100;
            pointer-events: none;
            line-height: 1.6;
            box-shadow: 0 10px 30px rgba(0,0,0,0.7);
        }

.highlight { color: #00f0ff; font-weight: bold; text-shadow: 0 0 8px rgba(0,240,255,0.5); }
        .void-highlight { color: #a020f0; font-weight: bold; text-shadow: 0 0 8px rgba(160,32,240,0.5); }
        .danger-text { color: #ff0055; font-weight: bold; animation: pulse 1s infinite alternate; }

@keyframes pulse {
            0% { opacity: 0.4; } 100% { opacity: 1; }
        }

/* Dimension Shift Screen Flash Overlay */
        #shift-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
            background: #fff;
        }

/* JUMP SCARE FLASH SCREEN 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: #ff0033;
            font-size: 8vw;
            font-weight: 900;
            letter-spacing: 5px;
            text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000;
        }

#jumpscare-overlay span {
            font-size: 2vw;
            color: #666;
            margin-top: 20px;
            text-shadow: none;
            letter-spacing: 1px;
        }

/* Trigger Animation State Hooks via CSS Classes */
        .shifting #shift-overlay { animation: flash-shift 0.4s ease-out forwards; }
        .scared #jumpscare-overlay { animation: flash-scare 2.5s ease-in-out forwards; }
        .scared #gameCanvas { animation: violent-shake 0.8s infinite; }

@keyframes flash-shift {
            0% { opacity: 0.8; background: #00f0ff; }
            50% { opacity: 0.5; background: #a020f0; }
            100% { opacity: 0; }
        }

@keyframes flash-scare {
            0% { opacity: 0; transform: scale(1.2); }
            5% { opacity: 1; transform: scale(1.0); background: #110005; }
            15% { background: #000; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }

@keyframes violent-shake {
            0% { transform: translate(0, 0) scale(1); }
            20% { transform: translate(-40px, 30px) rotate(2deg) scale(1.05); }
            40% { transform: translate(35px, -35px) rotate(-3deg) scale(0.95); }
            60% { transform: translate(-30px, -20px) rotate(3deg) scale(1.03); }
            80% { transform: translate(25px, 40px) rotate(-1deg) scale(0.98); }
            100% { transform: translate(0, 0) rotate(0deg) scale(1); }
        }
    </style>
</head>
<body>

<div id="crosshair"></div>
    <div id="shift-overlay"></div>
    <div id="jumpscare-overlay">THE SPECTER CLAIMS YOU<span>DRAGGED INTO THE ABYSS...</span></div>
    
    <div id="hud">
        <div>DIMENSION: <span id="realm-name" class="highlight">REALITY</span></div>
        <div>STATUS: <span id="stalker-status">ALL CLEAR</span></div>
        <div class="controls-list" style="margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px;">
            • Move: <span class="highlight">W, A, S, D</span> | Look: <span class="highlight">Move Mouse Freely</span><br>
            • <span class="void-highlight">Press [ SPACEBAR ] to Shift Dimensions</span><br>
            • Goal: Reach the escape portal box at the far end of the maze!<br>
            • <span class="danger-text">Warning: Do not stay in the Void too long. They track you.</span>
        </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');

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

const MAP_SIZE = 12;

// REALITY REALM MAP: Traditional maze layout with fixed solid blocks (1)
        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, // The path to the corner is entirely blocked here
            1,1,1,1,1,1,1,1,1,1,1,1
        ];

// THE VOID REALM MAP: The alternative dimension where walls shift locations, opening new pathways but blocking old ones
        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 Portal is accessible only from inside the Void!
            1,1,1,1,1,1,1,1,1,1,1,1
        ];

// Core Character Coordinates
        let playerX = 1.5, playerY = 1.5;
        let playerAngle = 0;
        let fov = Math.PI / 3;
        let moveSpeed = 0.06;
        let rotSpeed = 0.0025;

// Realm Tracking Variables
        let isReality = true; 
        let voidTerrorMeter = 0;

// Stalker Specter AI Entities properties
        let specter = {
            x: 10.5, y: 1.5,      // Spawns deep in the maze top right
            active: false,
            speed: 0.022,         // Constant pursuit velocity
            radius: 0.35          // Direct contact collision width
        };

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;

// Spacebar Dimension Swap Trigger Intercept
            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() {
            // Check if player would materialize directly inside a solid wall structure in the other dimension
            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'>PATHWAY BLOCKED IN PARALLEL STATE</span>";
                return;
            }

isReality = !isReality;
            
            // Visual shift glitch flash trigger
            document.body.classList.add('shifting');
            setTimeout(() => document.body.classList.remove('shifting'), 400);

if (isReality) {
                realmNameText.innerText = "REALITY";
                realmNameText.className = "highlight";
            } else {
                realmNameText.innerText = "THE VOID";
                realmNameText.className = "void-highlight";
            }
        }

// TRIGGER THE HORROR DRAG JUMP SCARE
        function triggerJumpScare() {
            isLockoutActive = true;
            keys.w = keys.a = keys.s = keys.d = false;
            document.exitPointerLock();

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

// Reset player parameters safely back to starting tile after scream sequence
            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;
                
                realmNameText.innerText = "REALITY";
                realmNameText.className = "highlight";
                stalkerStatusText.innerHTML = "ALL CLEAR";
                isLockoutActive = false;
            }, 2500);
        }

// CHRONO FRAME WORK ENGINE PROCESSING LOOP
        function loop() {
            let activeMap = isReality ? MAP_REALITY : MAP_VOID;

if (!isLockoutActive) {
                // 1. Process standard first-person vector navigation calculations
                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; }

// Check wall grid boundary types before applying steps
                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;

// Escape Portal Check (Tile index type 3)
                if (activeMap[Math.floor(playerY) * MAP_SIZE + Math.floor(playerX)] === 3) {
                    isLockoutActive = true;
                    alert("YOU ESCAPED THE ARENA ROOM! MISSION SUCCESS.");
                    location.reload();
                    return;
                }

// 2. PARALLEL THREAT TRACKING MATH
                if (!isReality) {
                    voidTerrorMeter += 1; // Accumulate terror depth counter values
                    
                    if (voidTerrorMeter > 200) { // Specter breaks containment after 3.5 seconds inside void
                        specter.active = true;
                        stalkerStatusText.innerHTML = "<span class='danger-text'>⚠️ SPECTER TRACKING POSITION</span>";
                    }

// Stalker Entity hunts coordinates directly bypassing tile obstructions
                    if (specter.active) {
                        let diffX = playerX - specter.x;
                        let diffY = playerY - specter.y;
                        let dist = Math.hypot(diffX, diffY);

if (dist > 0.1) {
                            specter.x += (diffX / dist) * specter.speed;
                            specter.y += (diffY / dist) * specter.speed;
                        }

// Jumpscare collision condition: Specter touches you
                        if (dist < specter.radius) {
                            triggerJumpScare();
                        }
                    }
                } else {
                    // Gradual recovery decay while hiding inside Reality boundaries
                    if (voidTerrorMeter > 0) voidTerrorMeter -= 0.5;
                    if (voidTerrorMeter <= 200) {
                        specter.active = false;
                        stalkerStatusText.innerHTML = "<span class='highlight'>ALL CLEAR</span>";
                    }
                }
            }

// 3. Render 3D Raycaster projection lines
            ctx.fillStyle = isReality ? '#0a0d14' : '#080312'; // Reality Sky vs Void sky tint
            ctx.fillRect(0, 0, canvas.width, canvas.height / 2);
            ctx.fillStyle = isReality ? '#11151f' : '#030008'; // Reality Stone vs Void dark floor texture
            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(5, 230 - (correctedDistance * 16));

if (objectType === 3) {
                    ctx.fillStyle = `rgb(${colorIntensity}, ${colorIntensity * 0.8}, 0)`; // Golden Goal Gate
                } else {
                    if (isReality) {
                        ctx.fillStyle = `rgb(0, ${colorIntensity * 0.8}, ${colorIntensity})`; // Blue lines for reality
                    } else {
                        ctx.fillStyle = `rgb(${colorIntensity * 0.6}, 0, ${colorIntensity * 0.9})`; // Purple lines for the void
                    }
                }
                ctx.fillRect(i, startY, 1, wallHeight);

// 4. RENDER 3D SPECTER BILLBOARD: Slices the ghost entity column when in field view
                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)) {
                                let spriteStartY = (canvas.height - spriteHeight) / 2;
                                let specterRedShader = Math.max(20, 255 - (correctedSpecterDist * 20));
                                ctx.fillStyle = `rgb(${specterRedShader}, 20, 20)`; // Crimson Wraith stalker silhouette column
                                ctx.fillRect(i, spriteStartY + (spriteHeight * 0.1), 1, spriteHeight * 0.8);
                            }
                        }
                    }
                }
            }

requestAnimationFrame(loop);
        }

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

Preview

Open Advanced Editor Full Screen