HTML ad tag preview - Powered by Ad Reform

Live Preview

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

300x150

499 Bytes

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, maximum-scale=1.0, user-scalable=no">
    <title>Mobile Free Fire Clone</title>
    <style>
        body { margin: 0; background: #2d5a27; overflow: hidden; touch-action: none; font-family: sans-serif; }
        #ui-top { position: absolute; top: 10px; width: 100%; text-align: center; color: white; font-weight: bold; z-index: 10; }
        #health-bar { width: 150px; height: 15px; background: red; border: 2px solid #fff; display: inline-block; }
        #health-val { width: 100%; height: 100%; background: #00ff00; }
        
        /* Mobile Buttons */
        .btn { position: absolute; background: rgba(255,255,255,0.3); border: 2px solid #fff; border-radius: 50%; color: white; font-weight: bold; text-align: center; user-select: none; }
        #fire-btn { bottom: 40px; right: 40px; width: 80px; height: 80px; line-height: 80px; background: rgba(255, 0, 0, 0.5); }
        #grenade-btn { bottom: 140px; right: 45px; width: 60px; height: 60px; line-height: 60px; background: rgba(0, 0, 255, 0.5); }
        #jump-btn { bottom: 40px; left: 40px; width: 80px; height: 80px; line-height: 80px; }
        
        canvas { display: block; }
    </style>
</head>
<body>
    <div id="ui-top">
        HP <div id="health-bar"><div id="health-val"></div></div> | KILLS: <span id="kills">0</span>
    </div>

    <div id="jump-btn" class="btn">JUMP</div>
    <div id="fire-btn" class="btn">FIRE</div>
    <div id="grenade-btn" class="btn">BOMB</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 gameState = "plane"; 
    let planeSize = 50;
    let planeX = -200;
    let score = 0;
    let hp = 100;
    let player = { x: canvas.width/2, y: canvas.height - 150 };
    let enemies = [];
    let grenadeActive = false;

    function drawHuman(x, y, color, angle) {
        ctx.save();
        ctx.translate(x, y);
        // Legs
        ctx.fillStyle = "#333";
        ctx.fillRect(-8, 10, 6, 15); ctx.fillRect(2, 10, 6, 15);
        // Body
        ctx.fillStyle = color;
        ctx.fillRect(-12, -15, 24, 30);
        // Arms
        ctx.fillStyle = "#D2B48C";
        ctx.fillRect(-18, -10, 6, 20); ctx.fillRect(12, -10, 6, 20);
        // Head
        ctx.fillStyle = "#D2B48C";
        ctx.beginPath(); ctx.arc(0, -25, 10, 0, Math.PI*2); ctx.fill();
        // Eyes
        ctx.fillStyle = "black";
        ctx.fillRect(-4, -28, 2, 2); ctx.fillRect(4, -28, 2, 2);
        // Gun
        ctx.fillStyle = "black";
        ctx.fillRect(5, -5, 25, 6);
        ctx.restore();
    }

    function animate() {
        ctx.fillStyle = "#3a7d32";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        if (gameState === "plane") {
            ctx.fillStyle = "silver";
            ctx.fillRect(planeX, 150, planeSize * 4, planeSize);
            planeX += 5;
            if(planeX > canvas.width) planeX = -200;
        }

        if (gameState === "fight") {
            drawHuman(player.x, player.y, "#1b4d3e");
            enemies.forEach((en, i) => {
                drawHuman(en.x, en.y, "#7a1a1a");
                en.x += Math.sin(Date.now()/1000) * 2; // Moving
            });
        }
        requestAnimationFrame(animate);
    }

    // Button Controls
    document.getElementById('jump-btn').addEventListener('touchstart', () => {
        if(gameState === "plane") {
            gameState = "fight";
            for(let i=0; i<10; i++) enemies.push({x: Math.random()*canvas.width, y: Math.random()*canvas.height/2});
        }
    });

    document.getElementById('fire-btn').addEventListener('touchstart', () => {
        if(gameState === "fight") {
            // Shooting logic
            enemies.forEach((en, i) => {
                if(Math.abs(en.x - player.x) < 50) { // Aiming logic
                    enemies.splice(i, 1);
                    score++;
                    document.getElementById('kills').innerText = score;
                }
            });
        }
    });

    document.getElementById('grenade-btn').addEventListener('touchstart', () => {

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5KB

Transfer Size

5KB

Content Size

56.0ms

Dom Content Loaded

104.0ms

First Paint

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