HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
600x1080
9.51 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Mini Survival Shooter</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #222;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            touch-action: none; /* Prevents screen scrolling on mobile */
        }
        canvas {
            background: #3b5323; /* Grass battlefield color */
            display: block;
            margin: 0 auto;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        #ui {
            position: absolute;
            top: 15px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
        }
        #gameOver {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.85);
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #ff4500;
            text-align: center;
        }
        #gameOver h2 {
            margin-top: 0;
            color: #ff4500;
            font-size: 36px;
        }
        button {
            padding: 12px 25px;
            font-size: 18px;
            background: #ff4500;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            font-weight: bold;
            margin-top: 15px;
        }
        button:hover {
            background: #ff5722;
        }
        #controls {
            position: absolute;
            bottom: 30px;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 30px;
        }
        .btn {
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            border: 3px solid white;
            color: white;
            font-size: 28px;
            user-select: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn:active {
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>

    <div id="ui">Score: <span id="score">0</span></div>
    
    <div id="gameOver">
        <h2>GAME OVER</h2>
        <p style="font-size: 20px;">Final Score: <span id="finalScore">0</span></p>
        <button onclick="restartGame()">Play Again</button>
    </div>

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

    <!-- Mobile Controls (Works with mouse clicks too) -->
    <div id="controls">
        <div class="btn" id="btnLeft">←</div>
        <div class="btn" id="btnFire">🔥</div>
        <div class="btn" id="btnRight">→</div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Setup Canvas size (Responsive)
        canvas.width = window.innerWidth > 600 ? 600 : window.innerWidth;
        canvas.height = window.innerHeight;

        // Game Variables
        let score = 0;
        let gameActive = true;
        let frameCount = 0;
        let difficultySpeed = 1;

        // Player Object
        const player = { x: canvas.width / 2 - 20, y: canvas.height - 150, w: 40, h: 40, speed: 6 };
        
        // Arrays to hold moving objects
        const bullets = [];
        const enemies = [];
        const hurdles = [];

        // Input Tracking
        let keys = { left: false, right: false };

        // Keyboard Controls
        window.addEventListener('keydown', e => {
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = true;
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = true;
            if (e.code === 'Space') shoot();
        });
        window.addEventListener('keyup', e => {
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = false;
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = false;
        });

        // Touch/Click Controls
        const btnLeft = document.getElementById('btnLeft');
        const btnRight = document.getElementById('btnRight');
        const btnFire = document.getElementById('btnFire');

        const pressLeft = () => keys.left = true;
        const releaseLeft = () => keys.left = false;
        const pressRight = () => keys.right = true;
        const releaseRight = () => keys.right = false;

        btnLeft.addEventListener('mousedown', pressLeft);
        btnLeft.addEventListener('mouseup', releaseLeft);
        btnLeft.addEventListener('touchstart', (e) => { e.preventDefault(); pressLeft(); });
        btnLeft.addEventListener('touchend', releaseLeft);

        btnRight.addEventListener('mousedown', pressRight);
        btnRight.addEventListener('mouseup', releaseRight);
        btnRight.addEventListener('touchstart', (e) => { e.preventDefault(); pressRight(); });
        btnRight.addEventListener('touchend', releaseRight);

        btnFire.addEventListener('mousedown', shoot);
        btnFire.addEventListener('touchstart', (e) => { e.preventDefault(); shoot(); });

        // Fire Bullet Function
        function shoot() {
            if (!gameActive) return;
            bullets.push({ 
                x: player.x + player.w / 2 - 5, 
                y: player.y, 
                w: 10, h: 20, speed: 12 
            });
        }

        // Spawn Enemies (Competitors) and Hurdles
        function spawnEntities() {
            // As score increases, spawn entities faster
            let spawnRate = Math.max(30, 80 - Math.floor(score / 50)); 
            
            if (frameCount % spawnRate === 0) {
                let isHurdle = Math.random() < 0.3; // 30% chance to be a hurdle
                let xPos = Math.random() * (canvas.width - 50);
                
                if (isHurdle) {
                    hurdles.push({ x: xPos, y: -50, w: 50, h: 50, speed: 3 * difficultySpeed });
                } else {
                    enemies.push({ x: xPos, y: -50, w: 40, h: 40, speed: 4 * difficultySpeed });
                }
            }
        }

        // Collision Detection Math
        function isColliding(rect1, rect2) {
            return !(rect2.x > rect1.x + rect1.w || 
                     rect2.x + rect2.w < rect1.x || 
                     rect2.y > rect1.y + rect1.h || 
                     rect2.y + rect2.h < rect1.y);
        }

        // Main Game Loop
        function update() {
            if (!gameActive) return;
            requestAnimationFrame(update);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            frameCount++;

            // Increase difficulty over time
            difficultySpeed = 1 + (score / 300);

            // Player Movement
            if (keys.left && player.x > 0) player.x -= player.speed;
            if (keys.right && player.x < canvas.width - player.w) player.x += player.speed;

            // Draw Player (Blue Square)
            ctx.fillStyle = '#00aaff';
            ctx.fillRect(player.x, player.y, player.w, player.h);

            // Move and Draw Bullets (Yellow)
            ctx.fillStyle = '#ffcc00';
            for (let i = bullets.length - 1; i >= 0; i--) {
                bullets[i].y -= bullets[i].speed;
                ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].w, bullets[i].h);
                if (bullets[i].y < 0) bullets.splice(i, 1); // Remove off-screen bullets
            }

            spawnEntities();

            // Move and Draw Enemies (Red Competitors)
            ctx.fillStyle = '#ff3333';
            for (let i = enemies.length - 1; i >= 0; i--) {
                let e = enemies[i];
                e.y += e.speed;
                ctx.fillRect(e.x, e.y, e.w, e.h);

                // Player hits enemy -> Game Over
                if (isColliding(player, e)) gameOver();

                // Bullet hits enemy
                for (let j = bullets.length - 1; j >= 0; j--) {
                    if (isColliding(bullets[j], e)) {
                        enemies.splice(i, 1);
                        bullets.splice(j, 1);
                        score += 10;
                        document.getElementById('score').innerText = score;
                        break;
                    }
                }
                if (e && e.y > canvas.height) enemies.splice(i, 1);
            }

            // Move and Draw Hurdles (Grey Blocks)
            ctx.fillStyle = '#888888';
            for (let i = hurdles.length - 1; i >= 0; i--) {
                let h = hurdles[i];
                h.y += h.speed;
                ctx.fillRect(h.x, h.y, h.w, h.h);

                // Player hits hurdle -> Game Over
                if (isColliding(player, h)) gameOver();
                
                // Bullet hits hurdle (Bullet destroyed, Hurdle survives!)
                for (let j = bullets.length - 1; j >= 0; j--) {
                    if (isColliding(bullets[j], h)) {
                        bullets.splice(j, 1); // Bullet is blocked
                    }
                }

                if (h.y > canvas.height) hurdles.splice(i, 1);
            }
        }

        function gameOver() {
            gameActive = false;
            document.getElementById('gameOver').style.display = 'block';
            document.getElementById('finalScore').innerText = score;
        }

        function restartGame() {
            score = 0;
            document.getElementById('score').innerText = score;
            bullets.length = 0;
            enemies.length = 0;
            hurdles.length = 0;
            player.x = canvas.width / 2 - 20;
            gameActive = true;
            document.getElementById('gameOver').style.display = 'none';
            update();
        }

        // Start Game
        update();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
10KB
Transfer Size
10KB
Content Size
127.0ms
Dom Content Loaded
140.0ms
First Paint
127.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