HTML ad tag preview - Powered by Ad Reform

Live Preview

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

1920x1080

27.9 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>Hill Climb Mobile Fix</title>
    <style>
        body { margin: 0; overflow: hidden; background: #87CEEB; font-family: sans-serif; }
        #stats { position: absolute; top: 10px; left: 10px; color: white; text-shadow: 2px 2px #000; z-index: 10; font-size: 18px; }
        #fuel-bg { width: 100px; height: 10px; background: #333; border: 1px solid #fff; }
        #fuel-level { width: 100%; height: 100%; background: #ff4444; }
        #controls { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: space-around; z-index: 10; }
        .btn { width: 90px; height: 90px; background: rgba(0,0,0,0.7); border: 4px solid white; border-radius: 50%; color: white; 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="fuel-bg"><div id="fuel-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');
        
        // Screen size fix
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

        // Pahar aur Items banana (Screen ke hisab se)
        const groundLevel = canvas.height * 0.7; 
        for (let i = 0; i < 5000; i++) {
            let y = groundLevel + Math.sin(i * 0.1) * 40 + Math.cos(i * 0.05) * 20;
            terrain.push(y);
            if (i > 30 && i % 40 === 0) items.push({ x: i * 20, y: y - 40, type: 'coin', dead: false });
            if (i > 80 && i % 200 === 0) items.push({ x: i * 20, y: y - 40, type: 'fuel', dead: false });
        }

        function getGround(x) {
            let idx = Math.floor(x / 20);
            return terrain[idx] || canvas.height;
        }

        function update() {
            if (gas && car.fuel > 0) {
                car.speed += 0.25;
                car.fuel -= 0.15;
            } else {
                car.speed *= 0.98;
            }
            if (brake) car.speed -= 0.5;
            
            car.speed = Math.max(-2, Math.min(car.speed, 10));
            scrollX += car.speed;

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

            // JUMP & GRAVITY
            if (car.y < gy - 30) {
                car.vY += 0.6; // Gravity
                car.rot += 0.03; // Air Flip
            } else {
                car.vY = 0;
                car.y = gy - 30;
                car.rot = angle;
            }
            car.y += car.vY;

            // Collect items
            items.forEach(it => {
                if (!it.dead && Math.abs((scrollX + car.x) - it.x) < 35 && Math.abs(car.y - it.y) < 35) {
                    it.dead = true;
                    if (it.type === 'coin') car.coins += 10;
                    else car.fuel = Math.min(100, car.fuel + 50);
                }
            });

            document.getElementById('c').innerText = car.coins;
            document.getElementById('fuel-level').style.width = car.fuel + "%";
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Terrain (Mitti)
            ctx.fillStyle = "#8B4513";
            ctx.beginPath();
            ctx.moveTo(0, canvas.height);
            for (let i = 0; i < canvas.width; i += 10) {
                ctx.lineTo(i, getGround(scrollX + i));
            }
            ctx.lineTo(canvas.width, canvas.height);
            ctx.fill();

            // Items
            items.forEach(it => {
                if (it.dead) return;
                let sx = it.x - scrollX;
                if (sx > -50 && sx < canvas.width + 50) {
                    ctx.fillStyle = it.type === 'coin' ? "#FFD700" : "#FF0000";
                    ctx.beginPath();
                    ctx.arc(sx, it.y, 10, 0, Math.PI*2);
                    ctx.fill();
                }
            });

            // Car (Laal Gadi)
            ctx.save();
            ctx.translate(car.x, car.y);
            ctx.rotate(car.rot);
            ctx.fillStyle = "red";
            ctx.fillRect(-25, -15, 50, 20); // Body
            ctx.fillStyle = "black";
            ctx.beginPath(); ctx.arc(-18, 10, 10, 0, Math.PI*2); ctx.fill(); // Wheel 1
            ctx.beginPath(); ctx.arc(18, 10, 10, 0, Math.PI*2); ctx.fill(); // Wheel 2
            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

112.0ms

Dom Content Loaded

180.0ms

First Paint

112.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