HTML ad tag preview - Powered by Ad Reform

Live Preview

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

1920x1080

30.7 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 Racing Mobile</title>
    <style>
        body { margin: 0; overflow: hidden; background: #87CEEB; font-family: Arial, sans-serif; }
        canvas { display: block; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; text-shadow: 2px 2px black; font-size: 20px; }
        #controls { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-around; }
        .btn { width: 80px; height: 80px; background: rgba(0,0,0,0.5); border: 3px solid white; border-radius: 50%; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; user-select: none; -webkit-tap-highlight-color: transparent; }
        .btn:active { background: white; color: black; }
    </style>
</head>
<body>
    <div id="ui">Distance: <span id="dist">0</span>m</div>
    <div id="controls">
        <div class="btn" id="brakeBtn">BRAKE</div>
        <div class="btn" id="gasBtn">GAS</div>
    </div>
    <canvas id="gameCanvas"></canvas>

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

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

        // Pahari rasta banana
        for (let i = 0; i < 1000; i++) {
            terrain.push(Math.sin(i * 0.1) * 40 + Math.cos(i * 0.05) * 30 + (canvas.height - 150));
        }

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

        function update() {
            // Speed aur Movement
            if (gas) car.speed += 0.2;
            else car.speed *= 0.98; // Friction
            if (brake) car.speed -= 0.5;
            
            if (car.speed > 8) car.speed = 8;
            if (car.speed < -2) car.speed = -2;

            scrollX += car.speed;
            
            // Car ki Physics
            let currentGroundY = getTerrainY(scrollX + car.x);
            let frontGroundY = getTerrainY(scrollX + car.x + 40);
            
            // Rotation set karna (Pahar ke mutabiq)
            let targetRot = Math.atan2(frontGroundY - currentGroundY, 40);
            
            if (car.y < currentGroundY - 40) {
                car.vY += 0.5; // Gravity
                car.vRot += 0.01; // Hawa mein ghumna
            } else {
                car.vY = 0;
                car.y = currentGroundY - 40;
                car.rot = targetRot;
                car.vRot = 0;
            }

            car.y += car.vY;
            car.rot += car.vRot;

            document.getElementById('dist').innerText = Math.floor(scrollX / 10);
        }

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

            // Aasman aur Suraj
            ctx.fillStyle = "#FFFF00";
            ctx.beginPath(); ctx.arc(canvas.width-80, 80, 40, 0, Math.PI*2); ctx.fill();

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

            // Ghaas (Green layer)
            ctx.strokeStyle = "#4CAF50";
            ctx.lineWidth = 10;
            ctx.beginPath();
            for (let i = 0; i < canvas.width; i += 5) {
                ctx.lineTo(i, getTerrainY(scrollX + i));
            }
            ctx.stroke();

            // Car Banana (Red Box with Wheels)
            ctx.save();
            ctx.translate(car.x, car.y);
            ctx.rotate(car.rot);
            
            // Body
            ctx.fillStyle = "red";
            ctx.fillRect(-20, -15, 40, 20);
            ctx.fillStyle = "black";
            ctx.fillRect(-10, -25, 20, 15); // Glass
            
            // Tyres
            ctx.beginPath(); ctx.arc(-15, 5, 10, 0, Math.PI*2); ctx.fill();
            ctx.beginPath(); ctx.arc(15, 5, 10, 0, Math.PI*2); ctx.fill();
            
            ctx.restore();
        }

        // Control Events
        const gBtn = document.getElementById('gasBtn');
        const bBtn = document.getElementById('brakeBtn');
        
        gBtn.ontouchstart = () => gas = true;
        gBtn.ontouchend = () => gas = false;
        bBtn.ontouchstart = () => brake = true;
        bBtn.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

5KB

Transfer Size

5KB

Content Size

125.0ms

Dom Content Loaded

196.0ms

First Paint

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