[Projeto] Minhas Raquetes Pararam de colidir com a Bolinha

Oi! Tudo certo por aí?

Agradeço a paciência em aguardar uma resposta.

Existem alguns fatores que estão impedindo a colisão da bolinha com a raquete. Vamos olhá-las mais detalhadamente?

• Duplicidade de funções: há duas funções com objetivo de verificar a colisão bolinha-raquete. Sendo assim, podemos comentar uma delas; neste caso, comentei a função que não faz uso da biblioteca p5.collide2d.

• Chamada de variável em verificaColisaoRaquete(): quando foi declarada a variável velocidadexBolinha, o x estava escrito em letra minúscula. Contudo, ao utilizá-la dentro da função, usou-se a letra “X” em maiúsculo. Para seguir o padrão da linguagem Javascript, podemos alterar a declaração das funções referentes à velocidade da bolinha, da seguinte maneira:

  let velocidadeXBolinha = 2;
  let velocidadeYBolinha = 2;

Mas afinal, por que fizemos tal alteração?

Ao longo do código, podemos perceber a variação dos nomes das variáveis. Quando estamos desenvolvendo um programa, é importante que sigamos o mesmo padrão de nomenclatura, pois, desta maneira, teremos um projeto com melhor legibilidade e de fácil manutenção.

A comunidade que programa em Javascript, por exemplo, gosta de criar variáveis com iniciais minúsculas, deixando as demais palavras com las primeiras letras maiúsculas. Abaixo há um artigo bem bacana sobre esse tema:

• Convenções de nomenclatura: Camel, Pascal, Kebab e Snake case

Voltando ao código, além das variáveis já comentadas, em alguns momentos foi utilizado raqueteComprimento, enquanto em outros, RaqueteComprimento. Por esse motivo, modifiquei as declarações do comprimento e da altura da raquete, a fim de normalizá-las, chegando em algo assim:

let raqueteComprimento = 10;
let raqueteAltura = 90;

As variáveis velocidadeXBolinha, velocidadeYBolinha, raqueteComprimento e raqueteAltura aparecem várias vezes ao longo do código, então precisamos alterá-las.

• Por fim, existe mais um ponto a ser ressaltado, olha só: para chamar a função em draw(), precisamos escrevê-la tal qual a declaramos. Depois da alteração, a chamada ficará assim:

    verificaColisaoRaquete(xRaquete, yRaquete);

    verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);

Ao fim, o código final, depois das modificações que fizemos, será este:

//variaveis da bolinha 
let xBolinha = 300;
let yBolinha = 200;
let diametro = 25;
let raio = diametro / 2 ;

//velocidade da bolinha
let velocidadeXBolinha = 2;
let velocidadeYBolinha = 2;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//variaveis da raquete 
let xRaquete = 5;
let yRaquete = 150;

//variaveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente =150;
let velocidadeYOponente;

let colidiu = false;

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

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

function mostraBolinha (){
    circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha (){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBorda (){
  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, raqueteComprimento, raqueteAltura);
}

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

// function VerificaColisaoRaquete(x, y){
//   if (xBolinha - raio < xRaquete + RaqueteComprimento && yBolinha - raio < yRaquete + RaqueteAltura && yBolinha + raio > yRaquete){
//     velocidadexBolinha *= -1;
//   }
// }

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

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

Fico à disposição para te ajudar caso surja alguma dúvida! Abraços!