Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Colisão da raquete Opponente não funciona

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript

por Bruna Moraes Capeletti
| 151.1k xp | 1 posts
//Variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametroBolinha = 20;
;
let raio = diametroBolinha /2;

//Variável da Raquete Esquerda
let xRaquete = 5;
let yRaquete = 80;
let wRaqueteLargura = 10;
let hRaqueteAltura = 100;

//Variável da Raquete Direita
let xRaqueteDireita = 585;
let yRaqueteDireita = 80;
let velocidadeYDireita;


//Velocidade da Bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraraquete(xRaquete, yRaquete);
  movimentoRaqueteEsquerda();
  verificaColisaoRaquete();
  mostraraquete(xRaqueteDireita, yRaqueteDireita);
  movimentaRaqueteDireita();
}

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

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, wRaqueteLargura, hRaqueteAltura );
}

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

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

function movimentaRaqueteDireita(){
  velocidadeYDireita = yBolinha -yRaqueteDireita -wRaqueteLargura /2 -30;
  yRaqueteDireita += velocidadeYDireita;
}
1 resposta
por Sarah Ocy Sousa Medeiros
| 2177.6k xp | 4545 posts

Oi, Bruna! Tudo bem?

A colisão não está ocorrendo na raquete do oponente pois o código apresenta apenas a função que verifica a colisão da bolinha com a nossa raquete, localizada à esquerda.

Para resolvermos o nosso problema temos duas opções:

  1. Podemos criar uma função verificaColisaoRaqueteDireita(), com base na função verificaColisaoRaquete(), entretanto, adaptando os seus parâmetros para a raquete do oponente, deixando-a, então, da seguinte maneira:

    function verificaColisaoRaqueteDireita(){
      if (xBolinha + raio > xRaqueteDireita 
    && yBolinha - raio < yRaqueteDireita + hRaqueteAltura && yBolinha + raio > yRaqueteDireita){
        velocidadeXBolinha *= -1;
      }
    }

Por fim, declarando-a dentro da função draw, deixando-a da seguinte forma:

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraraquete(xRaquete, yRaquete);
  movimentoRaqueteEsquerda();
  verificaColisaoRaquete();
  mostraraquete(xRaqueteDireita, yRaqueteDireita);
  movimentaRaqueteDireita();
  verificaColisaoRaqueteDireita();
}

2 . Entretanto, temos também como opção aplicarmos a solução apresentada ao decorrer do curso, adicionando a biblioteca p5.collide2d.js, e aplicando a função:

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

E por fim declarando a função para as duas raquetes de acordo com os seus parâmetros, dentro da função draw da seguinte forma:

verificaColisaoRaquete(xRaquete, yRaquete);
verificaColisaoRaquete(xRaqueteDireita, yRaqueteDireita);

Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se a vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓