Oii Maria, tudo bem?

Para a verificação da colisão da bolinha com as raquetes, eu sugiro que você utilize a biblioteca p5.collide2d. As bibliotecas são conjuntos de códigos que resolvem problemas comuns e podem nos ajudar muito em situações assim.

Para realizar a importação da biblioteca, podemos realizar o seguinte passo a passo:

• Ir para https://editor.p5js.org/,
• Clicar em ”Help & Feedback > Reference > Libraries";
• Buscar por "p5.collide2d";
• Acessar o repositório no Github da Biblioteca;
• Selecionar o arquivo "p5.collide2d.js";
• Fazer o download desse código zipado;
• Descompactar o zip em uma pasta de sua preferência;
• No p5.js, clicar em "project folder";
• Selecionar "Upload file";
• Adicionar o arquivo "p5.collide2d.js" ;
• Clicar em "Open";
• Adicionar <script src="p5.collide2d.js"></script> ao index.html, para que nosso arquivo seja lido.

O próximo passo é substituir a função verificaColisaoRaquete(). Exclua o seguinte trecho:

function verificaColisaoRaquete(){
  if (xBolinha - raio < xRaquete + raqueteComprimento && 
      yBolinha - raio < yRaquete + raqueteAltura && 
      yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1;
  }
}

E, no mesmo lugar, cole esse trecho. Essa função foi construída a partir da documentação da biblioteca que baixamos e reconhece a colisão entre círculos e retângulos:

function verificaColisaoRaquete(x, y) {
    colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
    if (colidiu) {
        velocidadeXBolinha *= -1;   
    }
}

Assim a colisão deve acontecer como esperado.

Percebi também que seu placar não está marcando pontos! Para isso, é só chamar a função marcaPonto() dentro da função draw(), no começo do código.

Me conta se funcionou, Maria! Se ficar alguma dúvida, estou a disposição.

Forte abraço.

Boa tarde, tudo bem?

Acredito que tenha algum problema no meu p5, vou no mesmo local ensinado em aula para colocar o aquivo do Git e os sons e não tem a opção de fazer o envio do aquivo, conforme print .

O que faço nesse caso? estou com a conta logada já tudo certinho.

Oi Maria! Desculpe pela demora.

Confirma pra mim se é esse caminho que você tá fazendo, por favor?

Abraço!

boa tarde, tudo bem?

Quando vou abrir o arquivo aparece isso Também não consigo upar no p5, pois aparece esse erro.

Oii Maria! Espero que você esteja bem.

Pela segunda imagem, parece que você está tentando upar o arquivo zipado! O P5.JS não reconhece esse tipo de arquivo. Para conseguir fazer o upload, é necessário extrair os arquivos.

Para fazer a extração, clique no arquivo .zip (que tem o ícone de três livros coloridos trancados com um cinto) com o botão direito do mouse. No menu que aparecer, selecione "extrair aqui". Uma nova pasta será criada, e o arquivo a ser selecionado deve ser o que tem .js no final.

Caso mesmo assim não funcione, é possível fazer a colisão sem utilizar a biblioteca com alguns ajustes no código.

• Na função draw(), retire os parâmetros de verificaColisaoRaquete() e chame a função apenas uma vez. Adicione a função verificaColisaoOponente():

  function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete,yRaquete);
  movimentaMinhaRaquete();
  verificaColisaoRaquete();
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();    
  incluiPlacar();
  verificaColisaoOponente();
  }

• Crie a função verificaColisaoOponente():

  function verificaColisaoOponente(){
    if (xBolinha + raio > xRaqueteOponente 
        && yBolinha + raio > yRaqueteOponente && yBolinha - raio < yRaqueteOponente + raqueteAltura){ 
        velocidadeXBolinha *= -1;
    }
  }

Como estamos trabalhando no plano cartesiano, é necessário mudar os operadores na função para podermos comparar as localizações da bolinha e das raquetes exatamente. Sendo assim, o uso de parâmetros acaba não sendo o mais recomendado nessa função que criamos. Perceba que na verificaColisaoOponente adicionamos o x da bolinha ao raio e desprezamos o valor do comprimento da raquete, diferente da verificaColisaoRaquete, em que diminuímos o valor do raio e ainda precisamos comparar com o comprimento da raquete, já que estão em posições diferentes.

Assim a colisão deve funcionar corretamente nas duas raquetes.

Espero ter ajudado, Maria! Me conte se deu certo. Estou a disposição.

Forte abraço!