le jeu

331 e79629190

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

25 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

7 August 2025

Masquer Div en cliquant sur le bouton : démarrer l'animation

HTML

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

CSS