

v


v


<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Breakout | Visual Studio Games</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
        html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #07071a; font-family: 'Orbitron', sans-serif; }
        .game-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; background: radial-gradient(ellipse at 50% 30%, #0d0d30 0%, #07071a 70%); }
        canvas { cursor: crosshair; display: block; max-width: 100%; max-height: 90%; border-radius: 8px; border: 2px solid #2299ff; box-shadow: 0 0 20px rgba(34, 153, 255, 0.3); touch-action: none; background: #000; }
        .ui-overlay { position: absolute; top: 20px; width: 480px; display: flex; justify-content: space-between; color: #fff; pointer-events: none; text-shadow: 0 0 10px #2299ff; }
    </style>
</head>
<body>
    <div class="game-wrap">
        <div class="ui-overlay">
            <div id="score-display">SCORE: 0</div>
            <div id="lives-display">LIVES: 3</div>
        </div>
        <canvas id="gc" width="480" height="560"></canvas>
    </div>

    <script>
        const cvs = document.getElementById('gc'), ctx = cvs.getContext('2d');
        const W = cvs.width, H = cvs.height;

        // Estado do Jogo
        let score = 0, lives = 3, level = 1, launched = false;
        let pad = { x: W/2, w: 90, h: 12 };
        let ball = { x: W/2, y: H-50, vx: 0, vy: 0, r: 7 };
        let bricks = [];

        // Cores Neon
        const COLORS = ['#ff4466', '#ffcc22', '#22ee66', '#2299ff', '#bb33ff'];

        function initBricks() {
            bricks = [];
            for(let r=0; r<5; r++) {
                for(let c=0; c<8; c++) {
                    bricks.push({
                        x: 35 + c*52,
                        y: 70 + r*25,
                        w: 45,
                        h: 18,
                        color: COLORS[r],
                        active: true
                    });
                }
            }
        }

        function resetBall() {
            launched = false;
            ball.x = pad.x;
            ball.y = H - 55;
            ball.vx = 0; ball.vy = 0;
        }

        // Input
        window.addEventListener('mousemove', e => {
            const rect = cvs.getBoundingClientRect();
            pad.x = (e.clientX - rect.left) * (W / rect.width);
            if(!launched) ball.x = pad.x;
        });

        window.addEventListener('click', () => {
            if(!launched) {
                launched = true;
                ball.vx = (Math.random() - 0.5) * 8;
                ball.vy = -7;
            }
        });

        function update() {
            if(launched) {
                ball.x += ball.vx;
                ball.y += ball.vy;

                // Colisão Paredes
                if(ball.x < ball.r || ball.x > W - ball.r) ball.vx *= -1;
                if(ball.y < ball.r) ball.vy *= -1;

                // Morte
                if(ball.y > H) {
                    lives--;
                    if(lives <= 0) {
                        alert("GAME OVER! Score: " + score);
                        score = 0; lives = 3; initBricks();
                    }
                    resetBall();
                }

                // Colisão Raquete
                if(ball.y + ball.r > H - 40 && ball.x > pad.x - pad.w/2 && ball.x < pad.x + pad.w/2) {
                    ball.vy = -Math.abs(ball.vy);
                    ball.vx = (ball.x - pad.x) / 8;
                }

                // Colisão Blocos
                bricks.forEach(b => {
                    if(b.active && ball.x > b.x && ball.x < b.x+b.w && ball.y > b.y && ball.y < b.y+b.h) {
                        b.active = false;
                        ball.vy *= -1;
                        score += 10;
                        document.getElementById('score-display').innerText = "SCORE: " + score;
                    }
                });
            }

            document.getElementById('lives-display').innerText = "LIVES: " + lives;
        }

        function draw() {
            // Limpar Tela
            ctx.fillStyle = '#07071a';
            ctx.fillRect(0, 0, W, H);

            // Grade de Fundo
            ctx.strokeStyle = 'rgba(34, 153, 255, 0.05)';
            for(let i=0; i<W; i+=30) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,H); ctx.stroke(); }

            // Desenhar Blocos
            bricks.forEach(b => {
                if(b.active) {
                    ctx.fillStyle = b.color;
                    ctx.shadowBlur = 10;
                    ctx.shadowColor = b.color;
                    ctx.fillRect(b.x, b.y, b.w, b.h);
                    ctx.shadowBlur = 0;
                }
            });

            // Raquete
            ctx.fillStyle = '#2299ff';
            ctx.shadowBlur = 15;
            ctx.shadowColor = '#2299ff';
            ctx.fillRect(pad.x - pad.w/2, H - 40, pad.w, pad.h);

            // Bola
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
            ctx.fill();
            ctx.shadowBlur = 0;

            if(!launched) {
                ctx.fillStyle = 'rgba(255,255,255,0.5)';
                ctx.textAlign = 'center';
                ctx.font = '14px Orbitron';
                ctx.fillText('CLIQUE PARA LANÇAR', W/2, H-100);
            }

            update();
            requestAnimationFrame(draw);
        }

        initBricks();
        draw();
    </script>
</body>
</html>