[Dúvida] As raquetes estão sendo atravessadas pela bolinha.

Olá Heberth, tudo joia?

Agradeço a paciência por aguardar uma resposta para o seu tópico.

Realizei alguns testes no seu projeto em questão, porém, nenhum momento a bolinha estava atravessando as raquetes, imagino que esse problema foi solucionado por você, por isso gostaria que você estivesse compartilhando com o fórum a sua solução, para que assim, outros alunos saibam como soluciona-lo.

Contudo, caso o fato de a bolinha estar atravessando as raquetes for por conta de a bolinha ficar presa entre a raquete e a parede, você pode estar solucionando isso usando o código que vou estar compartilhando com você.

function bolinhaNaoFicaPresa( ){
    if (xBolinha - raio <= 0){
    xBolinha = 20;

    } else {

      if (xBolinha - raio >= 588){
        xBolinha = 570;
      }
    }
}

Em suma, essa função vai estar realocando o posicionamento da bolinha quando estiver perto da posição do xBolinha endereçado na condição, isso vai estar acontecendo tanto para a sua raquete quanto para a raquete do oponente.

Além disso nas partes das variáveis das duas raquetes também fiz algumas alterações:

// variaveis do oponente
let xRaqueteOponente = 587;
let yRaqueteOponente = 150;

// variaveis da raquete
let x = 5;
let y = 147;

Como você pode ver, na variável xRaqueteOponente agora o valor é 587, e na variável y que representa o y da sua raquete agora passa a ter o valor 147.

Espero que eu tenha lhe ajudado, caso tenha alguma dúvida a mais vou estar a sua disposição. Abraços e bons estudos!