sem-titulo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo Pong Clássico</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #111;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        h1 {
            margin-bottom: 10px;
            font-size: 24px;
            letter-spacing: 2px;
        }
        canvas {
            border: 4px solid white;
            background-color: black;
            box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
        }
        p {
            margin-top: 15px;
            font-size: 14px;
            color: #888;
        }
    </style>
</head>
<body>

    <h1>PONG</h1>
    <canvas id="pongCanvas" width="800" height="400"></canvas>
    <p>Use as setas [Seta para Cima] e [Seta para Baixo] para mover a sua raquete.</p>

    <script>
        const canvas = document.getElementById("pongCanvas");
        const ctx = canvas.getContext("2d");

        // Configurações do Jogo
        const paddleWidth = 10;
        const paddleHeight = 80;
        const ballRadius = 7;

        // Jogador (Esquerda)
        const player = {
            x: 10,
            y: canvas.height / 2 - paddleHeight / 2,
            score: 0
        };

        // Computador (Direita)
        const computer = {
            x: canvas.width - 20,
            y: canvas.height / 2 - paddleHeight / 2,
            score: 0,
            speed: 3.5 // Velocidade de reação da IA
        };

        // Bola
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            speedX: 5,
            speedY: 5
        };

        // Controles do jogador
        let upPressed = false;
        let downPressed = false;

        document.addEventListener("keydown", (e) => {
            if (e.key === "ArrowUp") upPressed = true;
            if (e.key === "ArrowDown") downPressed = true;
        });

        document.addEventListener("keyup", (e) => {
            if (e.key === "ArrowUp") upPressed = false;
            if (e.key === "ArrowDown") downPressed = false;
        });

        // Reiniciar bola no centro após ponto
        function resetBall() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.speedX = -ball.speedX; // Inverte quem começa sacando
            // Mantém a velocidade base inicial estável
            ball.speedX = ball.speedX > 0 ? 5 : -5;
            ball.speedY = (Math.random() > 0.5 ? 1 : -1) * 4;
        }

        // Desenhar elementos na tela
        function draw() {
            // Limpar tela
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Linha central pontilhada
            ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
            ctx.lineWidth = 2;
            ctx.setLineDash([10, 10]);
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height);
            ctx.stroke();
            ctx.setLineDash([]); // Reseta estilo de linha

            // Placar
            ctx.fillStyle = "white";
            ctx.font = "32px 'Courier New'";
            ctx.fillText(player.score, canvas.width / 4, 50);
            ctx.fillText(computer.score, (canvas.width * 3) / 4, 50);

            // Raquete do Jogador
            ctx.fillStyle = "white";
            ctx.fillRect(player.x, player.y, paddleWidth, paddleHeight);

            // Raquete do Computador
            ctx.fillRect(computer.x, computer.y, paddleWidth, paddleHeight);

            // Bola
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.closePath();
        }

        // Atualizar lógica de movimentos e colisões
        function update() {
            // Mover jogador
            if (upPressed && player.y > 0) {
                player.y -= 6;
            }
            if (downPressed && player.y < canvas.height - paddleHeight) {
                player.y += 6;
            }

            // Mover IA (segue o eixo Y da bola de forma suave)
            let computerTarget = ball.y - paddleHeight / 2;
            if (computer.y < computerTarget) {
                computer.y += computer.speed;
            } else if (computer.y > computerTarget) {
                computer.y -= computer.speed;
            }

            // Impedir IA de sair da tela
            if (computer.y < 0) computer.y = 0;
            if (computer.y > canvas.height - paddleHeight) computer.y = canvas.height - paddleHeight;

            // Mover bola
            ball.x += ball.speedX;
            ball.y += ball.speedY;

            // Colisão da bola com teto e chão
            if (ball.y - ballRadius < 0 || ball.y + ballRadius > canvas.height) {
                ball.speedY = -ball.speedY;
            }

            // Colisão com a raquete do Jogador (Esquerda)
            if (ball.speedX < 0 && ball.x - ballRadius <= player.x + paddleWidth) {
                if (ball.y >= player.y && ball.y <= player.y + paddleHeight) {
                    ball.speedX = -ball.speedX;
                    // Aumenta levemente a velocidade para dar desafio
                    ball.speedX *= 1.05;
                }
            }

            // Colisão com a raquete do Computador (Direita)
            if (ball.speedX > 0 && ball.x + ballRadius >= computer.x) {
                if (ball.y >= computer.y && ball.y <= computer.y + paddleHeight) {
                    ball.speedX = -ball.speedX;
                    ball.speedX *= 1.05;
                }
            }

            // Pontuação
            if (ball.x - ballRadius < 0) {
                computer.score++;
                resetBall();
            } else if (ball.x + ballRadius > canvas.width) {
                player.score++;
                resetBall();
            }
        }

        // Loop principal do jogo
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        // Iniciar
        gameLoop();
    </script>
</body>
</html>