BOLINHA ATRAS DA RAQUETE!

Olá Evandro,

Então, esse problema para ser solucionado no seu código é bem Treta. Na aula o professor usa uma biblioteca externa para resolver.

Esse problema é classico: O programa detecta a colisão com a parede e muda a direção da bolinha, mas ai a bolinha colide com a barra, pela parte de traz gerando uma nova mudança de direção da bolinha e fica assim até que a bolinha encontre um ponto que não colida nem com a parede nem com a barra.

Uma forma de resolver no seu código é fazer uma ganbiarra:

Você cria uma variável boleana por exemplo controle e inicia ela com false. E toda vez que a bolinha colidir com uma parede controle passa para true. E vc coloca um teste antes de testar a colisão na barra, se controle for true vc não testa a colisão com a barra. E toda a vez que a bolinha passa por uma parte central da tela vc volta controle para false.

Essa solução é uma gambiarra, eu fiz aqui joguei um pouco e parece que resolver: Abaixo está p local que eu fiz as alterações para vc dar uma olhada:

let foraControle = false

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;

  if (xBolinha > 100 && xBolinha < 200) {
    foraControle = false;
  }
}

function verificaColisaoBorda(){
   if (xBolinha + raio > width || xBolinha - raio < 0){
      velocidadeXBolinha *= -1;
     foraControle = true;
    }

    if (yBolinha + raio > height || yBolinha - raio < 0) {
      velocidadeYBolinha *= -1
      foraControle = true;
    } 
}

function verificaColisaoRaquete(x, y){
  if (!foraControle) {
    colidiu = 
    collideRectCircle( x, y, comprimeitoRaquete, alturaRaquete, xBolinha , yBolinha , raio);
    if (colidiu){
      velocidadeXBolinha *= -1;
      raquetada.play();
    }
  }
}

function marcaPonto(){
  if (xBolinha > 590 ){
    meusPontos += 1;
    ponto.play();
    foraControle = true;
  }
  if (xBolinha < 7){
    pontosDoOponente +=1;
    ponto.play();
    foraControle = true;
  }
}

Espero ter ajudado.