[Dúvida] Como criar colisão

Olá Mateus, bom dia.

Seguinte.... a resposta para resolver o problema, na minha solução é esta:

function colisaoRaqueteOponente(){
  if(xBolinha + raio > xRaqueteOponente && yBolinha > yRaqueteOponente && yBolinha < yRaqueteOponente + alturaRaquete){
    velocidadeXBolinha = -4;
  }
}

os problemas eram que: 1º - na primeira verificação do IF você estava SOMANDO a larguraRaquete com a posição xRaquete, e isto esta errado... pois a criação do retângulo se da a partir do canto superior esquerdo, então não é preciso somar a largura da raquete, pois a posicao xRaquete já é a borda da esquerda da raquete. (então usamos só xRaqueteOponente)

2º - subtrair o raio da xBolinha (na primeira condição (xBolinha - raio) ) pois o circulo é criado a partir do meio, então se vc tirar o raio da bolinha vc vai estar "olhando" para a borda ESQUERDA da bolinha, que não é o caso, vc quer "olhar" para a posição da borda direita da bolinha, então é necessário SOMAR o raio a posição CENTRAL da bolinha.

3º As duas verificações da posições Y também estavam erradas e o modo correto é até mais simples... você só precisa verificar se o yBolinha é MAIOR q a posição inicial da raquete (yRaqueteOponente) e se o yBolinha é MENOR que a posição MAXIMA da raquete ou seja = yRaqueteOponente + alturaRaquete

por fim não sei exatamente como você vai fazer a atualização da posição Y da raquete do oponente... pra mim testar eu usei yRaqueteOponente = mouseY; dentro da função raqueteOponete(), seja lá como você for fazer, só lembresse de atualizar o valor yRaqueteOponente, para que dentro da função de colisão ele esteja correto!

Por fim(2, rs) para descobrir tudo isso eu utilizei da função text()... colocando os valores xBolinha, xRaqueteOpoente, etc, etc... todos plotados na tela... e ai fui verificando os valores....

áá! também mexi na velocidade da bolinha... velocidadeXBolinha = -4; quando colide com a raquete do oponente e velocidadeXBolinha = 4 quando colide com a raquete do jogador!!!

Espero ter ajudado... ficou claro a minha resposta???

Olá Flávio!!

Eu li e reli sua explicação umas 273 vezes e não consigo entender até agora como você chegou nesse resultado. Mas de qualquer forma funcionou no meu projeto, já que eu não consegui importar a biblioteca como ensina na aula e tive que quebrar a cabeça pra descobrir como criar a colisão do oponente, uma vez que apenas duplicando a função e alterando x e y para xOponente e yOponente não funcionava e a bolinha ficava toda bugada no meio da tela. Dito isso, muito obrigado!!

Olhando o código parte por parte: No que diz respeito a posição X da bolinha!

//Primeira condição do seu código
if(xBolinha - raio > xRaqueteOponente + larguraRaquete 
//meu código
if(xBolinha + raio > xRaqueteOponente 

xBolinha MENOS raio é a posição da BORDA ESQUERDA da bolinha, por isso o certo é xBolinha MAIS raio. xRaqueteOponente já é a posição da BORDA ESQUERDA da raquete, então não devemos somar a largura(Diferente da raquete que está do outro lado da tela, nessa é necessario somar sim!) Quanto a posição Y da Bolinha!!!

//segunda condição
&& yRaqueteOponente - alturaRaquete < yBolinha - raio 
//meu código
&& yBolinha > yRaqueteOponente 

yRaqueteOponente é o canto SUPERIOR ESQUERDO da raquete... então a bolinha tem que estar numa posição MAIOR que este ponto!!

//última condição
yRaqueteOponente + alturaRaquete < yBolinha + raio){
//meu código
yBolinha < yRaqueteOponente + alturaRaquete){

a bolinha tem que estar numa posição MAIOR que o inicio da raquete(condição passada) e MENOR que o fim da raquete (yRaqueteOponente + alturaRaquete)