HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
31.3 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 Pro Clone</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; touch-action: none; font-family: 'Arial Black', sans-serif; }
        canvas { display: block; background: #2c3e50; }
        
        /* Gerçekçi UI Katmanı */
        #ui { position: absolute; inset: 0; pointer-events: none; }
        .showdown-text { position: absolute; top: 15px; width: 100%; text-align: center; color: white; font-size: 20px; text-shadow: 3px 3px #000; }
        .power-counter { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); color: #00ff00; font-size: 28px; text-shadow: 2px 2px #000; }
        
        /* Animasyonlu Butonlar */
        #joystick { position: absolute; bottom: 40px; left: 40px; width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 50%; border: 3px solid #fff; }
        #attack-btn { position: absolute; bottom: 40px; right: 40px; width: 80px; height: 80px; background: rgba(255,0,0,0.5); border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; color: white; font-size: 30px; pointer-events: auto; transition: transform 0.1s; }
        #attack-btn:active { transform: scale(0.9); background: rgba(255,0,0,0.8); }
    </style>
</head>
<body>

    <div id="ui">
        <div class="showdown-text">HAYATTA KALAN: <span id="alive">10</span></div>
        <div class="power-counter">⚡ <span id="p-count">0</span></div>
        <div id="joystick"></div>
        <div id="attack-btn">🎯</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 player = { x: canvas.width/2, y: canvas.height/2, hp: 3600, maxHp: 3600, power: 0, r: 25, anim: 0 };
        let bullets = [], enemies = [], boxes = [], particles = [];
        let survivors = 10;

        // Gerçekçi Harita Elemanları (Screenshot'taki kutular)
        function createMap() {
            for(let i=0; i<10; i++) {
                boxes.push({ x: Math.random()*canvas.width, y: Math.random()*canvas.height, hp: 1500, size: 50 });
            }
        }

        // Animasyonlu Karakter Çizimi
        function drawBrawler(x, y, color, r, hp, maxHp, power) {
            // Karakter Altı Halka (Mavi/Kırmızı)
            ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
            ctx.beginPath(); ctx.arc(x, y, r + 12, 0, Math.PI*2); ctx.fill();
            
            // Karakter Gövdesi (Yürüme efekti için hafif sallantı)
            let bounce = Math.sin(Date.now() / 150) * 3;
            ctx.fillStyle = color;
            ctx.beginPath(); ctx.arc(x, y + bounce, r, 0, Math.PI*2); ctx.fill();
            ctx.strokeStyle = "#000"; ctx.lineWidth = 3; ctx.stroke();

            // Gerçekçi Can Barı
            let barW = 60, barH = 10;
            ctx.fillStyle = "#000"; ctx.fillRect(x - barW/2, y - r - 25, barW, barH);
            ctx.fillStyle = "#2ecc71"; ctx.fillRect(x - barW/2, y - r - 25, (hp/maxHp)*barW, barH);
            
            // İsim ve Güç Puanı
            ctx.fillStyle = "#fff"; ctx.font = "12px Arial Black";
            ctx.textAlign = "center";
            ctx.fillText("SEN (⚡"+power+")", x, y - r - 30);
        }

        document.getElementById("attack-btn").addEventListener("touchstart", (e) => {
            // En yakın hedefe ateş et
            bullets.push({ x: player.x, y: player.y, dx: 12, dy: 0, dmg: 800 + (player.power*100) });
            createEffect(player.x, player.y, "#fff");
        });

        // Dokunmatik Hareket
        window.addEventListener("touchmove", (e) => {
            let t = e.touches[0];
            player.x += (t.clientX - player.x) * 0.15;
            player.y += (t.clientY - player.y) * 0.15;
        });

        function createEffect(x, y, c) {
            for(let i=0; i<8; i++) {
                particles.push({x:x, y:y, dx:(Math.random()-0.5)*10, dy:(Math.random()-0.5)*10, l:1, c:c});
            }
        }

        function update() {
            ctx.fillStyle = "#3e8e41"; // Çimen zemin
            ctx.fillRect(0,0,canvas.width, canvas.height);

            // Kutuları Çiz (Screenshot'taki turuncu kutular)
            boxes.forEach((box, i) => {
                ctx.fillStyle = "#e67e22";
                ctx.fillRect(box.x-25, box.y-25, box.size, box.size);
                ctx.strokeStyle = "#d35400"; ctx.lineWidth = 4;
                ctx.strokeRect(box.x-25, box.y-25, box.size, box.size);
                
                bullets.forEach((b, bi) => {
                    if(b.x > box.x-25 && b.x < box.x+25 && b.y > box.y-25 && b.y < box.y+25) {
                        box.hp -= b.dmg;
                        bullets.splice(bi, 1);
                        if(box.hp <= 0) {
                            boxes.splice(i, 1);
                            player.power++;
                            document.getElementById("p-count").innerText = player.power;
                            createEffect(box.x, box.y, "#00ff00");
                        }
                    }
                });
            });

            // Mermiler
            bullets.forEach((b, i) => {
                b.x += b.dx; b.y += b.dy;
                ctx.fillStyle = "#ffff00";
                ctx.beginPath(); ctx.arc(b.x, b.y, 8, 0, Math.PI*2); ctx.fill();
                if(b.x > canvas.width) bullets.splice(i, 1);
            });

            // Parçacık Efektleri
            particles.forEach((p, i) => {
                p.x += p.dx; p.y += p.dy; p.l -= 0.05;
                ctx.globalAlpha = p.l;
                ctx.fillStyle = p.c;
                ctx.fillRect(p.x, p.y, 5, 5);
                if(p.l <= 0) particles.splice(i, 1);
            });
            ctx.globalAlpha = 1;

            drawBrawler(player.x, player.y, "#3498db", player.r, player.hp, player.maxHp, player.power);

            requestAnimationFrame(update);
        }

        createMap();
        update();
    </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
125.0ms
Dom Content Loaded
200.0ms
First Paint
125.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