HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
59.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>Defender 3D: Exit & Walk Edition</title>
    <style>
        body { margin: 0; background: #87CEEB; overflow: hidden; font-family: sans-serif; touch-action: none; }
        #hud { position: absolute; top: 15px; left: 15px; color: #fff; text-shadow: 2px 2px #000; z-index: 10; }
        #controls { position: absolute; bottom: 25px; width: 100%; display: flex; justify-content: space-around; z-index: 20; }
        .btn { width: 65px; height: 65px; background: rgba(0,0,0,0.7); border: 2px solid white; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; }
        .exit-btn { background: #ffcc00; color: #000; border-radius: 10px; width: 80px; }
        .fire { background: red; box-shadow: 0 0 15px red; border-radius: 10px; width: 80px; }
        canvas { display: block; width: 100vw; height: 100vh; }
    </style>
</head>
<body>

<div id="hud">
    <b>GTA: DEFENDER MODE</b><br>
    STATUS: <span id="st">IN CAR</span><br>
    SPEED: <span id="sp">0</span>
</div>

<div id="controls">
    <div style="display:flex; gap:10px">
        <div class="btn" id="l">LEFT</div>
        <div class="btn" id="r">RIGHT</div>
    </div>
    <div style="display:flex; flex-direction:column; gap:10px">
        <div class="btn fire" id="f">FIRE 💥</div>
        <div class="btn exit-btn" id="e">EXIT 🚶</div>
    </div>
    <div style="display:flex; gap:10px">
        <div class="btn" id="b" style="background:rgba(255,0,0,0.5)">BRK</div>
        <div class="btn" id="g" style="background:rgba(0,255,0,0.5)">GAS</div>
    </div>
</div>

<canvas id="c"></canvas>

<script>
    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    let w, h, speed = 0, carX = 0, roadZ = 0, inCar = true;
    let traffic = [], particles = [], nitroParticles = [];

    function init() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
        carX = w / 2;
        for(let i=0; i<10; i++) spawnTraffic(true);
    }

    function spawnTraffic(initial = false) {
        traffic.push({
            lane: Math.floor(Math.random() * 6) - 2.5,
            z: initial ? Math.random() * 4000 : roadZ + 3000 + Math.random() * 1000,
            speed: 8 + Math.random() * 10,
            color: ['#fff', '#f33', '#ff0', '#3cf'][Math.floor(Math.random()*4)]
        });
    }

    let input = { l:0, r:0, g:0, b:0 };
    const bind = (id, k) => {
        const el = document.getElementById(id);
        el.ontouchstart = (e) => { 
            e.preventDefault(); 
            if(id === 'e') toggleExit();
            else { input[k] = 1; if(id==='f') shoot(); }
        };
        el.ontouchend = (e) => { e.preventDefault(); input[k] = 0; };
    };
    bind('l','l'); bind('r','r'); bind('g','g'); bind('b','b'); bind('f','f'); bind('e','e');

    function toggleExit() {
        if(speed < 10) { // Sirf slow speed pe bahar nikal sakte hain
            inCar = !inCar;
            document.getElementById('st').innerText = inCar ? "IN CAR" : "ON FOOT";
            document.getElementById('e').innerText = inCar ? "EXIT 🚶" : "ENTER 🚗";
        }
    }

    function shoot() {
        traffic.forEach((t, i) => {
            let relZ = t.z - roadZ;
            let scale = 400 / relZ;
            let tx = w/2 + (t.lane * 150 * scale);
            if(relZ > 0 && relZ < 1500 && Math.abs(carX - tx) < 100 * scale + 50) {
                for(let p=0; p<15; p++) particles.push({x: tx, y: h*0.4 + (400*scale), vx:Math.random()*10-5, vy:Math.random()*-10, l:30});
                traffic.splice(i, 1);
                spawnTraffic();
            }
        });
    }

    function draw() {
        ctx.fillStyle = "#87CEEB"; ctx.fillRect(0, 0, w, h); // Sky
        ctx.fillStyle = "#3e8e41"; ctx.fillRect(0, h * 0.4, w, h * 0.6); // Grass

        let horizon = h * 0.4;
        
        // 3D Road
        ctx.fillStyle = "#222";
        ctx.beginPath();
        ctx.moveTo(w*0.45, horizon); ctx.lineTo(w*0.55, horizon);
        ctx.lineTo(w*1.8, h); ctx.lineTo(w*-0.8, h);
        ctx.fill();

        // Lanes
        ctx.strokeStyle = "rgba(255,255,255,0.3)";
        ctx.setLineDash([20, 40]);
        ctx.lineDashOffset = -roadZ;
        for(let i=-3; i<=3; i++) {
            ctx.beginPath();
            ctx.moveTo(w/2 + (i*10), horizon); ctx.lineTo(w/2 + (i*500), h);
            ctx.stroke();
        }

        // Logic
        if(inCar) {
            if(input.g) { speed += 0.5; nitroParticles.push({x: carX, y: h-100, l: 15}); }
            if(input.b) speed -= 1.0;
            if(input.l) carX -= speed * 0.15;
            if(input.r) carX += speed * 0.15;
        } else {
            speed *= 0.8; // Car stops
            if(input.g) roadZ += 5; // Walking forward
            if(input.b) roadZ -= 5; // Walking back
            if(input.l) carX -= 5;
            if(input.r) carX += 5;
        }
        speed *= 0.98; if(speed < 0) speed = 0;
        roadZ += inCar ? speed : 0;

        // Traffic
        traffic.forEach((t, i) => {
            let relZ = t.z - roadZ;
            if(relZ < -200) { traffic.splice(i, 1); spawnTraffic(); return; }
            let scale = 400 / relZ;
            let x = w/2 + (t.lane * 150 * scale);
            let y = horizon + (400 * scale);
            if(scale > 0 && scale < 20) {
                ctx.fillStyle = t.color;
                ctx.fillRect(x - 30*scale, y - 40*scale, 60*scale, 40*scale);
            }
        });

        // Nitro
        nitroParticles.forEach((p, i) => {
            ctx.fillStyle = "cyan"; ctx.beginPath(); ctx.arc(p.x+(Math.random()*40-20), p.y, p.l/2, 0, Math.PI*2); ctx.fill();
            p.l--; if(p.l < 0) nitroParticles.splice(i, 1);
        });

        // Blast Particles
        particles.forEach((p, i) => {
            ctx.fillStyle = "orange"; ctx.fillRect(p.x, p.y, 5, 5);
            p.x += p.vx; p.y += p.vy; p.vy += 0.5; p.l--;
            if(p.l < 0) particles.splice(i, 1);
        });

        // Character vs Car Rendering
        if(inCar) {
            ctx.fillStyle = "#4b5320"; // Defender
            ctx.fillRect(carX - 45, h - 130, 90, 60);
            ctx.fillStyle = "black"; ctx.fillRect(carX - 5, h - 160, 10, 40); // Gun
        } else {
            // Car parked
            ctx.fillStyle = "rgba(75, 83, 32, 0.5)";
            ctx.fillRect(carX - 45, h - 130, 90, 60);
            // Army Man Walking
            ctx.fillStyle = "#ffdbac"; ctx.fillRect(carX - 10, h - 150, 20, 20); // Head
            ctx.fillStyle = "#4b5320"; ctx.fillRect(carX - 15, h - 130, 30, 40); // Body
        }

        document.getElementById('sp').innerText = Math.floor(speed * 5);
        requestAnimationFrame(draw);
    }

    init(); draw();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
7KB
Transfer Size
7KB
Content Size
121.0ms
Dom Content Loaded
192.0ms
First Paint
121.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