HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
16.1 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>Survival Strike Pro</title>
    <style>
        body { margin: 0; background: #1a3311; overflow: hidden; touch-action: none; font-family: 'Arial Black', sans-serif; }
        #ui { position: absolute; top: 10px; left: 10px; color: #fff; z-index: 100; pointer-events: none; }
        #health-bar { width: 180px; height: 15px; background: #551111; border: 2px solid white; border-radius: 10px; margin-top: 5px; }
        #health-inner { width: 100%; height: 100%; background: #00ff00; border-radius: 8px; transition: 0.1s; }
        #status { position: absolute; top: 50%; width: 100%; text-align: center; color: #ffcc00; font-size: 35px; text-shadow: 3px 3px #000; z-index: 100; font-weight: bold; }
        canvas { display: block; }
    </style>
</head>
<body>
    <div id="ui">
        KILLS: <span id="score">0</span> | ALIVE: <span id="alive">20</span>
        <div id="health-bar"><div id="health-inner"></div></div>
    </div>
    <div id="status">BOARDING PLANE...</div>
    <canvas id="gameCanvas"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreText = document.getElementById('score');
    const aliveText = document.getElementById('alive');
    const healthInner = document.getElementById('health-inner');
    const statusText = document.getElementById('status');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let score = 0;
    let health = 100;
    let gameState = "plane"; 
    let planeX = -200;
    let player = { x: 0, y: 0, landed: false };
    let enemies = [];
    let bullets = [];
    let enemyBullets = [];
    let flash = false;

    function drawSoldier(x, y, color, isEnemy = false) {
        ctx.save();
        ctx.translate(x, y);
        // Body
        ctx.fillStyle = color;
        ctx.fillRect(-15, -15, 30, 30);
        // Head
        ctx.fillStyle = "#D2B48C";
        ctx.beginPath(); ctx.arc(0, -20, 10, 0, Math.PI * 2); ctx.fill();
        // Eyes
        ctx.fillStyle = "white";
        ctx.beginPath(); ctx.arc(-4, -22, 3, 0, Math.PI * 2); ctx.arc(4, -22, 3, 0, Math.PI * 2); ctx.fill();
        // Gun
        ctx.fillStyle = "#222";
        ctx.fillRect(10, -5, 30, 8);
        ctx.restore();
    }

    function spawnEnemy() {
        return { 
            x: Math.random() * canvas.width, 
            y: Math.random() * (canvas.height - 100), 
            vx: (Math.random() - 0.5) * 3,
            vy: (Math.random() - 0.5) * 3,
            timer: Math.random() * 50
        };
    }

    function animate() {
        ctx.fillStyle = "#346e2a"; // Grass Color
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        if (gameState === "plane") {
            // Drawing Airplane
            ctx.fillStyle = "#silver";
            ctx.fillRect(planeX, 100, 200, 50); 
            ctx.fillStyle = "darkgray";
            ctx.fillRect(planeX+50, 80, 20, 90); 
            planeX += 4;
            statusText.innerText = "TAP TO EJECT!";
            if(planeX > canvas.width + 200) planeX = -200; // Loop plane
        }

        if (gameState === "parachute") {
            statusText.innerText = "LANDING...";
            // Parachute
            ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo(player.x, player.y); ctx.lineTo(player.x-30, player.y-40); ctx.moveTo(player.x, player.y); ctx.lineTo(player.x+30, player.y-40); ctx.stroke();
            ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(player.x, player.y-45, 40, Math.PI, 0); ctx.fill();
            drawSoldier(player.x, player.y, "#1b4d3e");
            player.y += 2.5;
            if(player.y > canvas.height - 150) {
                gameState = "fight";
                statusText.innerText = "";
                for(let i=0; i<20; i++) enemies.push(spawnEnemy());
            }
        }

        if (gameState === "fight") {
            drawSoldier(player.x, player.y, "#1b4d3e");

            // Enemy Logic
            enemies.forEach((en, index) => {
                drawSoldier(en.x, en.y, "#881111", true);
                en.x += en.vx; en.y += en.vy;
                if(en.x < 0 || en.x > canvas.width) en.vx *= -1;
                if(en.y < 0 || en.y > canvas.height - 100) en.vy *= -1;

                // Enemy shoots at player
                en.timer++;
                if(en.timer > 100) {
                    enemyBullets.push({x: en.x, y: en.y, targetX: player.x, targetY: player.y});
                    en.timer = 0;
                }
            });

            // Enemy Bullets
            enemyBullets.forEach((b, idx) => {
                ctx.fillStyle = "yellow";
                ctx.beginPath(); ctx.arc(b.x, b.y, 4, 0, Math.PI*2); ctx.fill();
                let angle = Math.atan2(player.y - b.y, player.x - b.x);
                b.x += Math.cos(angle) * 5;
                b.y += Math.sin(angle) * 5;

                if(Math.hypot(b.x-player.x, b.y-player.y) < 20) {
                    health -= 5;
                    healthInner.style.width = health + "%";
                    enemyBullets.splice(idx, 1);
                    if(health <= 0) location.reload(); // Restart on death
                }
            });
        }
        requestAnimationFrame(animate);
    }

    window.addEventListener('mousedown', (e) => {
        if (gameState === "plane") {
            player.x = planeX + 100;
            player.y = 150;
            gameState = "parachute";
        } else if (gameState === "fight") {
            flash = true; setTimeout(()=>flash=false, 50);
            enemies.forEach((en, idx) => {
                if(Math.hypot(e.clientX-en.x, e.clientY-en.y) < 35) {
                    enemies.splice(idx, 1);
                    score++;
                    scoreText.innerText = score;
                    aliveText.innerText = enemies.length;
                    if(enemies.length === 0) statusText.innerText = "BOOYAH!";
                }
            });
        }
    });

    animate();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
6KB
Transfer Size
6KB
Content Size
115.0ms
Dom Content Loaded
188.0ms
First Paint
115.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