HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
408x509
1.79 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>2D Free Fire Mini</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #222;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            user-select: none;
        }
        #scoreBoard {
            color: white;
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        canvas {
            background-color: #34495e;
            border: 4px solid #2c3e50;
            box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
            max-width: 100%;
            max-height: 60vh;
        }
        /* Mobile Controls */
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 70px);
            grid-template-rows: repeat(2, 60px);
            gap: 10px;
            margin-top: 15px;
        }
        .btn {
            background-color: #e74c3c;
            color: white;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            active-background-color: #c0392b;
            box-shadow: 0 4px #95a5a6;
        }
        .btn:active {
            box-shadow: 0 2px #95a5a6;
            transform: translateY(2px);
        }
        .shoot-btn {
            grid-column: 3;
            grid-row: 1 / span 2;
            background-color: #2ecc71;
            height: 130px;
        }
    </style>
</head>
<body>

    <div id="scoreBoard">Kills: <span id="score">0</span> | HP: <span id="hp">100</span></div>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

    <div class="controls">
        <button class="btn" id="btnUp">▲</button>
        <div></div>
        <button class="btn shoot-btn" id="btnShoot">FIRE</button>
        <button class="btn" id="btnLeft">◀</button>
        <button class="btn" id="btnDown">▼</button>
        <button class="btn" id="btnRight">▶</button>
    </div>

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

        let score = 0;
        let hp = 100;
        let gameOver = false;

        // Player Setup (Your Character)
        const player = {
            x: 180,
            y: 400,
            width: 30,
            height: 30,
            speed: 5
        };

        let bullets = [];
        let enemies = [];
        let enemySpeed = 2;

        // Controls State
        let keys = {};

        // Keyboard Listeners
        window.addEventListener("keydown", (e) => keys[e.code] = true);
        window.addEventListener("keyup", (e) => {
            keys[e.code] = false;
            if (e.code === "Space") shootBullet();
        });

        // Mobile Button Listeners
        setupMobileButton("btnLeft", "ArrowLeft");
        setupMobileButton("btnRight", "ArrowRight");
        setupMobileButton("btnUp", "ArrowUp");
        setupMobileButton("btnDown", "ArrowDown");
        document.getElementById("btnShoot").addEventListener("touchstart", (e) => { e.preventDefault(); shootBullet(); });
        document.getElementById("btnShoot").addEventListener("click", shootBullet);

        function setupMobileButton(id, keyCode) {
            const btn = document.getElementById(id);
            btn.addEventListener("touchstart", (e) => { e.preventDefault(); keys[keyCode] = true; });
            btn.addEventListener("touchend", () => keys[keyCode] = false);
            // Deskop mouse fallback
            btn.addEventListener("mousedown", () => keys[keyCode] = true);
            btn.addEventListener("mouseup", () => keys[keyCode] = false);
        }

        function shootBullet() {
            if (gameOver) return;
            bullets.push({
                x: player.x + player.width / 2 - 3,
                y: player.y,
                width: 6,
                height: 15,
                speed: 7
            });
        }

        function spawnEnemy() {
            if (gameOver) return;
            let size = 30;
            let x = Math.random() * (canvas.width - size);
            enemies.push({ x: x, y: -size, width: size, height: size });
        }
        setInterval(spawnEnemy, 1000); // New enemy every 1 second

        // Collision Detector
        function rectIntersect(r1, r2) {
            return !(r2.x > r1.x + r1.width || r2.x + r2.width < r1.x || r2.y > r1.y + r1.height || r2.y + r2.height < r1.y);
        }

        // Main Game Loop
        function update() {
            if (gameOver) return;

            // Player Movement
            if (keys["ArrowLeft"] && player.x > 0) player.x -= player.speed;
            if (keys["ArrowRight"] && player.x < canvas.width - player.width) player.x += player.speed;
            if (keys["ArrowUp"] && player.y > 0) player.y -= player.speed;
            if (keys["ArrowDown"] && player.y < canvas.height - player.height) player.y += player.speed;

            // Move Bullets
            bullets.forEach((bullet, bIndex) => {
                bullet.y -= bullet.speed;
                if (bullet.y < 0) bullets.splice(bIndex, 1);
            });

            // Move Enemies
            enemies.forEach((enemy, eIndex) => {
                enemy.y += enemySpeed;

                // Enemy goes past screen
                if (enemy.y > canvas.height) {
                    enemies.splice(eIndex, 1);
                    hp -= 10;
                    hpEl.innerText = hp;
                }

                // Player and Enemy collision
                if (rectIntersect(player, enemy)) {
                    enemies.splice(eIndex, 1);
                    hp -= 20;
                    hpEl.innerText = hp;
                }

                // Bullet and Enemy collision
                bullets.forEach((bullet, bIndex) => {
                    if (rectIntersect(bullet, enemy)) {
                        enemies.splice(eIndex, 1);
                        bullets.splice(bIndex, 1);
                        score += 1;
                        scoreEl.innerText = score;
                        if(score % 10 === 0) enemySpeed += 0.5; // Game gets harder
                    }
                });
            });

            if (hp <= 0) {
                gameOver = true;
                alert("Game Over! आपका स्कोर: " + score + "\nखेलने के लिए पेज रीलोड करें।");
                location.reload();
            }
        }

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

            // Draw Player (Blue)
            ctx.fillStyle = "#3498db";
            ctx.fillRect(player.x, player.y, player.width, player.height);

            // Draw Bullets (Yellow)
            ctx.fillStyle = "#f1c40f";
            bullets.forEach(bullet => ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height));

            // Draw Enemies (Red)
            ctx.fillStyle = "#e74c3c";
            enemies.forEach(enemy => ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height));
        }

        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
8KB
Transfer Size
8KB
Content Size
53.0ms
Dom Content Loaded
124.0ms
First Paint
54.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