- tuvaper8

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Juego de Vaper</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
    <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 - 50,
            width: 50,
            height: 50,
            speed: 5,
            bullets: 10,
            lives: 3
        };

        let monsters = [];
        let bullets = [];
        let keys = {};
        let screenCount = 0;
        const maxScreens = 16;

        function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

        function drawBullets() {
            bullets.forEach(bullet => {
                ctx.fillStyle = 'white';
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
                bullet.y -= 10;
            });
        }

        function drawMonsters() {
            monsters.forEach(monster => {
                ctx.fillStyle = 'red';
                ctx.fillRect(monster.x, monster.y, monster.width, monster.height);
                monster.y += 2;
            });
        }

        function handleCollisions() {
            bullets = bullets.filter(bullet => {
                let hit = false;
                monsters = monsters.filter(monster => {
                    if (bullet.x < monster.x + monster.width &&
                        bullet.x + bullet.width > monster.x &&
                        bullet.y < monster.y + monster.height &&
                        bullet.height + bullet.y > monster.y) {
                        hit = true;
                        return false;
                    }
                    return true;
                });
                return !hit;
            });
        }

        function update() {
            if (keys['ArrowLeft'] && player.x > 0) {
                player.x -= player.speed;
            }
            if (keys['ArrowRight'] && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }
            drawPlayer();
            drawBullets();
            drawMonsters();
            handleCollisions();
            if (monsters.length === 0) {
                screenCount++;
                if (screenCount > maxScreens) {
                    alert('¡Ganaste!');
                    resetGame();
                } else {
                    spawnMonsters();
                }
            }
            requestAnimationFrame(update);
        }

        function spawnMonsters() {
            for (let i = 0; i < 5; i++) {
                monsters.push({
                    x: Math.random() * (canvas.width - 50),
                    y: Math.random() * -500,
                    width: 50,
                    height: 50
                });
            }
        }

        function shoot() {
            if (player.bullets > 0) {
                bullets.push({
                    x: player.x + player.width / 2 - 5,
                    y: player.y,
                    width: 10,
                    height: 20
                });
                player.bullets--;
            }
        }

        function resetGame() {
            player.lives = 3;
            player.bullets = 10;
            screenCount = 0;
            monsters = [];
            spawnMonsters();
        }

        document.addEventListener('keydown', (e) => {
            keys[e.key] = true;
            if (e.key === ' ') {
                shoot();
            }
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key] = false;
        });

        spawnMonsters();
        update();
    </script>
</body>
</html>