HTML CSS

25 ZapTozzzzz

Abrir en el editor Publica tu código

Recomendado

26 January 2026

Código HTML5 para insertar en el juego Escape Road

18 December 2025

Código fuente HTML del juego Divide By 1

22 April 2023

Menú desplegable con CSS

HTML

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

CSS