HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
300x150
8.06 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, maximum-scale=1.0, user-scalable=no">
    <title>Brawl Stars Clone</title>
    <style>
        body { margin: 0; overflow: hidden; background: #0b0b0b; touch-action: none; font-family: 'Arial Black', sans-serif; }
        
        /* Üst Arayüz */
        #top-ui {
            position: absolute; top: 15px; width: 100%; display: flex;
            justify-content: space-around; pointer-events: none;
        }
        .stat-box { background: rgba(0,0,0,0.6); padding: 8px 15px; border-radius: 12px; border: 2px solid #fff; color: white; }
        
        /* Can ve Ulti Barı (Alt Orta) */
        #bottom-ui {
            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
            width: 200px; pointer-events: none;
        }
        .bar { width: 100%; height: 18px; border-radius: 9px; border: 3px solid #000; margin-bottom: 5px; overflow: hidden; background: #333; }
        #hp-fill { width: 100%; height: 100%; background: #45e032; transition: 0.2s; }
        #ulti-fill { width: 0%; height: 100%; background: #f9d71c; }

        canvas { display: block; background: #4c9e42; } /* Çim Rengi */

        /* Menü Ekranı */
        #menu {
            position: absolute; inset: 0; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10;
        }
        .btn-play {
            background: #ffcc00; color: #000; border: 4px solid #fff; padding: 20px 60px;
            font-size: 30px; border-radius: 20px; box-shadow: 0 8px 0 #b38f00; cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="menu">
        <h1 style="color: white; font-size: 50px; text-shadow: 4px 4px #000;">BRAWL MINI</h1>
        <button class="btn-play" onclick="startGame()">OYNA</button>
    </div>

    <div id="top-ui" class="hidden">
        <div class="stat-box">ELMAS: <span id="gem-count">0</span></div>
        <div class="stat-box">DÜŞMAN: <span id="enemy-count">0</span></div>
    </div>

    <div id="bottom-ui" class="hidden">
        <div class="bar"><div id="hp-fill"></div></div>
        <div class="bar"><div id="ulti-fill"></div></div>
    </div>

    <canvas id="gameCanvas"></canvas>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        let player, enemies = [], bullets = [], gems = [], gameRunning = false;

        function startGame() {
            document.getElementById("menu").style.display = "none";
            document.getElementById("top-ui").style.display = "flex";
            document.getElementById("bottom-ui").style.display = "block";
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            player = { x: canvas.width/2, y: canvas.height/2, hp: 4000, maxHp: 4000, ulti: 0, r: 25 };
            gameRunning = true;
            spawnEnemy();
            update();
        }

        window.addEventListener("touchstart", (e) => {
            if(!gameRunning) return;
            let t = e.touches[0];
            let ang = Math.atan2(t.clientY - player.y, t.clientX - player.x);
            
            // Atış Efekti
            if(player.ulti >= 100) {
                for(let i=0; i<10; i++) {
                    spawnBullet(player.x, player.y, (Math.PI*2/10)*i, true);
                }
                player.ulti = 0;
            } else {
                spawnBullet(player.x, player.y, ang, false);
            }
            
            // Yumuşak Hareket
            player.x += (t.clientX - player.x) * 0.3;
            player.y += (t.clientY - player.y) * 0.3;
        });

        function spawnBullet(x, y, a, s) {
            bullets.push({ x: x, y: y, dx: Math.cos(a)*12, dy: Math.sin(a)*12, super: s });
        }

        function spawnEnemy() {
            if(!gameRunning) return;
            enemies.push({ x: Math.random()*canvas.width, y: -50, hp: 1000, maxHp: 1000, r: 22 });
            setTimeout(spawnEnemy, 2000);
        }

        function update() {
            if(!gameRunning) return;
            // Zemini ve Kareleri Çiz (Brawl Stars yer karoları)
            ctx.fillStyle = "#4c9e42";
            ctx.fillRect(0,0,canvas.width, canvas.height);
            
            // Oyuncu Halkası
            ctx.fillStyle = "rgba(0, 150, 255, 0.4)";
            ctx.beginPath(); ctx.arc(player.x, player.y, player.r + 10, 0, Math.PI*2); ctx.fill();
            
            // Oyuncu (Shelly/Colt Mavisi)
            ctx.fillStyle = "#3498db";
            ctx.beginPath(); ctx.arc(player.x, player.y, player.r, 0, Math.PI*2); ctx.fill();
            ctx.strokeStyle = "#fff"; ctx.lineWidth = 3; ctx.stroke();

            // Düşmanlar
            enemies.forEach((e, i) => {
                let ang = Math.atan2(player.y - e.y, player.x - e.x);
                e.x += Math.cos(ang) * 2; e.y += Math.sin(ang) * 2;
                
                // Düşman Çizimi
                ctx.fillStyle = "#e74c3c";
                ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, Math.PI*2); ctx.fill();
                
                // Düşman Can Barı
                ctx.fillStyle = "black"; ctx.fillRect(e.x-20, e.y-40, 40, 6);
                ctx.fillStyle = "red"; ctx.fillRect(e.x-20, e.y-40, (e.hp/e.maxHp)*40, 6);

                bullets.forEach((b, bi) => {
                    if(Math.hypot(e.x-b.x, e.y-b.y) < 30) {
                        e.hp -= 250;
                        bullets.splice(bi, 1);
                        player.ulti = Math.min(100, player.ulti + 10);
                        if(e.hp <= 0) {
                            gems.push({x: e.x, y: e.y});
                            enemies.splice(i, 1);
                        }
                    }
                });

                if(Math.hypot(e.x-player.x, e.y-player.y) < 40) player.hp -= 10;
            });

            // Elmaslar (Mor Kristal)
            gems.forEach((g, i) => {
                ctx.fillStyle = "#9b59b6";
                ctx.beginPath(); ctx.arc(g.x, g.y, 10, 0, Math.PI*2); ctx.fill();
                if(Math.hypot(player.x-g.x, player.y-g.y) < 30) {
                    gems.splice(i,1);
                    document.getElementById("gem-count").innerText = parseInt(document.getElementById("gem-count").innerText)+1;
                }
            });

            // Mermiler
            bullets.forEach((b, i) => {
                b.x += b.dx; b.y += b.dy;
                ctx.fillStyle = b.super ? "#f1c40f" : "#fff";
                ctx.beginPath(); ctx.arc(b.x, b.y, b.super ? 12 : 7, 0, Math.PI*2); ctx.fill();
            });

            // UI Bar Güncelleme
            document.getElementById("hp-fill").style.width = (player.hp / player.maxHp * 100) + "%";
            document.getElementById("ulti-fill").style.width = player.ulti + "%";
            document.getElementById("enemy-count").innerText = enemies.length;

            if(player.hp <= 0) {
                alert("OYUN BİTTİ! Toplanan Elmas: " + document.getElementById("gem-count").innerText);
                location.reload();
            }

            requestAnimationFrame(update);
        }
    </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
90.0ms
Dom Content Loaded
192.0ms
First Paint
90.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