Untitled Game

            canvas.addEventListener('mousemove', function(evt) {
                const mousePos = calculateMousePos(evt);
                paddle1Y = mousePos.y - (PADDLE_HEIGHT / 2);
            });

            // Clique do mouse para reiniciar o jogo quando alguém vencer
            canvas.addEventListener('mousedown', function(evt) {
                if (showingWinScreen) {
                    player1Score = 0;
                    player2Score = 0;
                    showingWinScreen = false;
                }
            });
        };

        // Reseta a bola para o centro após um ponto
        function ballReset() {
            if (player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
                showingWinScreen = true;
            }
            ballSpeedX = -ballSpeedX;
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
        }

        // Movimentação automática da raquete do computador (IA simples)
        function computerMovement() {
            const paddle2YCenter = paddle2Y + (PADDLE_HEIGHT / 2);
            if (paddle2YCenter < ballY - 35) {
                paddle2Y += 6;
            } else if (paddle2YCenter > ballY + 35) {
                paddle2Y -= 6;
            }
        }

        // Lógica de movimentos e colisões
        function moveEverything() {
            if (showingWinScreen) {
                return;
            }

            computerMovement();

            ballX += ballSpeedX;
            ballY += ballSpeedY;

            // Colisão com a raquete esquerda (Jogador) ou pontuação da IA
            if (ballX < 0) {
                if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
                    ballSpeedX = -ballSpeedX;
                    
                    // Altera o ângulo baseado em onde a bola bateu na raquete
                    const deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
                    ballSpeedY = deltaY * 0.35;
                } else {
                    player2Score++; // Ponto para o computador
                    ballReset();
                }
            }

            // Colisão com a raquete direita (Computador) ou pontuação do Jogador
            if (ballX > canvas.width) {
                if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
                    ballSpeedX = -ballSpeedX;

                    // Altera o ângulo baseado em onde a bola bateu na raquete
                    const deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
                    ballSpeedY = deltaY * 0.35;
                } else {
                    player1Score++; // Ponto para o jogador
                    ballReset();
                }
            }

            // Colisão com o topo ou fundo da tela
            if (ballY < 0 || ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
            }
        }

        // Desenha os elementos na tela
        function drawEverything() {
            // Fundo preto do jogo
            colorRect(0, 0, canvas.width, canvas.height, 'black');

            if (showingWinScreen) {
                canvasContext.fillStyle = 'white';
                canvasContext.font = "20px Arial";

                if (player1Score >= WINNING_SCORE) {
                    canvasContext.fillText("Você Venceu!", 340, 200);
                } else if (player2Score >= WINNING_SCORE) {
                    canvasContext.fillText("O Computador Venceu!", 300, 200);
                }

                canvasContext.fillText("Clique na tela para jogar novamente", 250, 500);
                return;
            }

            // Rede central pontilhada
            for (let i = 0; i < canvas.height; i += 40) {
                colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
            }

            // Raquete esquerda (Jogador)
            colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

            // Raquete direita (Computador)
            colorRect(canvas.width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

            // Bola quadrada (estilo clássico)
            colorRect(ballX, ballY, 10, 10, 'white');

            // Placar na tela
            canvasContext.font = "30px Arial";
            canvasContext.fillText(player1Score, 100, 100);
            canvasContext.fillText(player2Score, canvas.width - 140, 100);
        }

        // Função auxiliar para desenhar retângulos coloridos facilmente
        function colorRect(leftX, topY, width, height, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.fillRect(leftX, topY, width, height);
        }
    </script>
</body>
</html>