1
resposta

[Bug] Raquete não reconhece a colisão

Bom dia, pessoal.

Estive acompanhando a aula de Lógica de Programação cuja atividade "Colisão com raquete" com Guilherme. Então, percebi que tem um pequeno bug em relação ao código da raquete, pois suspeito que essa parte "esquerdaBolinha < direitaRaquete" seja a causa do bug.

Se vocês puderem me ajudar com esse código abaixo e/ou com esse link do p5js: https://editor.p5js.org/DanMargotto/sketches/FditId8Nb

// variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;

// variáveis da raquete esquerda
let xRaquete = 5;
let yRaquete = 170;
let widthRaquete = 5;
let heightRaquete = 60;

// variáveis da velocidade da bolinha
let velocidadeXBolinha = 4;
let velocidadeYBolinha = 4;

// variáveis da movimentação de raquete
let velocidadeRaquete = 10;

// variáveis após a refatoração
let esquerdaBolinha = xBolinha - raio;
let superiorBolinha = yBolinha - raio;
let inferiorBolinha = yBolinha + raio;
   
let direitaRaquete = xRaquete + widthRaquete;
let superiorRaquete = yRaquete;
let inferiorRaquete = yRaquete + heightRaquete;


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

function draw() 
{
  background(0); // 1- Desenha o background
  mostraBolinha(); // 2 - Desenha a bolinha
  movimentaBolinha(); // 3 - Movimenta a bolinha
  verificaColisaoBorda(); // 4 - Verifica a colisão da bolinha
  mostraRaquete(); // 5- Desenha a raquete
  verificaColisaoRaquete(); // 6 - Verifica a colisão da bolinha na raquete
  movimentaRaquete(); // 7 - Movimenta a raquete
}

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

function movimentaBolinha()
{
  xBolinha += velocidadeXBolinha;
}

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

function mostraRaquete()
{
  rect(xRaquete, yRaquete, widthRaquete, heightRaquete)
}

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

function verificaColisaoRaquete()
 {
    if(esquerdaBolinha < direitaRaquete && superiorBolinha < inferiorRaquete && inferiorBolinha > superiorRaquete) 
     {
       velocidadeXBolinha *=-1;
     }
 }
1 resposta

Código correto:

// variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;

// variáveis da raquete esquerda
let xRaquete = 5;
let yRaquete = 170;
let widthRaquete = 5;
let heightRaquete = 60;

// variáveis da velocidade da bolinha
let velocidadeXBolinha = 7;
let velocidadeYBolinha = 7;

// variáveis da movimentação de raquete
let velocidadeRaquete = 10;

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

function draw() {
  background(0); // 1- Desenha o background
  mostraBolinha(); // 2 - Desenha a bolinha
  movimentaBolinha(); // 3 - Movimenta a bolinha
  verificaColisaoBorda(); // 4 - Verifica a colisão da bolinha
  mostraRaquete(); // 5- Desenha a raquete
  verificaColisaoRaquete(); // 6 - Verifica a colisão da bolinha na raquete
  movimentaRaquete(); // 7 - Movimenta a raquete
}

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

function movimentaBolinha()
{
  xBolinha += velocidadeXBolinha;
}

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

function mostraRaquete()
{
  rect(xRaquete, yRaquete, widthRaquete, heightRaquete)
}

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

function verificaColisaoRaquete()
 {
    let esquerdaBolinha = xBolinha - raio;
    let superiorBolinha = yBolinha - raio;
    let inferiorBolinha = yBolinha + raio;
   
    let direitaRaquete = xRaquete + widthRaquete;
    let superiorRaquete = yRaquete;
    let inferiorRaquete = yRaquete + heightRaquete;
   

    if (esquerdaBolinha < direitaRaquete
        && superiorBolinha < inferiorRaquete
        && inferiorBolinha > superiorRaquete)  {
      velocidadeXBolinha *=-1;
    }
 }

Simplesmente porque você atribui essas variáveis uma única vez, e nunca atualiza a esquerda da bolinha, o superior e o inferior. O mesmo para a raquete. E colococando-as dentro da função, ela atualiza as variáveis sempre.