[Dúvida] Não bate na raquete

Oi Emanuel! Tudo bem por aí?

Para que a colisão funcione, é necessário algumas modificações. Vamos lá?

• Primeiramente, crie uma função específica para a colisão com as bordas:

function colisaoBorda(){
  if(xBola+raio>width){
    vellocidadeX=vellocidadeX *-1;
  }
  if(xBola-raio<0){
     vellocidadeX=vellocidadeX *-1;
  }
  if(yBola+raio>height ||
    yBola-raio<0){
     vellocidadeY=vellocidadeY *-1
  }
}

• Em seguida, modifique a função colisao da seguinte forma:

function verificaColisaoOponente(){
    if (xBola + raio > xRaquete
        && yBola - raio < yRaquete + compriRaquete && yBola + raio > yRaquete) {
        vellocidadeX *= -1;
    }
}

O nome foi alterado para verificaColisaoOponente, já que a mesma função não poderá ser utilizada para duas raquetes.

Inverti os sinais de operação, afinal a raquete está à direita e quanto mais a direita, maior o x. Também retirei a variável de tamanho da raquete da primeira condição, e adicionei outras condições que levam em consideração a altura da raquete e fazem com que a bolinha colida com a borda caso a raquete não esteja no mesmo lugar que ela.

• Por último, é indispensável chamar as funções de colisão dentro da função draw():

function draw() { //funçao para desenhar
  background(0);
  circle(xBola,yBola, tamanhoBola);//onde da bola vai iniciar (x,y,d)
  rect(xRaquete, yRaquete, largRaquete, compriRaquete);
  xBola=xBola +vellocidadeX; //movimentaçao da bola pelo X
 //yBola=yBola +vellocidadeY;  //movimentaçao da bola pelo y
   verificaColisaoOponente()
   colisaoBorda()
}

Percebi que, no seu código, a function draw() não está fechada antes da declaração da function colisao(). Isso faz com que uma função fique dentro da outra e em casos assim, o funcionamento do código passa por estratégias lógicas muito mais complexas. Como estamos iniciando a prática da lógica de programação como um conhecimento, é importante conhecermos e respeitarmos os padrões de utilização dos objetos de linguagem de programação, e as funções são um dos objetos de maior importância. Tendo isso em vista, recomendo que você crie funções também para a movimentação da bolinha e para desenhar a raquete e a bolinha na tela. Isso certamente economizará muita energia mental para desenvolver o jogo acompanhando os conceitos passados pelo instrutor.

Cada função começa e termina com as chaves ( { } ). Tudo o que estiver dentro das chaves é considerado o trecho de código que será executado na chamada da função que foi declarada.

O código completo ficou assim:

let xBola=300; //valor da horizontal
let yBola=210; //valor da vertical
let tamanhoBola=28;//diametro da bola

let xRaquete=580;
let yRaquete=190
let largRaquete=15;
let compriRaquete=90;

let raio=tamanhoBola/2;
let vellocidadeX=5
let vellocidadeY=5


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


function draw() { //funçao para desenhar
  background(0);
  circle(xBola,yBola, tamanhoBola);//onde da bola vai iniciar (x,y,d)
  rect(xRaquete, yRaquete, largRaquete, compriRaquete);
  xBola=xBola +vellocidadeX; //movimentaçao da bola pelo X
 // yBola=yBola +vellocidadeY;  //movimentaçao da bola pelo y
  colisaoBorda();
  verificaColisaoOponente();

}  
function verificaColisaoOponente(){
    if (xBola + raio > xRaquete && yBola - raio < yRaquete + compriRaquete && yBola + raio > yRaquete) {
        vellocidadeX *= -1;
    }
}
function colisaoBorda(){
  if(xBola+raio>width){
        vellocidadeX=vellocidadeX *-1;
  }
  if(xBola-raio<0){
     vellocidadeX=vellocidadeX *-1;
  }
  if(yBola+raio>height || yBola-raio<0){
     vellocidadeY=vellocidadeY *-1
  }
}

Vou deixar aqui como recomendação de estudo um artigo da Alura bem legal que fala o que é código limpo e sua importância no dia a dia da pessoa programadora:

• O que é Clean Code

Essas modificações devem resolver a colisão, Emanuel. Caso fique alguma dúvida, estarei à disposição.

Forte abraço!