HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
37.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>Monster Truck Monkey Driver</title>
    <style>
        body { margin: 0; overflow: hidden; background: #87CEEB; font-family: sans-serif; }
        #stats { position: absolute; top: 15px; left: 15px; color: white; text-shadow: 2px 2px #000; z-index: 10; }
        #f-bar { width: 100px; height: 12px; background: #333; border: 2px solid #fff; margin-top: 5px; }
        #f-level { width: 100%; height: 100%; background: #ff0000; }
        #controls { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: space-around; }
        .btn { width: 85px; height: 85px; background: rgba(0,0,0,0.7); border: 4px solid #fff; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: bold; user-select: none; }
    </style>
</head>
<body>
    <div id="stats">
        COINS: <span id="c">0</span><br>
        FUEL: <div id="f-bar"><div id="f-level"></div></div>
    </div>
    <div id="controls">
        <div class="btn" id="bBtn">BRAKE</div>
        <div class="btn" id="gBtn">GAS</div>
    </div>
    <canvas id="game"></canvas>

    <script>
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let car = { x: 150, y: 0, vY: 0, rot: 0, speed: 0, fuel: 100, coins: 0 };
        let terrain = [], items = [], scrollX = 0;
        let gas = false, brake = false;

        // Bridge aur Terrain Logic
        for (let i = 0; i < 5000; i++) {
            let y = (canvas.height * 0.65) + Math.sin(i * 0.1) * 60 + Math.cos(i * 0.05) * 40;
            terrain.push(y);
            if (i % 40 === 0) items.push({ x: i * 25, y: y - 50, type: 'coin' });
            if (i % 200 === 0) items.push({ x: i * 25, y: y - 60, type: 'fuel' });
            if (i % 100 === 0) items.push({ x: i * 25, y: y - 80, type: 'tree' });
        }

        function getH(x) {
            let idx = Math.floor(x / 25);
            let h = terrain[idx] || canvas.height;
            // Bridge lachak
            if (idx % 150 > 110 && idx % 150 < 140) h += 40 * Math.sin(((idx%150-110)/30) * Math.PI);
            return h;
        }

        function update() {
            if (gas && car.fuel > 0) { car.speed += 0.3; car.fuel -= 0.15; }
            else { car.speed *= 0.97; }
            if (brake) car.speed -= 0.6;
            car.speed = Math.max(-3, Math.min(car.speed, 12));
            scrollX += car.speed;

            let gy = getH(scrollX + car.x);
            let angle = Math.atan2(getH(scrollX + car.x + 20) - gy, 20);

            if (car.y < gy - 40) { car.vY += 0.6; car.rot += 0.03; }
            else { car.vY = 0; car.y = gy - 40; car.rot = angle; }
            car.y += car.vY;

            items.forEach(it => {
                if (!it.hit && Math.abs((scrollX + car.x) - it.x) < 40) {
                    it.hit = true;
                    if (it.type === 'coin') car.coins += 10;
                    if (it.type === 'fuel') car.fuel = 100;
                }
            });
            document.getElementById('c').innerText = car.coins;
            document.getElementById('f-level').style.width = car.fuel + "%";
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // Zameen aur Ghaas
            ctx.fillStyle = "#8B4513"; ctx.beginPath(); ctx.moveTo(0, canvas.height);
            for (let i = 0; i < canvas.width; i += 10) ctx.lineTo(i, getH(scrollX + i));
            ctx.lineTo(canvas.width, canvas.height); ctx.fill();
            ctx.strokeStyle = "#2ecc71"; ctx.lineWidth = 10; ctx.beginPath();
            for (let i = 0; i < canvas.width; i += 10) ctx.lineTo(i, getH(scrollX + i) - 2);
            ctx.stroke();

            // Items & Trees
            items.forEach(it => {
                if (it.hit) return;
                let sx = it.x - scrollX;
                if (sx > -50 && sx < canvas.width + 50) {
                    if (it.type === 'tree') {
                        ctx.fillStyle = "#5d4037"; ctx.fillRect(sx - 5, it.y + 20, 10, 50);
                        ctx.fillStyle = "#1b5e20"; ctx.beginPath(); ctx.arc(sx, it.y, 25, 0, Math.PI*2); ctx.fill();
                    } else {
                        ctx.fillStyle = it.type === 'coin' ? "gold" : "red";
                        ctx.beginPath(); ctx.arc(sx, it.y, 10, 0, Math.PI*2); ctx.fill();
                    }
                }
            });

            // MONSTER TRUCK with MONKEY
            ctx.save(); ctx.translate(car.x, car.y); ctx.rotate(car.rot);
            // Driver Bandar (Monkey)
            ctx.fillStyle = "#8d6e63"; 
            ctx.beginPath(); ctx.arc(0, -35, 12, 0, Math.PI*2); ctx.fill(); // Sar
            ctx.fillStyle = "#ffccbc"; ctx.beginPath(); ctx.arc(4, -33, 6, 0, Math.PI*2); ctx.fill(); // Munh
            // Truck
            ctx.fillStyle = "#e74c3c"; ctx.fillRect(-40, -25, 80, 30); // Body
            ctx.fillStyle = "#81ecec"; ctx.fillRect(10, -20, 20, 12); // Sheesha
            ctx.fillStyle = "yellow"; ctx.fillRect(35, -10, 8, 6); // Light
            // Wheels
            ctx.fillStyle = "#222";
            ctx.beginPath(); ctx.arc(-30, 15, 20, 0, Math.PI*2); ctx.fill();
            ctx.beginPath(); ctx.arc(30, 15, 20, 0, Math.PI*2); ctx.fill();
            ctx.restore();
        }

        const g = document.getElementById('gBtn'), b = document.getElementById('bBtn');
        g.ontouchstart = (e) => { e.preventDefault(); gas = true; }; g.ontouchend = () => gas = false;
        b.ontouchstart = (e) => { e.preventDefault(); brake = true; }; b.ontouchend = () => brake = false;

        function loop() { update(); draw(); requestAnimationFrame(loop); }
        loop();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
6KB
Transfer Size
6KB
Content Size
191.0ms
Dom Content Loaded
216.0ms
First Paint
191.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