HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

33.7 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Juego 3D - Esquiva los Cubos</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: sans-serif; }
        #info {
            position: absolute; top: 10px; width: 100%; text-align: center;
            color: white; pointer-events: none; text-shadow: 1px 1px 2px black;
        }
    </style>
</head>
<body>
    <div id="info">
        <h1>Esquiva los Cubos</h1>
        <p>Usa las FLECHAS o WASD para moverte</p>
        <div id="score">Puntos: 0</div>
    </div>

    <script type="module">
        import * as THREE from 'https://cdn.skypack.dev/three@0.136.0';

        // --- CONFIGURACIÓN ESCENA ---
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x202020);
        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);

        // --- LUCES ---
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 10, 10);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        // --- JUGADOR (Esfera) ---
        const playerGeometry = new THREE.SphereGeometry(0.5, 32, 32);
        const playerMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
        const player = new THREE.Mesh(playerGeometry, playerMaterial);
        player.position.y = 0.5;
        scene.add(player);

        // --- SUELO ---
        const floorGeo = new THREE.PlaneGeometry(10, 100);
        const floorMat = new THREE.MeshPhongMaterial({ color: 0x444444 });
        const floor = new THREE.Mesh(floorGeo, floorMat);
        floor.rotation.x = -Math.PI / 2;
        scene.add(floor);

        camera.position.set(0, 5, 10);
        camera.lookAt(player.position);

        // --- LÓGICA DE ENEMIGOS ---
        const obstacles = [];
        let score = 0;
        function createObstacle() {
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            const material = new THREE.MeshPhongMaterial({ color: 0x0077ff });
            const cube = new THREE.Mesh(geometry, material);
            cube.position.set((Math.random() - 0.5) * 8, 0.5, -50);
            scene.add(cube);
            obstacles.push(cube);
        }

        // --- CONTROLES ---
        const keys = { w: false, s: false, a: false, d: false };
        window.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true);
        window.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false);

        // --- BUCLE DE ANIMACIÓN ---
        function animate() {
            requestAnimationFrame(animate);

            // Movimiento jugador
            if ((keys.a || keys.ArrowLeft) && player.position.x > -4.5) player.position.x -= 0.1;
            if ((keys.d || keys.ArrowRight) && player.position.x < 4.5) player.position.x += 0.1;

            // Generar obstáculos aleatorios
            if (Math.random() < 0.05) createObstacle();

            // Mover obstáculos y detectar colisiones
            for (let i = obstacles.length - 1; i >= 0; i--) {
                obstacles[i].position.z += 0.2;

                // Colisión simple por distancia
                if (player.position.distanceTo(obstacles[i].position) < 1) {
                    alert("¡Game Over! Puntuación: " + score);
                    location.reload();
                }

                // Limpiar obstáculos pasados
                if (obstacles[i].position.z > 10) {
                    scene.remove(obstacles[i]);
                    obstacles.splice(i, 1);
                    score++;
                    document.getElementById('score').innerText = `Puntos: ${score}`;
                }
            }

            renderer.render(scene, camera);
        }

        animate();

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

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

196KB

Transfer Size

1058KB

Content Size

591.0ms

Dom Content Loaded

224.0ms

First Paint

592.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests