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); }