1
resposta

[Dúvida] Erro na colisãoda bolinha na borda que fica acima da raquete do oponente

Olá, estou com uma dificuldade.

Já estava bem adiantado na aulas (já estava criando o placar), porém percebi um erro da colisão da bolinha, não colide na borda em cima da raquete do oponente e não consigo resolver. Poderiam me ajudar? Obs: Eu não utilizei um arquivo de fora sobre a colisão com a raquete igual o professor fez, eu peguei um código no forúm.

Segue o código abaixo:

// Variáveis da bolinha
var xBolinha = 300;
var yBolinha = 200;
var diametro = 25;
var raio = diametro / 2;

// Velocidade da bolinha
var velocidadeXBolinha = 4;
var velocidadeYBolinha = 4;

// Variáveis minha raquete
var  xRaquete = 5;
var  yRaquete = 150;
var  widthRaquete = 10; // comprimento
var  heightRaquete = 90; // altura


// Variáveis do oponente
var  xRaqueteOponente = 585;
var  yRaqueteOponente = 150;
// var  velocidadeXOponente = 6;
var  velocidadeYOponente;

// Variáveis de movimento raquete
var sobe = 10
var desce = 10
var desceRaqueteOponente  = 10

// Placar do jogo
var meusPontos = 0;
var pontosOponente = 0;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentoBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaMinhaRaquete();
  verificaColisaoRaquete();
  //movimentaRaqueteOponente();
  verificaColisaoRaqueteOponente();
  incluiPlacar();
  marcaPonto();
}

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

function movimentoBolinha() {
  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, widthRaquete, heightRaquete);
}

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

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

function movimentaRaqueteOponente() {
  velocidadeYOponente = yBolinha -yRaqueteOponente - widthRaquete / 2 - 30; 
  yRaqueteOponente += velocidadeYOponente;
   yRaqueteOponente =  constrain(yRaqueteOponente, 5, 315);
}

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

function incluiPlacar() {
  fill(255);
  text(meusPontos, 278, 26);
  text(pontosOponente, 321, 26);
}

function marcaPonto(){
  if (xBolinha > 585){
    meusPontos += 1;
  }  
  if (xBolinha < 15) {
    pontosOponente += 1;
  }
}
1 resposta

Opa Bruno, tudo certo?

Isso ocorre por que não temos neste código uma parte que considere a face superior e inferior da raquete, uma possível solução para isso seria realizar uma mudança com uma nova condição:

if (xBolinha + raio > xRaqueteOponente) {
    if (yBolinha + raio > yRaqueteOponente) {
         velocidadeYBolinha *= -1;
          console.log('oi')
    }
  }

Sendo que:

  • A primeira condição garante que o a colisão somente aconteça quando a posição da bolinha contando com o seu raio seja maior que a da raquete, ou seja, estesja acima dela;
  • yBolinha + raio > yRaqueteOponente - considera o centro da bolinha e o seu raio de baixo para cima, dessa forma a parte superior da raquete vai ser considerada;

Recomende que teste e tente implementar este código, pelas minhas tentativas, funcionou, mudei um pouco a posição e fiz o movimento ir apenas de cima para baixo, você pode consultar no seguinte link:

Fico à disposição, tenha um bom dia e bons estudos.