HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
300x150
493 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>Brawl Stars Mobile v2</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; font-family: 'Arial Black', sans-serif; touch-action: none; }
        canvas { display: block; }
        
        /* Arayüz Katmanları */
        #ui-layer { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .menu { pointer-events: auto; background: rgba(0,0,0,0.8); padding: 30px; border-radius: 20px; border: 4px solid #ffcc00; text-align: center; color: white; width: 80%; }
        
        /* Animasyonlar */
        @keyframes introLogo {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); }
        }
        .logo { font-size: 40px; color: #ffcc00; animation: introLogo 1.5s ease-out; margin-bottom: 20px; }
        
        button { background: #ffcc00; border: none; padding: 15px 30px; font-size: 20px; border-radius: 10px; cursor: pointer; font-weight: bold; margin: 10px; }
        .hidden { display: none !important; }
        #game-info { position: absolute; top: 10px; left: 10px; color: white; text-align: left; }
        #ulti-bar { width: 100px; height: 10px; background: #444; border: 2px solid #fff; border-radius: 5px; overflow: hidden; }
        #ulti-fill { height: 100%; width: 0%; background: yellow; transition: 0.2s; }
    </style>
</head>
<body>

    <!-- GİRİŞ VE LOBİ EKRANI -->
    <div id="ui-layer">
        <!-- Giriş Animasyonu -->
        <div id="intro" class="menu">
            <div class="logo">BRAWL STARS<br>MINI</div>
            <div style="color: #aaa;">Yükleniyor...</div>
        </div>

        <!-- Lobi / Karakter Seçimi -->
        <div id="lobby" class="menu hidden">
            <h2 style="color:#ffcc00">LOBİ</h2>
            <p>Karakterini Seç:</p>
            <button onclick="startGame('#00bfff', 'HIZLI')">MAVİ (Hızlı)</button>
            <button onclick="startGame('#ff44ff', 'GÜÇLÜ')" style="background: #ff44ff;">PEMBE (Güçlü)</button>
        </div>

        <!-- Oyun Bitti Ekranı -->
        <div id="game-over" class="menu hidden">
            <h1 style="color: red;">ELENDİN!</h1>
            <p>Skor: <span id="final-score">0</span></p>
            <button onclick="showLobby()">LOBİYE DÖN</button>
        </div>
    </div>

    <!-- Oyun İçi Bilgiler -->
    <div id="game-info" class="hidden">
        <div>SKOR: <span id="score-val">0</span></div>
        <div>ULTİ:</div>
        <div id="ulti-bar"><div id="ulti-fill"></div></div>
    </div>

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

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        let gameState = "INTRO";
        let score = 0, player, enemies = [], bullets = [];

        // Animasyon başlangıcı
        setTimeout(() => {
            document.getElementById("intro").classList.add("hidden");
            document.getElementById("lobby").classList.remove("hidden");
            gameState = "LOBBY";
        }, 2500);

        function showLobby() {
            document.getElementById("game-over").classList.add("hidden");
            document.getElementById("lobby").classList.remove("hidden");
            document.getElementById("game-info").classList.add("hidden");
            gameState = "LOBBY";
        }

        function startGame(color, type) {
            document.getElementById("lobby").classList.add("hidden");
            document.getElementById("game-info").classList.remove("hidden");
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            player = {
                x: canvas.width/2, y: canvas.height/2,
                color: color,
                r: 20,
                speed: type === 'HIZLI' ? 7 : 4,
                power: type === 'GÜÇLÜ' ? 2 : 1,
                ulti: 0
            };
            
            score = 0;
            enemies = [];
            bullets = [];
            gameState = "PLAYING";
            spawnEnemy();
            update();
        }

        function spawnEnemy() {
            if(gameState !== "PLAYING") return;
            enemies.push({
                x: Math.random() > 0.5 ? -30 : canvas.width + 30,
                y: Math.random() * canvas.height,
                r: 18,
                hp: 1
            });
            setTimeout(spawnEnemy, Math.max(400, 1200 - score));
        }

        window.addEventListener("touchstart", (e) => {
            if(gameState !== "PLAYING") return;
            let t = e.touches[0];
            
            // Ulti Kontrolü
            if(player.ulti >= 100) {
                for(let i=0; i<12; i++) {
                    let a = (Math.PI*2 / 12) * i;
                    bullets.push({x: player.x, y: player.y, dx: Math.cos(a)*10, dy: Math.sin(a)*10, s: 12});
                }
                player.ulti = 0;
            } else {
                let ang = Math.atan2(t.clientY - player.y, t.clientX - player.x);
                bullets.push({x: player.x, y: player.y, dx: Math.cos(ang)*8, dy: Math.sin(ang)*8, s: 6});
            }
            
            player.x = t.clientX;
            player.y = t.clientY;
        });

        function update() {
            if(gameState !== "PLAYING") return;
            ctx.fillStyle = "#2d5a27"; // Oyun alanı rengi
            ctx.fillRect(0,0,canvas.width, canvas.height);

            // Oyuncu
            ctx.fillStyle = player.color;
            ctx.beginPath(); ctx.arc(player.x, player.y, player.r, 0, Math.PI*2); ctx.fill();
            ctx.strokeStyle = "white"; ctx.stroke();

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

            // 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;
                
                ctx.fillStyle = "#ff4444";
                ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, Math.PI*2); ctx.fill();

                bullets.forEach((b, bi) => {
                    if(Math.hypot(e.x-b.x, e.y-b.y) < 25) {
                        enemies.splice(i, 1);
                        bullets.splice(bi, 1);
                        score += 10;
                        player.ulti = Math.min(100, player.ulti + 15);
                        document.getElementById("score-val").innerText = score;
                        document.getElementById("ulti-fill").style.width = player.ulti + "%";
                    }
                });

                if(Math.hypot(e.x-player.x, e.y-player.y) < 35) {
                    gameState = "GAMEOVER";
                    document.getElementById("game-over").classList.remove("hidden");
                    document.getElementById("final-score").innerText = score;
                }
            });

            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
78.0ms
Dom Content Loaded
128.0ms
First Paint
79.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