HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
40.4 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="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Mobile 3D Cave & Dance Game</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: sans-serif; touch-action: none; }
        #ui {
            position: absolute; top: 10px; left: 10px;
            color: white; background: rgba(0,0,0,0.6);
            padding: 8px 12px; border-radius: 8px; font-size: 14px;
        }
        .controls {
            position: absolute; bottom: 20px; left: 20px;
            display: grid; grid-template-columns: repeat(3, 50px); gap: 5px;
        }
        .btn {
            width: 50px; height: 50px; background: rgba(255,255,255,0.4);
            border: 2px solid #fff; border-radius: 10px; color: white;
            font-weight: bold; font-size: 18px; display: flex;
            align-items: center; justify-content: center; user-select: none;
        }
        #action-btns {
            position: absolute; bottom: 20px; right: 20px;
            display: flex; flex-direction: column; gap: 10px;
        }
        .act-btn {
            width: 65px; height: 65px; background: #ff4757;
            border-radius: 50%; color: white; border: 2px solid white;
            font-weight: bold; font-size: 14px; display: flex;
            align-items: center; justify-content: center;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<div id="ui">📱 स्क्रीन पर स्वाइप करके चारों तरफ देखें!</div>

<div class="controls">
    <div></div><div class="btn" id="btn-up">▲</div><div></div>
    <div class="btn" id="btn-left">◀</div><div></div><div class="btn" id="btn-right">▶</div>
    <div></div><div class="btn" id="btn-down">▼</div><div></div>
</div>

<div id="action-btns">
    <div class="act-btn" id="btn-dance" style="background: #2ed573;">💃 Dance</div>
    <div class="act-btn" id="btn-jump" style="background: #ffa502;">Jump</div>
</div>

<script>
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x87CEEB);

    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 light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(10, 20, 10);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0x505050));

    // 3D वर्ल्ड और केव निर्माण
    const geo = new THREE.BoxGeometry(1, 1, 1);
    const grass = new THREE.MeshLambertMaterial({ color: 0x2ed573 });
    const dirt = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
    const stone = new THREE.MeshLambertMaterial({ color: 0x747d8c });

    for (let x = -10; x <= 10; x++) {
        for (let z = -10; z <= 10; z++) {
            const topBlock = new THREE.Mesh(geo, grass);
            topBlock.position.set(x, 0, z);
            scene.add(topBlock);

            for (let y = -1; y >= -4; y--) {
                if (Math.abs(x) < 3 && y < -1) continue; // Cave space
                const block = new THREE.Mesh(geo, y === -1 ? dirt : stone);
                block.position.set(x, y, z);
                scene.add(block);
            }
        }
    }

    // कैरेक्टर
    const player = new THREE.Group();
    const body = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.9, 0.4), new THREE.MeshLambertMaterial({ color: 0x1e90ff }));
    body.position.y = 0.9;
    player.add(body);

    const head = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, 0.4), new THREE.MeshLambertMaterial({ color: 0xff7f50 }));
    head.position.y = 1.5;
    player.add(head);

    scene.add(player);
    player.position.set(0, 0.5, 0);

    camera.position.set(0, 2.5, 4);
    player.add(camera);

    // मूवमेंट और बटन इवेंट्स
    let moveFwd = false, moveBwd = false, moveLft = false, moveRgt = false;
    let isDancing = false, velY = 0, isGrounded = true;

    const bindBtn = (id, start, end) => {
        const el = document.getElementById(id);
        el.addEventListener('touchstart', (e) => { e.preventDefault(); start(); });
        el.addEventListener('touchend', (e) => { e.preventDefault(); end(); });
    };

    bindBtn('btn-up', () => moveFwd = true, () => moveFwd = false);
    bindBtn('btn-down', () => moveBwd = true, () => moveBwd = false);
    bindBtn('btn-left', () => moveLft = true, () => moveLft = false);
    bindBtn('btn-right', () => moveRgt = true, () => moveRgt = false);

    document.getElementById('btn-dance').addEventListener('touchstart', (e) => {
        e.preventDefault();
        isDancing = !isDancing;
    });

    document.getElementById('btn-jump').addEventListener('touchstart', (e) => {
        e.preventDefault();
        if (isGrounded) { velY = 0.12; isGrounded = false; }
    });

    // टच स्वाइप से कैमरा रोटेशन
    let lastX = 0;
    window.addEventListener('touchstart', (e) => { lastX = e.touches[0].clientX; });
    window.addEventListener('touchmove', (e) => {
        let deltaX = e.touches[0].clientX - lastX;
        player.rotation.y -= deltaX * 0.005;
        lastX = e.touches[0].clientX;
    });

    // एनीमेशन लूप
    const clock = new THREE.Clock();
    function animate() {
        requestAnimationFrame(animate);
        const t = clock.getElapsedTime();

        if (moveFwd) player.translateZ(-0.06);
        if (moveBwd) player.translateZ(0.06);
        if (moveLft) player.translateX(-0.06);
        if (moveRgt) player.translateX(0.06);

        player.position.y += velY;
        if (player.position.y > 0.5) {
            velY -= 0.006;
        } else {
            player.position.y = 0.5;
            velY = 0;
            isGrounded = true;
        }

        if (isDancing) {
            body.rotation.z = Math.sin(t * 10) * 0.3;
            head.position.y = 1.5 + Math.abs(Math.sin(t * 10)) * 0.1;
        } else {
            body.rotation.z = 0;
            head.position.y = 1.5;
        }

        renderer.render(scene, camera);
    }
    animate();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
125KB
Transfer Size
596KB
Content Size
1,704.0ms
Dom Content Loaded
1,324.0ms
First Paint
1,704.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