Oi João, tudo bem?
Entendo que esteja passando por dificuldades em seu projeto, mas não se preocupe, estamos aqui para te ajudar.
Pelo que você descreveu, parece que o problema está na implementação do p5collide2d.js, que é uma biblioteca usada para detecção de colisões. Como você mencionou que não conseguiu implantá-lo nos seus códigos, acredito que seja essa a causa dos problemas que você está enfrentando.
A função collideRectCircle() que está sendo usada no código da aula é uma função dessa biblioteca. Ela verifica se um retângulo (neste caso, a raquete) e um círculo (a bolinha) estão colidindo.
function verificaColisaoRaquete(x, y) {
colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
if (colidiu){
velocidadeXBolinha *= -1;
}
}
Se a biblioteca não estiver corretamente implementada, essa função não será capaz de detectar a colisão, o que pode causar o comportamento estranho que você está vendo.
Para resolver isso, você precisa garantir que o p5collide2d.js está sendo corretamente importado e usado em seu projeto. Verifique se o arquivo p5collide2d.js está no mesmo diretório do seu arquivo .html e se você o está chamando corretamente no seu arquivo .html. Para isso, você deve ter uma linha semelhante a esta no cabeçalho do seu arquivo .html:
<script src="p5collide2d.min.js"></script>
Além disso, certifique-se de que essa linha está acima da linha onde você chama o seu arquivo .js principal.
Espero que essa informação ajude a resolver o problema. Lembre-se, a programação é um processo de aprendizado e é normal encontrar obstáculos ao longo do caminho. Continue persistindo!
Um abraço e bons estudos.
