Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Compreendendo Coordenadas x Dimensão dos Objetos

Sobre o trecho abaixo, da resolução da Colisão da raquete, fiquei com algumas dúvidas. Fiz um desenho (bem básico, abaixo, para ilustrar a pergunta também com base nele).

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeDÚVIDA 1: xBolinha - raio < xRaquete + raqueteComprimento : neste ponto, considerando que subtraímos o raio da Bolinha para podermos considerar a extremidade esquerda da mesma, o correto não seria, também, considerar que o x da raquete está no centro, e buscar a extremidade direita desta utilizando xRaquete + raqueteComprimento / 2 ? Quando colocamos xRaquete + comprimento não estamos levando o comprimento da raquete (10, no exercício) além do ponto x dela (centro)?

DÚVIDA 2: yBolinha - raio < yRaquete + raqueteAltura: no mesmo sentido da pergunta 1, o "raqueteAltura" (90, no exercício) ao ser somado no yRaquete não deveria partir do centro do retângulo, e se alongar para além da altura dele, visto que o y estaria no ponto 45, fazendo, assim, sobrar 45 pra "fora"? Neste sentido, o correto não seria, também, substituirmos por "yRaquete + raqueteAltura / 2"?

DÚVIDA 3: yBolinha + raio > yRaquete): No mesmo sentido das duas anteriores, quando comparamos o yBolinha + raio (extremidade inferior da bolinha) com o yRaquete, não estaríamos comparando com o centro da Raquete (retângulo), devendo, este caso, ser substituído por yRaquete - raqueteAltura / 2?

Confesso que dei uma travada nesse pondo da aula tentando compreender como estas referências deram certo na prática. Se puderem dar um auxílio, agradeço!

1 resposta
solução!

Boa tarde Diego, tudo bem?

Grande parte das suas duvidas tem relação com o centro da raquete, porem a questão é a sgeuinte, o "X/Y" da raquete NÃO está no centro.

Na bolinha (circulo) o ponto x/y determina o centro do circulo e assim a bolinha é desenhada a partir do tamanho do raio, por esta razao utilizamos os calculos para achar as bordas da bolinha utilizando x/y e raio.

Ja a raquete (retangulo) não é desta forma, ele nao tem ponto central, o ponto x/y determina o canto superior esquerdo do retangulo e ele é desenhado a partir das medidas de largura e altura, por esta razão o calculo é feito de forma diferente.

Por exemplo, segue o codigo de criar a bolinha:

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

Por exemplo, segue o codigo de criar a raquete:

function criaRaquete(xPosicao, yPosicao) {
  rect(xPosicao, yPosicao, larguraRaquete, alturaRaquete);
}

Na criação da bolinha são utilizados so tres parametros, o ponto central (x/y) e o diametro.

Ja no retangulo determinamos o ponto superior esquerdo com x/y e dai desenhamos o retangulo com o tamanho e altura.

Em relação a colisão da bolinha com a raquete, segue exemplo de codigo:

function testaColisaoRaquete(xRaquete, yRaquete) {
  colidiuRaquete = collideRectCircle(xRaquete, yRaquete, larguraRaquete, alturaRaquete, xBolinha, yBolinha, raioBolinha);
  if (colidiuRaquete) {
    raquetada.play();
    velocidadeXBolinha *= -1;
  }
}

Neste caso foi utilizada a biblioteca de colisão "p5.collide2d.js", acredito que voce ainda não tenha chegado nesta parte do curso e esta fazendo o calculo manual de colisão, o que terrivel de fazer, vamos concordar.

O uso desta biblioteca facilita demais, basta inserir os parametros necessarios e o retorno informa se colidiu ou não.

Recomendo neste momento voce focar mais na programação em si do que na logica de colisão, sempre quando tenho uma duvida eu copio o codigo e avanço, normalmente a resposta vem mais tarde ou mais tarde voce tera o conhecimento necessario para responder aquelas duvidas do inicio.

Abraço!