HTML CSS

32 ZapTozzzzz

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

14 June 2023

Carte membres de l'équipe CSS

25 September 2025

Extrait d'animation de chargement CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE VOID - HORROR ENHANCED</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
        html, body { width: 100vw; height: 100vh; overflow: hidden; background-color: #010102; font-family: monospace; color: #666; }
        #gameCanvas { width: 100vw; height: 100vh; display: block; cursor: pointer; }
        #vignette { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.98) 80%); transition: background 0.1s ease; }
        #static-noise { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 45; opacity: 0.05; 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; }
        #hud { position: absolute; top: 20px; left: 20px; background: rgba(3, 3, 4, 0.96); padding: 15px 25px; border-radius: 4px; font-size: 12px; border: 1px solid #1a1a1a; z-index: 100; pointer-events: none; line-height: 1.6; letter-spacing: 1px; }
        .realm-real { color: #556655; font-weight: bold; text-shadow: 0 0 2px rgba(0,255,0,0.2); }
        .realm-void { color: #900; font-weight: bold; text-shadow: 0 0 8px #ff0000; }
        .danger-text { color: #ff0000; font-weight: bold; animation: glitch-text 0.1s infinite; }
        .sanity-container { width: 140px; height: 6px; background: #0a0a0a; border: 1px solid #222; margin-top: 6px; overflow: hidden; }
        #sanity-fill { width: 100%; height: 100%; background: #aa0000; transition: width 0.1s ease; }
        @keyframes glitch-text { 0% { transform: translate(1px, -1px); filter: hue-rotate(90deg); } 100% { transform: translate(-1px, 1px); filter: hue-rotate(0deg); } }
        #shift-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; opacity: 0; }
        #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.4s ease-out forwards; }
        .scared #jumpscare-overlay { animation: flash-scare 2.0s ease-in-out forwards; }
        .scared #gameCanvas { animation: violent-shake 0.05s infinite; }
        @keyframes flash-shift { 0% { opacity: 0.95; background: #080000; filter: invert(1); } 100% { opacity: 0; } }
        @keyframes flash-scare { 0% { opacity: 0; transform: scale(2.0) skewX(20deg); filter: invert(0); } 2% { opacity: 1; transform: scale(1.0) skewX(0deg); filter: invert(1); } 6% { filter: invert(0); } 10% { filter: invert(1); } 15% { opacity: 1; filter: invert(0); background: #050000; } 90% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; } }
        @keyframes violent-shake { 0% { transform: translate(-15px, 15px) scale(1.25); filter: contrast(4) brightness(0.3); } 50% { transform: translate(20px, -20px) scale(1.15); filter: contrast(5) brightness(1.8); } 100% { transform: translate(-10px, 10px) scale(1.25); } }
    </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 #1a1a1a; 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, playerAngle = 0, fov = Math.PI / 3, moveSpeed = 0.045, rotSpeed = 0.0022;
        let isReality = true, voidTerrorMeter = 0, hallucinationTimer = 0, currentHallucinationType = 0;
        let phantomBlinkActive = false, phantomBlinkAngle = 0, screenTearOffset = 0;
        let specter = { x: 10.5, y: 1.5, active: false, baseSpeed: 0.022, speed: 0.022, radius: 0.38 };
        let keys = { w: false, a: false, s: false, d: false }, isLockoutActive = false;
        let audioCtx = null, realAmbientOsc1 = null, realAmbientOsc2 = null, realAmbientGain = null;
        let voidOsc = null, voidGain = null, noiseFilterNode = null, lastBeepTime = 0;
        function initAudioEngine() {
            if (audioCtx) return; audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            realAmbientOsc1 = audioCtx.createOscillator(); realAmbientOsc2 = audioCtx.createOscillator();
            realAmbientGain = audioCtx.createGain(); const realLowpass = audioCtx.createBiquadFilter();
            realAmbientOsc1.type = 'sine'; realAmbientOsc1.frequency.setValueAtTime(43.65, audioCtx.currentTime);
            realAmbientOsc2.type = 'sawtooth'; realAmbientOsc2.frequency.setValueAtTime(44.5, audioCtx.currentTime);
            realLowpass.type = 'lowpass'; realLowpass.frequency.setValueAtTime(65, audioCtx.currentTime);
            const bufferSize = 2 * audioCtx.sampleRate; const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
            const output = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2.0 - 1.0; }
            const whiteNoise = audioCtx.createBufferSource(); whiteNoise.buffer = noiseBuffer; whiteNoise.loop = true;
            noiseFilterNode = audioCtx.createBiquadFilter(); noiseFilterNode.type = 'bandpass';
            noiseFilterNode.frequency.setValueAtTime(110, audioCtx.currentTime); noiseFilterNode.Q.setValueAtTime(3.0, audioCtx.currentTime);
            const noiseGain = audioCtx.createGain(); noiseGain.gain.setValueAtTime(0.015, audioCtx.currentTime);
            whiteNoise.connect(noiseFilterNode); noiseFilterNode.connect(noiseGain); noiseGain.connect(audioCtx.destination); whiteNoise.start();
            realAmbientOsc1.connect(realLowpass); realAmbientOsc2.connect(realLowpass); realLowpass.connect(realAmbientGain);
            realAmbientGain.connect(audioCtx.destination); realAmbientGain.gain.setValueAtTime(0.35, audioCtx.currentTime);
            realAmbientOsc1.start(); realAmbientOsc2.start();
            voidOsc = audioCtx.createOscillator(); voidGain = audioCtx.createGain(); const voidLowpass = audioCtx.createBiquadFilter();
            voidOsc.type = 'square'; voidOsc.frequency.setValueAtTime(32.7, audioCtx.currentTime);
            voidLowpass.type = 'lowpass'; voidLowpass.frequency.setValueAtTime(90, audioCtx.currentTime);
            voidOsc.connect(voidLowpass); voidLowpass.connect(voidGain); voidGain.connect(audioCtx.destination);
            voidGain.gain.setValueAtTime(0, audioCtx.currentTime); voidOsc.start();
        }
        function playInsanityBeep(panicRatio, timestamp) {
            if (!audioCtx || isLockoutActive) return; const gapInterval = 1.15 - (panicRatio * 1.02);
            if (timestamp - lastBeepTime > gapInterval) {
                const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain();
                const pitchValue = 52 + (panicRatio * 260); osc.type = panicRatio > 0.7 ? 'sawtooth' : 'sine';
                osc.frequency.setValueAtTime(pitchValue, audioCtx.currentTime); osc.frequency.linearRampToValueAtTime(pitchValue * 0.6, audioCtx.currentTime + 0.15);
                gain.gain.setValueAtTime(0.12 + (panicRatio * 0.2), audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.16);
                osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + 0.16); lastBeepTime = timestamp;
            }
        }
        function playScaryHallucinationSound(type) {
            if (!audioCtx) return; const now = audioCtx.currentTime;
            if (type === 1) {
                const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(8000, now);
                gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(0.18, now + 0.1); gain.gain.exponentialRampToValueAtTime(0.0001, now + 1.8);
                osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(now + 1.9);
            } else if (type === 2) {
                const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'triangle'; osc.frequency.setValueAtTime(70, now);
                osc.frequency.linearRampToValueAtTime(25, now + 0.8); gain.gain.setValueAtTime(0.4, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.9);
                osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(now + 0.9);
            } else if (type === 3) {
                [0, 0.25].forEach((delay) => {
                    const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(90, now + delay);
                    osc.frequency.exponentialRampToValueAtTime(30, now + delay + 0.08); gain.gain.setValueAtTime(0.25, now + delay);
                    gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.09); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(now + delay); osc.stop(now + delay + 0.09);
                });
            }
        }
        function playMonsterScream() {
            if (!audioCtx) return;
            for (let i = 0; i < 5; i++) {
                const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = i % 2 === 0 ? 'sawtooth' : 'square';
                osc.frequency.setValueAtTime(95 + (i * 85), audioCtx.currentTime); osc.frequency.linearRampToValueAtTime(1500 - (i * 220), audioCtx.currentTime + 1.5);
                gain.gain.setValueAtTime(0.4, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 1.6);
                osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + 1.6);
            }
        }
        canvas.addEventListener('click', () => { if (!isLockoutActive) { canvas.requestPointerLock(); initAudioEngine(); } });
        document.addEventListener('pointerlockchange', () => { if (document.pointerLockElement !== canvas) { keys.w = keys.a = keys.s = keys.d = false; } });
        document.addEventListener('mousemove', (e) => { if (document.pointerLockElement === canvas && !isLockoutActive) playerAngle += e.movementX * rotSpeed; }, false);
        window.addEventListener('keydown', (e) => { if (isLockoutActive) return; let key = e.key.toLowerCase(); if (['w','a','s','d'].includes(key)) keys[key] = true; if (e.key === ' ' || key === 'spacebar') toggleDimensionRealm(); });
        window.addEventListener('keyup', (e) => { let key = e.key.toLowerCase(); if (['w','a','s','d'].includes(key)) 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 BLOCKED</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.05; vignette.style.background = `radial-gradient(circle, transparent 20%, rgba(0,0,0,0.98) 80%)`; if (voidGain) voidGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.3); if (realAmbientGain) realAmbientGain.gain.setTargetAtTime(0.35, audioCtx.currentTime, 0.5); }
            else { realmNameText.innerText = "THE VOID"; realmNameText.className = "realm-void"; if (realAmbientGain) realAmbientGain.gain.setTargetAtTime(0.08, audioCtx.currentTime, 0.5); }
        }
        function triggerJumpScare() {
            isLockoutActive = true; keys.w = keys.a = keys.s = keys.d = false; document.exitPointerLock(); if (voidGain) voidGain.gain.setValueAtTime(0, audioCtx.currentTime); if (realAmbientGain) realAmbientGain.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.05; vignette.style.background = `radial-gradient(circle, transparent 20%, rgba(0,0,0,0.98) 80%)`; realmNameText.innerText = "REALITY"; realmNameText.className = "realm-real"; stalkerStatusText.innerHTML = "MINIMAL"; isLockoutActive = false; if (audioCtx) { realAmbientGain.gain.setValueAtTime(0.35, audioCtx.currentTime); } }, 2000);
        }
        function loop(timestamp) {
            let activeMap = isReality ? MAP_REALITY : MAP_VOID;
            if (audioCtx && noiseFilterNode) { noiseFilterNode.frequency.setValueAtTime(105 + Math.sin(timestamp / 600) * 35, audioCtx.currentTime); }
            if (!isLockoutActive) {
                let cos = Math.cos(playerAngle), sin = Math.sin(playerAngle), nextX = playerX, 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; }
                let normalizedPanic = Math.min(1.0, voidTerrorMeter / 250); sanityFill.style.width = (100 - (normalizedPanic * 100)) + "%";
                hallucinationTimer += Math.random() * (isReality ? 0.3 : 0.8);
                if (hallucinationTimer > 280) {
                    hallucinationTimer = 0; currentHallucinationType = Math.floor(Math.random() * 4) + 1; playScaryHallucinationSound(currentHallucinationType);
                    if (currentHallucinationType === 1) { playerAngle += (Math.random() - 0.5) * 0.18; } else if (currentHallucinationType === 2) { screenTearOffset = Math.floor(Math.random() * 40) + 10; } else if (currentHallucinationType === 4) { phantomBlinkActive = true; phantomBlinkAngle = playerAngle + (Math.random() > 0.5 ? Math.PI/4 : -Math.PI/4); setTimeout(() => { phantomBlinkActive = false; }, 250); }
                }
                if (screenTearOffset > 0) screenTearOffset -= 2;
                if (!isReality) {
                    if (voidTerrorMeter < 250) voidTerrorMeter += 0.45; if (voidGain) voidGain.gain.setTargetAtTime(0.5, audioCtx.currentTime, 0.4);
                    if (voidTerrorMeter > 80) { specter.active = true; stalkerStatusText.innerHTML = "<span class='danger-text'>CRITICAL DISTURBANCE</span>"; }
                    if (specter.active) {
                        let diffX = playerX - specter.x, diffY = playerY - specter.y, dist = Math.hypot(diffX, diffY); specter.speed = specter.baseSpeed + (1.0 / (dist + 0.8)) * 0.025; specter.x += (diffX / dist) * specter.speed; specter.y += (diffY / dist) * specter.speed;
                        let threatFactor = Math.max(0, 1.0 - (dist * 0.14)); staticNoise.style.opacity = 0.05 + (threatFactor * 0.8); let vigTighten = Math.max(8, 28 - (threatFactor * 22)); vignette.style.background = `radial-gradient(circle, transparent ${vigTighten}%, rgba(0,0,0,0.99) 78%)`;
                        normalizedPanic = Math.max(normalizedPanic, threatFactor); if (dist < 2.5 && Math.random() > 0.75) { playerAngle += (Math.random() - 0.5) * 0.07; } if (dist < specter.radius) triggerJumpScare();
                    } else { let dynamicVig = Math.max(15, 28 - (normalizedPanic * 12)); vignette.style.background = `radial-gradient(circle, transparent ${dynamicVig}%, rgba(0,0,0,0.98) 82%)`; staticNoise.style.opacity = 0.05 + (normalizedPanic * 0.3); }
                    playInsanityBeep(normalizedPanic, timestamp / 1000);
                } else {
                    if (voidTerrorMeter > 0) voidTerrorMeter -= 0.8; if (voidTerrorMeter <= 80) { specter.active = false; stalkerStatusText.innerHTML = "MINIMAL"; }
                    staticNoise.style.opacity = 0.05 + (normalizedPanic * 0.15); let baseVig = Math.max(18, 28 - (normalizedPanic * 10)); vignette.style.background = `radial-gradient(circle, transparent ${baseVig}%, rgba(0,0,0,0.98) 82%)`; if (voidTerrorMeter > 0) { playInsanityBeep(normalizedPanic, timestamp / 1000); }
                }
            }
            ctx.fillStyle = isReality ? '#0d0d12' : '#020204'; ctx.fillRect(0, 0, canvas.width, canvas.height / 2);
            ctx.fillStyle = isReality ? '#08080b' : '#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, cosRay = Math.cos(rayAngle), sinRay = Math.sin(rayAngle), distance = 0, hitWall = false, objectType = 0;
                while (!hitWall && distance < 16) { distance += 0.04; let checkX = Math.floor(playerX + cosRay * distance), 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), wallHeight = Math.min(canvas.height, (canvas.height / correctedDistance)), startY = (canvas.height - wallHeight) / 2, colorIntensity = Math.max(0, 140 - (correctedDistance * 13)), wallSliceX = ((playerX + cosRay * distance) + (playerY + sinRay * distance) * 4) % 1.0, textureNoise = (Math.sin(wallSliceX * 40) > 0.7) ? 0.75 : 1.0;
                if (((i + Math.floor(startY)) % 45) < 3) textureNoise *= 0.6; let r = 0, g = 0, b = 0;
                if (objectType === 3) { r = colorIntensity; g = colorIntensity * 0.6; b = 0; } else { if (isReality) { r = colorIntensity * 0.75 * textureNoise; g = colorIntensity * 0.8 * textureNoise; b = colorIntensity * 0.85 * textureNoise; } else { r = colorIntensity * 1.1 * textureNoise; g = colorIntensity * 0.1 * textureNoise; b = colorIntensity * 0.05 * textureNoise; } }
                let finalRenderY = startY; if (screenTearOffset > 0 && i > canvas.width / 3 && i < (canvas.width / 3 * 2)) { finalRenderY += Math.sin(i) * screenTearOffset * 0.2; }
                ctx.fillStyle = `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`; ctx.fillRect(i, finalRenderY, 1, wallHeight);
                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), correctedSpecterDist = specterDist * Math.cos(specterAngle); if (correctedSpecterDist < correctedDistance && correctedSpecterDist > 0.1) { let spriteScreenX = (0.5 + specterAngle / fov) * canvas.width, spriteHeight = Math.min(canvas.height, canvas.height / correctedSpecterDist); if (Math.abs(i - spriteScreenX) < (spriteHeight / 3.8)) { let spriteStartY = (canvas.height - spriteHeight) / 2, dynamicTear = (Math.random() - 0.5) * (spriteHeight * 0.25) * (1.5 / correctedSpecterDist), finalStartY = spriteStartY + dynamicTear, staticFlckr = Math.floor(Math.random() * 35); ctx.fillStyle = `rgb(${staticFlckr}, 0, 0)`; ctx.fillRect(i, finalStartY - (spriteHeight * 0.15), 1, spriteHeight * 1.35); } } }
                }
                if (phantomBlinkActive) { let blinkDiff = phantomBlinkAngle - rayAngle; if (Math.abs(blinkDiff) < 0.04) { let hHeight = canvas.height * 0.6; ctx.fillStyle = `rgba(160, 0, 0, ${Math.random() * 0.4})`; ctx.fillRect(i, (canvas.height - hHeight)/2, 1, hHeight); } }
            }
            requestAnimationFrame(loop);
        }
        requestAnimationFrame(loop);
    </script>
</body>
</html>

CSS