Oi, Hugo! Tudo bom?

Desde já, agradeço a paciência em aguardar uma resposta!

Para resolver o problema da bolinha presa na raquete, podemos utilizar o seguinte trecho de código, olha só:

function bolinhaNaoFicaPresa(){
    if (xBolinha - raio < 0){
      xBolinha = 25;
    } else if (xBolinha > width - raio) {
      xBolinha = width - 25
    }
}

Inicialmente, a primeira condicional verifica se xBolinha (coordenada horizontal do centro da bolinha) subtraído de raio é inferior a 0. Se isso for verdade, o valor de xBolinha passa a ser 25, evitando que ela fique presa.

A segunda estrutura condicional, por sua vez, assemelha-se a primeira: agora, verifica-se se xBolinha é superior ao width (comprimento da tela) subtraído do raio da própria bolinha — caso isso seja verdade, significa dizer que a bolinha está próxima da lateral direita da tela, sendo assim, alteramos o valor da sua posição horizontal para width - 25, que corresponde a 600 - 25 = 575.

Bacana, não acha? Dessa maneira, evitamos que a bolinha fique presa atrás das raquetes!

Espero que tenha compreendida a lógica por trás da função bolinhaNaoFicaPresa(). Caso ainda tenha alguma dúvida, fico à disposição para te ajudar!

Abraços, Hugo!