HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
800x865
19.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 lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>सिटी कार ड्राइविंग गेम - मोबाइल</title>
    <style>
        body {
            margin: 0;
            background: #222;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            touch-action: none; /* स्क्रीन स्क्रॉल और ज़ूम बंद करने के लिए */
        }
        #gameContainer {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 80vh;
        }
        canvas {
            width: 100%;
            height: 100%;
            background: #87CEEB;
            display: block;
        }
        .ui-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.6);
            padding: 8px;
            border-radius: 5px;
            pointer-events: none; /* टच करने पर रुकावट न बने */
        }
        /* मोबाइल बटन्स का स्टाइल */
        .touch-controls {
            display: flex;
            width: 100%;
            max-width: 800px;
            height: 18vh;
            background: #111;
        }
        .btn {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
            user-select: none;
            -webkit-user-select: none;
        }
        .btn-left {
            background: #333;
            border-right: 1px solid #555;
        }
        .btn-right {
            background: #333;
            border-left: 1px solid #555;
        }
        .btn:active {
            background: #555; /* दबाने पर कलर बदलेगा */
        }
    </style>
</head>
<body>

<div id="gameContainer">
    <div class="ui-panel">
        <div>स्पीड: <span id="speed">0</span> km/h</div>
        <div>स्कोर: <span id="score">0</span></div>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
</div>

<!-- मोबाइल के बटन्स -->
<div class="touch-controls">
    <div class="btn btn-left" id="leftBtn">◀ बायाँ (Left)</div>
    <div class="btn btn-right" id="rightBtn">दायाँ (Right) ▶</div>
</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// UI Elements
const speedTxt = document.getElementById("speed");
const scoreTxt = document.getElementById("score");

// गेम वेरिएबल्स
let speed = 0;
const maxSpeed = 120;
let score = 0;
let carX = 0; 
let roadPos = 0; 
let curve = 0; 
let currentCurve = 0;

// इनपुट वेरिएबल्स (मोबाइल और कीबोर्ड दोनों के लिए)
let isMovingLeft = false;
let isMovingRight = false;

// कीबोर्ड इवेंट्स (कंप्यूटर के लिए)
document.addEventListener("keydown", e => {
    if (e.key === "ArrowLeft") isMovingLeft = true;
    if (e.key === "ArrowRight") isMovingRight = true;
});
document.addEventListener("keyup", e => {
    if (e.key === "ArrowLeft") isMovingLeft = false;
    if (e.key === "ArrowRight") isMovingRight = false;
});

// टच इवेंट्स (मोबाइल के लिए)
const leftBtn = document.getElementById("leftBtn");
const rightBtn = document.getElementById("rightBtn");

// लेफ्ट बटन टच
leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isMovingLeft = true; });
leftBtn.addEventListener("touchend", () => isMovingLeft = false);

// राइट बटन टच
rightBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isMovingRight = true; });
rightBtn.addEventListener("touchend", () => isMovingRight = false);

// मोड़ बदलने के लिए टाइमर
setInterval(() => {
    curve = (Math.random() - 0.5) * 4;
}, 3000);

function update() {
    if (speed < maxSpeed) speed += 0.5;
    score += Math.floor(speed / 10);
    
    currentCurve += (curve - currentCurve) * 0.05;
    roadPos += speed * 0.1;
    carX -= currentCurve * (speed / maxSpeed) * 2;

    // कार मूव करने का लॉजिक (टच या कीबोर्ड दोनों से चलेगा)
    if (isMovingLeft) carX -= 4;
    if (isMovingRight) carX += 4;

    if (carX < -250) carX = -250;
    if (carX > 250) carX = 250;

    speedTxt.innerText = Math.floor(speed);
    scoreTxt.innerText = score;
}

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

    // 1. आसमान और बैकग्राउंड
    ctx.fillStyle = "#87CEEB";
    ctx.fillRect(0, 0, canvas.width, 300);
    
    // सिटी बिल्डिंग्स
    ctx.fillStyle = "#444";
    ctx.fillRect(100, 180, 80, 120);
    ctx.fillRect(160, 140, 60, 160);
    ctx.fillStyle = "#555";
    ctx.fillRect(500, 160, 90, 140);
    ctx.fillRect(570, 200, 70, 100);

    // 2. जमीन
    ctx.fillStyle = "#228B22";
    ctx.fillRect(0, 300, canvas.width, 300);

    // 3. 3D रोड
    for (let i = 0; i < 300; i++) {
        let y = 300 + i;
        let perspective = i / 300;
        let roadWidth = 100 + perspective * 400;
        let lineCurve = currentCurve * Math.pow(perspective, 2) * 150; 
        let roadCenter = canvas.width / 2 + lineCurve;

        ctx.fillStyle = "#333";
        ctx.fillRect(roadCenter - roadWidth / 2, y, roadWidth, 1);

        ctx.fillStyle = "#fff";
        ctx.fillRect(roadCenter - roadWidth / 2 - 5, y, 5, 1);
        ctx.fillRect(roadCenter + roadWidth / 2, y, 5, 1);

        if (Math.floor((roadPos - i) / 20) % 2 === 0) {
            ctx.fillStyle = "#fff";
            ctx.fillRect(roadCenter - 2, y, 4, 1);
        }
    }

    // 4. खिलाड़ी की कार
    let carY = 500;
    let screenCarX = canvas.width / 2 + carX;

    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(screenCarX - 30, carY, 60, 35);
    
    ctx.fillStyle = "#00FFFF";
    ctx.fillRect(screenCarX - 20, carY - 15, 40, 15);

    ctx.fillStyle = "#000";
    ctx.fillRect(screenCarX - 35, carY + 5, 10, 25);  
    ctx.fillRect(screenCarX + 25, carY + 5, 10, 25);  
    
    ctx.fillStyle = "#FFA500";
    ctx.fillRect(screenCarX - 25, carY, 8, 5);
    ctx.fillRect(screenCarX + 17, carY, 8, 5);
}

function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

gameLoop();
</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
117.0ms
Dom Content Loaded
192.0ms
First Paint
118.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