[Dúvida] Bolinha não colide com a raquete do oponente | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

let xBolinha = 300; let yBolinha = 200; let diametro = 22; let velocidadeXBolinha = 6; let velocidadeYBolinha = 6; let raio = diametro/2; let xRaquete = 5; let yRaquete = 150; let comprimentoRaquete = 10; let alturaRaquete = 90; let colidiu = false; let xRaqueteOponente = 585; let yRaqueteOponente = 150; let velocidadeYOponente;

function setup() { createCanvas(600, 400); }

function draw() { background(0); mostraBolinha() velocidadeDaBolinha() colisaoDaBolinha() mostraRaquete(xRaquete, yRaquete) movimentaRaquete() colisaoComRaquete() colisaoComRaqueteBlibioteca(xRaquete, yRaquete) mostraRaquete(xRaqueteOponente, yRaqueteOponente) movimentaRaqueteOponente() colisaoComRaqueteBlibioteca(xRaqueteOponente, yRaqueteOponente) } function mostraBolinha(){ circle(xBolinha, yBolinha,diametro )

}

function velocidadeDaBolinha(){ xBolinha += velocidadeXBolinha yBolinha += velocidadeYBolinha

}

function colisaoDaBolinha(){ if (xBolinha + raio > width || xBolinha - raio < 0){ velocidadeXBolinha *= -1 } if (yBolinha + raio > height || yBolinha - raio < 0){ velocidadeYBolinha *= - 1 } }

function mostraRaquete(x, y){ rect(x, y, comprimentoRaquete, alturaRaquete) }

function movimentaRaquete(){ if(keyIsDown (UP_ARROW)){ yRaquete -= 10 } if(keyIsDown (DOWN_ARROW)){ yRaquete += 10 } }

function colisaoComRaquete(){
  if(xBolinha - raio  < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1
  }  


  }

function colisaoComRaqueteBlibioteca(x, y){ collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio); if(colidiu){ velocidadeXbolinha *= -1; } }

function movimentaRaqueteOponente(){ velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete /2 - 30; yRaqueteOponente += velocidadeYOponente }

Olá, Vladimir! Tudo bem?

Notei que você não atribuiu a função da collide a variável colidiu, e foi isso que gerou o problema de comportamento inesperado. Além disso, o nome da variável velocidadeXBolinha estava trocado na sua função.

Vou deixar o código abaixo para você testar novamente:

let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
let raio = diametro/2;
let xRaquete = 5;
let yRaquete = 150; 
let comprimentoRaquete = 10; 
let alturaRaquete = 90;
let colidiu = false;
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha()
  velocidadeDaBolinha()
  colisaoDaBolinha()
  mostraRaquete(xRaquete, yRaquete)
  movimentaRaquete()
  //colisaoComRaquete()
  colisaoComRaqueteBiblioteca(xRaquete, yRaquete)
  mostraRaquete(xRaqueteOponente, yRaqueteOponente)
  movimentaRaqueteOponente()
  colisaoComRaqueteBiblioteca(xRaqueteOponente, yRaqueteOponente)
}
 function mostraBolinha(){
    circle(xBolinha, yBolinha,diametro )

 }


 function velocidadeDaBolinha(){
    xBolinha += velocidadeXBolinha 
    yBolinha += velocidadeYBolinha 

 }


 function colisaoDaBolinha(){
    if (xBolinha + raio > width || 
      xBolinha - raio < 0){
    velocidadeXBolinha *= -1
  }
  if (yBolinha + raio > height ||
     yBolinha - raio < 0){
    velocidadeYBolinha *= - 1
 }
 }


  function mostraRaquete(x, y){
    rect(x, y, comprimentoRaquete, alturaRaquete)
  }


   function movimentaRaquete(){
     if(keyIsDown (UP_ARROW)){
       yRaquete -= 10
     }
     if(keyIsDown (DOWN_ARROW)){
       yRaquete += 10
     }
   }



    function colisaoComRaquete(){
      if(xBolinha - raio  < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){
        velocidadeXBolinha *= -1
      }  


      }

 function colisaoComRaqueteBiblioteca(x, y){
   colidiu = collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);
   if(colidiu){
     velocidadeXBolinha *= -1;
   }
 }


 function movimentaRaqueteOponente(){
   velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete /2 - 30;
   yRaqueteOponente += velocidadeYOponente
 }

Também não esqueça de chamar a biblioteca da Collide2d no seu index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js"></script>

  </body>
</html>

Um abraço e bons estudos!