1
resposta

Minha bolinha so vai para cima e para baixo

Criei a função "verifica a colisão raquete", mas ao executar a bolinha só vai para cima e para baixo, não estou conseguindo identificar o que esta causando o erro. HELP.

Código completo (até agora):

//variáveis da bolinha

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2 ;

//velocidade da bolinha

let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;


//variáveis da raquete

let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 100;

//variáveis do oponete

let xRaqueteOponente = 585
let yRaqueteOponente = 150
let velocidadeYOponente;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimenraRaqueteOponente();
  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;
  }
}

//para não criar uma nova função para a raquete oponente, inseri tudo em uma unica função usando "x e y".
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 < x + raqueteComprimento && 
      yBolinha - raio < y + raqueteAltura && 
      yBolinha + raio > y){
    velocidadeXBolinha *= -1;
  }
}

function movimenraRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento /2 - 30;
  yRaqueteOponente += velocidadeYOponente
}
1 resposta

Fala Lucas! Tudo certo por aí?

Para verificar a colisão do oponente, precisamos criar uma nova função e fazer algumas alterações nos operadores. O uso de parâmetros como o x e y das raquetes não vai ser suficiente nessa caso, pois estamos lidando com valores dentro do plano cartesiano. Como o valor de xBolinha é sempre menor que xRaqueteOponente, a função entra em loop e executa velocidadeXBolinha *= -1 infinitamente.

Veja como criei a função verificaColisaoRaqueteOponente():

function verificaColisaoRaqueteOponente() {

  if (xBolinha + diametro > xRaqueteOponente + raqueteComprimento && yBolinha - raio < yRaqueteOponente + raqueteAltura && yBolinha + raio > yRaqueteOponente){
    velocidadeXBolinha *= -1;
  }
}

Na primeira parte que está dentro do if, xBolinha + diametro > xRaqueteOponente + raqueteComprimento, adicionei o valor do diâmetro e inverti o sinal de comparação para maior ( > ).

Utilizei o diâmetro, e não o raio, pois nesse caso a colisão ficou melhor definida com esse valor.

As mudanças na operação se devem à posição que estamos procurando dentro do plano cartesiano do p5. Na função verificaColisaoRaquete() os valores da raquete estão à esquerda e, portanto, são menores. Ao analisar a colisão com a raquete que está mais a direita, os valores serão maiores.

Sugiro que adicione a verificaColisaoRaqueteOponente() e retire os parâmetros de verificaColisaoRaquete(). Lembre-se de alterar também na função draw()!

Vou deixar aqui um artigo que fala melhor sobre como funciona o plano cartesiano no p5.js.

Caso tenha ficado alguma dúvida, estou à disposição.

Teste fazer essas alterações na função e me conte se deu certo!

Forte abraço.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!