Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobreviviente 3D - Con Video Ads</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; user-select: none; }
        
        /* HUD */
        #hud { position: absolute; top: 20px; left: 20px; font-size: 24px; color: #2ecc71; text-shadow: 2px 2px 0 #000; pointer-events: none; display: none; z-index: 5;}
        #crosshair { width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 5;}
        .dot { width: 4px; height: 4px; background: #ff0000; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        
        /* Menús */
        #menu-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(20,20,20,0.9) 0%, rgba(0,0,0,1) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; z-index: 10; }
        h1 { font-size: 60px; color: #fff; margin-bottom: 5px; letter-spacing: 5px; text-shadow: 0 0 20px rgba(255,0,0,0.5); }
        h2 { color: #e74c3c; font-size: 18px; margin-bottom: 30px; letter-spacing: 2px; }
        
        .btn { background: #e74c3c; border: none; color: #fff; padding: 15px 40px; font-size: 18px; font-family: inherit; margin: 8px; cursor: pointer; transition: 0.2s; width: 280px; font-weight: bold; border-radius: 4px; text-transform: uppercase;}
        .btn:hover { background: #c0392b; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4); }
        .btn-outline { background: transparent; border: 2px solid #fff; }
        .btn-outline:hover { background: #fff; color: #000; }

#instrucciones { margin-top: 20px; font-size: 14px; color: #666; max-width: 450px; }

/* PUBLICIDAD CON VIDEO */
        #interstitial-ad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; z-index: 2000; overflow: hidden; }
        
        /* El video de fondo ocupando toda la pantalla */
        #ad-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 0.8; }
        
        /* Interfaz encima del video */
        #ad-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; box-sizing: border-box; pointer-events: none;}
        
        .ad-header { display: flex; justify-content: space-between; align-items: flex-start; }
        .ad-label { font-size: 12px; color: #fff; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 3px; border: 1px solid #555; text-transform: uppercase; letter-spacing: 1px;}
        
        #btn-skip { pointer-events: auto; background: rgba(0,0,0,0.8); border: 2px solid #555; color: #fff; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 25px; transition: 0.3s; }
        #btn-skip:disabled { opacity: 0.5; cursor: not-allowed; border-color: #333; }
        #btn-skip:not(:disabled):hover { background: #fff; color: #000; border-color: #fff; }

.ad-footer { text-align: center; margin-bottom: 20px; }
        .ad-title { font-size: 40px; font-weight: bold; color: #fff; text-shadow: 2px 2px 5px #000; margin-bottom: 10px;}
        .ad-cta { pointer-events: auto; background: #2ecc71; border: none; padding: 15px 40px; font-size: 24px; color: #fff; font-weight: bold; border-radius: 10px; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.5); animation: pulse 1.5s infinite; }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<div id="interstitial-ad">
        <video id="ad-video" src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted loop playsinline></video>
        
        <div id="ad-ui">
            <div class="ad-header">
                <span class="ad-label">Publicidad Patrocinada</span>
                <button id="btn-skip" disabled>Espera 5s</button>
            </div>
            
            <div class="ad-footer">
                <div class="ad-title">¡GALAXY WARS 3D!</div>
                <button class="ad-cta" onclick="window.open('https://google.com', '_blank')">JUGAR AHORA</button>
            </div>
        </div>
    </div>

<div id="menu-container">
        <h1 id="menu-title">SOBREVIVIENTE</h1>
        <h2 id="menu-subtitle">PROTOCOL: ELIMINATE AI</h2>
        
        <div id="ui-main">
            <button class="btn" onclick="iniciarJuego('facil')">MODO FÁCIL</button><br>
            <button class="btn" onclick="iniciarJuego('dificil')">MODO DIFÍCIL</button><br>
            <button class="btn" style="background:#000; border: 1px solid #e74c3c;" onclick="iniciarJuego('pesadilla')">MODO PESADILLA</button>
        </div>

<div id="ui-pause" style="display: none;">
            <button class="btn" onclick="reanudarJuego()">CONTINUAR</button><br>
            <button class="btn btn-outline" onclick="volverAlMenu()">ABANDONAR</button>
        </div>

<div id="ui-post" style="display: none;">
            <button class="btn" onclick="mostrarVideoAd()">CONTINUAR</button>
        </div>

<div id="instrucciones">
            WASD: Movimiento | Mouse: Apuntar | Click: Disparar | ESC: Pausa
        </div>
    </div>

// Three.js Setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050505);
        scene.fog = new THREE.Fog(0x050505, 0, 45);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

const plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshStandardMaterial({ color: 0x111111 }));
        plane.rotation.x = -Math.PI / 2;
        scene.add(plane);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);
        const light = new THREE.PointLight(0xffffff, 1, 30);
        scene.add(light);

const enemy = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0x330000 }));
        
        const teclas = { w: false, a: false, s: false, d: false };
        let pitch = 0, yaw = 0;

document.addEventListener('mousedown', (e) => {
            if (estadoJuego !== "JUGANDO" || e.button !== 0) return;
            light.intensity = 2;
            setTimeout(() => { light.intensity = (nivelActual==='pesadilla'?0.3:0.8); }, 50);

const raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(new THREE.Vector2(0,0), camera);
            if (raycaster.intersectObject(enemy).length > 0) {
                iaSalud--;
                document.getElementById('ia-health').innerText = Math.round((iaSalud/iaSaludMax)*100);
                enemy.scale.multiplyScalar(0.92);
                velocidadIA += incrementoVelocidad;
                if (iaSalud <= 0) terminarJuego("SISTEMA ELIMINADO", "La IA ha sido desconectada.", "#2ecc71");
            }
        });

function volverAlMenu() {
            estadoJuego = "MENU";
            scene.remove(enemy);
            document.exitPointerLock();
            document.getElementById('menu-title').innerText = "SOBREVIVIENTE";
            document.getElementById('menu-title').style.color = "#fff";
            document.getElementById('menu-subtitle').innerText = "PROTOCOL: ELIMINATE AI";
            document.getElementById('ui-main').style.display = 'block';
            document.getElementById('ui-pause').style.display = 'none';
            document.getElementById('ui-post').style.display = 'none';
            document.getElementById('menu-container').style.display = 'flex';
        }

function reanudarJuego() { document.body.requestPointerLock(); }

function terminarJuego(t, s, c) {
            estadoJuego = "FIN";
            document.exitPointerLock();
            document.getElementById('menu-container').style.display = 'flex';
            document.getElementById('hud').style.display = 'none';
            document.getElementById('crosshair').style.display = 'none';
            document.getElementById('menu-title').innerText = t;
            document.getElementById('menu-title').style.color = c;
            document.getElementById('menu-subtitle').innerText = s;
            document.getElementById('ui-main').style.display = 'none';
            document.getElementById('ui-pause').style.display = 'none';
            document.getElementById('ui-post').style.display = 'block';
        }

// --- SISTEMA DE VIDEO AD REALISTA ---
        function mostrarVideoAd() {
            document.getElementById('menu-container').style.display = 'none';
            const screen = document.getElementById('interstitial-ad');
            const video = document.getElementById('ad-video');
            const btnSkip = document.getElementById('btn-skip');
            
            screen.style.display = 'block';
            
            // Reiniciar y reproducir video
            video.currentTime = 0;
            video.play();

let count = 5;
            btnSkip.disabled = true;
            btnSkip.innerText = "Espera " + count + "s";
            btnSkip.onclick = null; // Quitar evento anterior

function animar() {
            requestAnimationFrame(animar);
            if (estadoJuego === "JUGANDO") {
                const dir = new THREE.Vector3(0,0,-1).applyQuaternion(camera.quaternion);
                dir.y = 0; dir.normalize();
                const side = new THREE.Vector3(1,0,0).applyQuaternion(camera.quaternion);
                side.y = 0; side.normalize();

if (teclas.w) camera.position.addScaledVector(dir, 0.15);
                if (teclas.s) camera.position.addScaledVector(dir, -0.15);
                if (teclas.a) camera.position.addScaledVector(side, -0.15);
                if (teclas.d) camera.position.addScaledVector(side, 0.15);

camera.position.x = Math.max(-45, Math.min(45, camera.position.x));
                camera.position.z = Math.max(-45, Math.min(45, camera.position.z));
                light.position.copy(camera.position);

if (iaSalud > 0 && scene.children.includes(enemy)) {
                    const toPlayer = new THREE.Vector3().subVectors(camera.position, enemy.position);
                    toPlayer.y = 0;
                    if (toPlayer.length() < 1.2 * enemy.scale.x) terminarJuego("GAME OVER", "La IA ha tomado el control.", "#e74c3c");
                    enemy.position.addScaledVector(toPlayer.normalize(), velocidadIA);
                    enemy.lookAt(camera.position.x, 1, camera.position.z);
                }
            }
            renderer.render(scene, camera);
        }
        animar();

window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen