HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
12.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 lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Survival Shooter Game</title>
    <style>
        body { margin: 0; background: #222; color: white; font-family: sans-serif; overflow: hidden; }
        canvas { display: block; background: #111; }
        #ui { position: absolute; top: 10px; left: 10px; font-size: 24px; font-weight: bold; pointer-events: none; }
        #gameOver { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(0,0,0,0.85); padding: 30px; border-radius: 10px; box-shadow: 0 0 20px red; }
        button { padding: 12px 25px; font-size: 18px; cursor: pointer; border: none; background: #ff4757; color: white; border-radius: 50px; font-weight: bold; margin-top: 15px; }
        button:hover { background: #ff6b81; }
    </style>
</head>
<body>
    <div id="ui">Score: <span id="score">0</span></div>
    <div id="gameOver">
        <h2 style="color: #ff4757; margin: 0 0 10px 0;">GAME OVER</h2>
        <p style="font-size: 18px;">आपका स्कोर: <span id="finalScore">0</span></p>
        <button onclick="resetGame()">फिर से खेलें</button>
    </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, radius: 15, color: '#2ed573', speed: 5 };
        let bullets = [];
        let enemies = [];
        let score = 0;
        let gameOver = false;
        let keys = {};

        window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
        window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);
        window.addEventListener('click', shoot);

        function shoot(e) {
            if(gameOver) return;
            // माउस की दिशा में गोली चलाने के लिए एंगल
            const angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
            bullets.push({
                x: player.x,
                y: player.y,
                vx: Math.cos(angle) * 8,
                vy: Math.sin(angle) * 8,
                radius: 5,
                color: '#ffa500'
            });
        }

        function spawnEnemy() {
            if(gameOver) return;
            let x, y;
            // दुश्मन स्क्रीन के कोनों से बाहर स्पॉन होंगे
            if (Math.random() < 0.5) {
                x = Math.random() < 0.5 ? 0 : canvas.width;
                y = Math.random() * canvas.height;
            } else {
                x = Math.random() * canvas.width;
                y = Math.random() < 0.5 ? 0 : canvas.height;
            }
            enemies.push({ x, y, radius: 12, color: '#ff4757', speed: 1.5 + Math.random() * 1.5 });
            
            // स्कोर बढ़ने के साथ दुश्मन तेजी से आएंगे
            setTimeout(spawnEnemy, Math.max(400, 1500 - score * 5));
        }

        function update() {
            if(gameOver) return;

            // प्लेयर मूवमेंट (WASD या Arrow Keys)
            if(keys['w'] || keys['arrowup']) player.y -= player.speed;
            if(keys['s'] || keys['arrowdown']) player.y += player.speed;
            if(keys['a'] || keys['arrowleft']) player.x -= player.speed;
            if(keys['d'] || keys['arrowright']) player.x += player.speed;

            // बाउंड्री लिमिट
            player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));
            player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));

            // गोलियों को अपडेट करना
            bullets.forEach((b, index) => {
                b.x += b.vx;
                b.y += b.vy;
                if(b.x < 0 || b.x > canvas.width || b.y < 0 || b.y > canvas.height) {
                    bullets.splice(index, 1);
                }
            });

            // दुश्मनों को अपडेट करना
            enemies.forEach((enemy, eIndex) => {
                // दुश्मन प्लेयर का पीछा करेंगे
                const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
                enemy.x += Math.cos(angle) * enemy.speed;
                enemy.y += Math.sin(angle) * enemy.speed;

                // प्लेयर से टक्कर चेक करना
                const distToPlayer = Math.hypot(player.x - enemy.x, player.y - enemy.y);
                if(distToPlayer - enemy.radius - player.radius < 1) {
                    gameOver = true;
                    document.getElementById('gameOver').style.display = 'block';
                    document.getElementById('finalScore').innerText = score;
                }

                // गोली से टक्कर चेक करना
                bullets.forEach((bullet, bIndex) => {
                    const distToBullet = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
                    if(distToBullet - enemy.radius - bullet.radius < 1) {
                        enemies.splice(eIndex, 1);
                        bullets.splice(bIndex, 1);
                        score += 10;
                        document.getElementById('score').innerText = score;
                    }
                });
            });
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // प्लेयर बनाना
            ctx.beginPath();
            ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2);
            ctx.fillStyle = player.color;
            ctx.fill();

            // गोलियां बनाना
            bullets.forEach(b => {
                ctx.beginPath();
                ctx.arc(b.x, b.y, b.radius, 0, Math.PI*2);
                ctx.fillStyle = b.color;
                ctx.fill();
            });

            // दुश्मन बनाना
            enemies.forEach(e => {
                ctx.beginPath();
                ctx.arc(e.x, e.y, e.radius, 0, Math.PI*2);
                ctx.fillStyle = e.color;
                ctx.fill();
            });
        }

        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        function resetGame() {
            player.x = canvas.width / 2;
            player.y = canvas.height / 2;
            bullets = [];
            enemies = [];
            score = 0;
            gameOver = false;
            document.getElementById('score').innerText = score;
            document.getElementById('gameOver').style.display = 'none';
        }

        spawnEnemy();
        gameLoop();

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </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
106.0ms
Dom Content Loaded
124.0ms
First Paint
106.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