HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
45.1 KB
Share this result

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

Open in browser
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Real 3D Defender GTA</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; font-family: sans-serif; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; z-index: 10; pointer-events: none; }
        #controls { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-around; z-index: 20; }
        .btn { width: 70px; height: 70px; background: rgba(0,0,0,0.6); border: 2px solid #fff; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; touch-action: none; }
        .fire { background: red; width: 80px; border-radius: 15px; }
        .exit { background: orange; color: black; border-radius: 15px; width: 80px; }
    </style>
</head>
<body>

<div id="ui">
    <b>3D DEFENDER SIMULATOR</b><br>
    SPEED: <span id="speedo">0</span> KM/H
</div>

<div id="controls">
    <div style="display:flex; gap:10px">
        <div class="btn" id="btnL">L</div>
        <div class="btn" id="btnR">R</div>
    </div>
    <div style="display:flex; flex-direction:column; gap:10px">
        <div class="btn fire" id="btnF">FIRE 💥</div>
        <div class="btn exit" id="btnE">EXIT 🚶</div>
    </div>
    <div style="display:flex; gap:10px">
        <div class="btn" id="btnB" style="background:rgba(255,0,0,0.5)">BRK</div>
        <div class="btn" id="btnG" style="background:rgba(0,255,0,0.5)">GAS</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
    let scene, camera, renderer, car, road, traffic = [];
    let speed = 0, steer = 0, inCar = true;
    let input = { g:0, b:0, l:0, r:0 };

    function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB);

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

        // Lights
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
        const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
        sunLight.position.set(0, 50, 50);
        scene.add(sunLight);

        // 3D Road (Asli 6-Lane Road)
        const roadGeo = new THREE.PlaneGeometry(30, 10000);
        const roadMat = new THREE.MeshPhongMaterial({ color: 0x333333 });
        road = new THREE.Mesh(roadGeo, roadMat);
        road.rotation.x = -Math.PI / 2;
        scene.add(road);

        // Road Lines
        for(let i = -2; i <= 2; i++) {
            const lineGeo = new THREE.PlaneGeometry(0.2, 10000);
            const lineMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
            const line = new THREE.Mesh(lineGeo, lineMat);
            line.position.set(i * 5, 0.01, 0);
            line.rotation.x = -Math.PI / 2;
            scene.add(line);
        }

        // 3D Defender Car Model (Simple 3D Shape)
        const bodyGeo = new THREE.BoxGeometry(2, 1.5, 4);
        const bodyMat = new THREE.MeshPhongMaterial({ color: 0x4b5320 });
        car = new THREE.Group();
        const body = new THREE.Mesh(bodyGeo, bodyMat);
        body.position.y = 1;
        car.add(body);

        // Gun on Top
        const gunGeo = new THREE.CylinderGeometry(0.1, 0.1, 2);
        const gunMat = new THREE.MeshPhongMaterial({ color: 0x000000 });
        const gun = new THREE.Mesh(gunGeo, gunMat);
        gun.rotation.x = Math.PI / 2;
        gun.position.set(0, 2, -1);
        car.add(gun);
        
        scene.add(car);

        // Spawn Initial Traffic
        for(let i=0; i<10; i++) spawnTraffic(-50 - (i*30));

        setupControls();
        animate();
    }

    function spawnTraffic(zPos) {
        const tGeo = new THREE.BoxGeometry(2, 1.5, 4);
        const tMat = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
        const tCar = new THREE.Mesh(tGeo, tMat);
        tCar.position.set((Math.random()*20)-10, 1, zPos);
        scene.add(tCar);
        traffic.push(tCar);
    }

    function setupControls() {
        const bind = (id, k) => {
            const el = document.getElementById(id);
            el.ontouchstart = (e) => { e.preventDefault(); input[k] = 1; if(id==='btnE') toggleExit(); };
            el.ontouchend = (e) => { e.preventDefault(); input[k] = 0; };
        };
        bind('btnG', 'g'); bind('btnB', 'b'); bind('btnL', 'l'); bind('btnR', 'r');
    }

    function toggleExit() {
        if(speed < 1) inCar = !inCar;
    }

    function animate() {
        requestAnimationFrame(animate);

        if(inCar) {
            if(input.g) speed += 0.1;
            if(input.b) speed -= 0.2;
            if(input.l) car.position.x -= 0.2;
            if(input.r) car.position.x += 0.2;
        } else {
            // Walking logic
            if(input.g) car.position.z -= 0.2;
            if(input.b) car.position.z += 0.2;
        }

        speed *= 0.98;
        if(speed < 0) speed = 0;
        car.position.z -= speed;

        // Camera Follow (Real GTA Third Person)
        camera.position.set(car.position.x, car.position.y + 5, car.position.z + 12);
        camera.lookAt(car.position.x, car.position.y, car.position.z - 10);

        // Traffic Recycling
        traffic.forEach(t => {
            if(t.position.z > car.position.z + 20) {
                t.position.z = car.position.z - 200;
                t.position.x = (Math.random()*20)-10;
            }
            // Collision Detection
            if(car.position.distanceTo(t.position) < 3) {
                speed = 0;
            }
        });

        document.getElementById('speedo').innerText = Math.floor(speed * 20);
        renderer.render(scene, camera);
    }

    window.onload = init;
</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
218.0ms
Dom Content Loaded
180.0ms
First Paint
218.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