Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida após adicionar biblioteca

Oi, fiquei com dúvida depois de adicionar a biblioteca de outra pessoa do github. A bolinha não está mais tocando a raquete, pode me ajudar por favor?

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2;

//velocidade da bolinha
let velocidadeXBolinha = 5;
let velocidadeYBolinha = 5;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

let colidiu = false;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
  verificaColisaoRaquete();
  colisaoMinhaRaqueteBiblioteca();

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;{
    }
}

function mostraRaquete(){
    rect(xRaquete, yRaquete, raqueteComprimento, raqueteAltura)
}

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

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

}
2 respostas
solução!

Olá, Bianca! Tudo bem com você?

Testei seu código no meu p5.js e precisamos fazer as seguintes correções:

  • Fechar o escopo corretamente da função draw(). Caso a draw() continue englobando todo o código, é provável que apareçam alguns conflitos .
  • Comentar a função verificaColisaoRaquete() para não dar conflito
  • Chamar a biblioteca do collide2d no index.html

Vou deixar o código do arquivo sketch.js para você testar no seu projeto, certo?

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2;

//velocidade da bolinha
let velocidadeXBolinha = 5;
let velocidadeYBolinha = 5;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

let colidiu = false;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
 // verificaColisaoRaquete(); comentar a chamada dessa função
  colisaoMinhaRaqueteBiblioteca();

} //fechar o escopo da draw()

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;{
    }
}

function mostraRaquete(){
    rect(xRaquete, yRaquete, raqueteComprimento, raqueteAltura)
}

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

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

  //retirar a última chave

Não esqueça também de chamar a biblioteca do collide no seu arquivo index.html, ele deverá ficar assim:

<!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>

  </body>
</html>

Fico no aguardo, espero que tenha ajudado!

Um forte abraço e bons estudos!

Obrigada!