Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Código da Biblioteca não evita Bolinha entrando metade na Raquete

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Criando a raquete do oponente e atividade Colisão com o oponente

por Vitor Somma
| 146.7k xp | 15 posts
Professor de Inglês

Ao inserir o código da Biblioteca e retirar o que eu havia escrito para Verificar a Colisão com as Raquetes, percebi que a Bolinha está entrando até seu centro em ambas as Raquetes. Existe uma maneira de continuar usando o código da Biblioteca, mas evitar que isso ocorra?

Segue o meu código até o momento:

//variaveis Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametroBolinha = 15;
let raioBolinha = diametroBolinha/2;

//velocidade Bolinha
let velocidadeXBolinha = 3;
let velocidadeYBolinha = 3;

//variaveis Raquete P1
let xRaqueteP1 = 5;
let yRaqueteP1 = 150;
let comprimentoRaquete = 10;
let alturaRaquete = 90;

//variaveis Raquete P2
let xRaqueteP2 = 585;
let yRaqueteP2 = 150;
let velocidadeYP2;

let colidiu = false;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBolinha();
  mostraRaquete(xRaqueteP1, yRaqueteP1);
  mostraRaquete(xRaqueteP2, yRaqueteP2);
  movimentaRaqueteP1();
  movimentaRaqueteP2();
  verificaColisaoRaquete(xRaqueteP1, yRaqueteP1);
  verificaColisaoRaquete(xRaqueteP2, yRaqueteP2);

}

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

function movimentaBolinha() {
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

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

function mostraRaquete(x, y) {
  rect (x, y, comprimentoRaquete, alturaRaquete);
}

function movimentaRaqueteP1() {
  if (keyIsDown(87)) {
    yRaqueteP1 -= 5;
  } else if (keyIsDown(83)) {
    yRaqueteP1 += 5;
  }
}

function movimentaRaqueteP2() {
  velocidadeYP2 = yBolinha - yRaqueteP2 - alturaRaquete/2;
  yRaqueteP2 += velocidadeYP2
}

function verificaColisaoRaquete(x, y) {
  colidiu = collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raioBolinha);
  if (colidiu) {
    velocidadeXBolinha *= -1;
  }
}
3 respostas
por Camila Pessôa
| 920.3k xp | 1928 posts
Alura Scuba Team

Oi, Vitor! Como vai você?

O que ocorreu então é que não identificou a colisão da bolinha na raquete, certo?

Algo bem comum é esquecermos de chamar a biblioteca collide no arquivo index.html. Nesse sentido, precisamos informar ao editor que estamos utilizando a biblioteca.

E como fazemos isso?

Basta inserirmos a informação no body do arquivo index.html, como no código abaixo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
     <script src="p5.collide2d.js"></script> //aqui estamos chamando a biblioteca

  </body>
</html>

Caso as dúvidas persistam, você poderia compartilhar o link do seu projeto no p5.js? Assim fica bem mais fácil para visualizar os eventuais problemas.

Um abraço e bons estudos!

por Vitor Somma
| 146.7k xp | 15 posts
Professor de Inglês

Olá! Eu realizei sim a inserção da biblioteca lá no collide no arquivo index.html. Acredito que não me expressei bem. Me refiro a isso que tentei agora descrever nesse gif que fiz:

https://media.giphy.com/media/6VTlHTHOVlhZLLOzUq/giphy.gif

A Bolinha reconhece a colisão e muda sua direção, porém ela entra um pouco na Raquete. Quando escrevi o código por conta própria, a Bolinha não chegava a entrar assim e por isso perguntei se existiria uma maneira de continuar usando o código da Biblioteca, mas evitar que isso ocorra. Segue o link do meu projeto no ps5.js:

https://editor.p5js.org/vsommah/sketches/nalqCr7_h

Valeu pela ajuda!

solução!
por Camila Pessôa
| 920.3k xp | 1928 posts
Alura Scuba Team

Ahh, entendi agora, Vitor!

Você tem total razão, parece de fato que a sensibilidade de colisão com a raquete é um pouco menor e por isso ela precisa de uma área maior de contato. E é justamente isso mesmo :)

Para aumentar a sensibilidade basta alterar um pouco a lógica do cálculo e substituir o valor referente ao raio da bolinha, olha só no código:


function verificaColisaoRaquete(x, y) {
  colidiu = collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, 15); //substitui por 15, que é um valor um pouco maior e por isso aumenta a sensibilidade
  if (colidiu) {
    velocidadeXBolinha *= -1;
  }
}

Espero que tenha conseguido te ajudar agora :D

Ah, seu código está muito bacana também, parabéns e continue com esse foco!

Um abraço e até breve!