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

collideRectCircle is not defined

Fui tentar rodar o código do instrutor e o console apresentou o erro "collideRectCircle is not defined". Preciso instalar essa biblioteca ou fazer alguma configuração no P5 para que ela funcione? O código está exatamente assim:

//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;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;

//variáveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

let colidiu = false;

//placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
}

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(x,y){
  rect(x, y, 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 verificaColisaoRaquete(x, y){
  colidiu = collideRectCircle(x, y,raqueteComprimento,raqueteAltura,
                              xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXBolinha *= -1;
  }
}

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

function incluiPlacar(){
  fill(255);
  text(meusPontos, 278, 26);
  text(pontosDoOponente, 321, 26)
}

function marcaPonto(){
  if (xBolinha > 590){
    meusPontos += 1;
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
  }
}



link pro P5js. https://editor.p5js.org/Nico_Fergui/sketches/IneHV99Wx

7 respostas

oi Nicole!! tente compartilhar o link do seu projeto. Quando for colar algum código sega as isntruções abaixo. !

ou tente isso

Nicole, olá novamente. Estes asteriscos sempre estiveram aqui? Já experimentou sem eles?

** colidiu = collideRectCircle(x, y,raqueteComprimento,raqueteAltura, xBolinha,yBolinha,raio); ** if (colidiu){ velocidadeXBolinha *= -1; } }

Quando compartrilhar, olhamos melhor. Bons estudos,

Boa tarde Romeu!

Editei o código pra melhor entendimento. Se puder dar uma opinião sobre o possível problema... Valeu!

Segue também link pro P5js. https://editor.p5js.org/Nico_Fergui/sketches/IneHV99Wx

solução!

oi Nicole!! sim voce precisa usar uma biblioteca que tens que baixar do github, ou seguir os passos que mostro abaixo, mas ainda sim, tens que ir ao github. Depois que adicionar o arquivo p5.collide2d.js no seu projeto, tens que fazer upload dos arquivos de áudio.

Tens que ir em Sketch files e depois add file, dentro do editor p5js. Bons estudos

Siga exatamente!!!!! Olha só, com o link abaixo, vc vai para a página onde o p5collide2d.js , ele já está aberto, No canto superior direito como mostra a seta na imagem logo abaixo, vc copia o arquivo, é só clicar no ícone!!! , depois cole num bloco de notas e salve com o nome p5.collide2d.js , pronto , vc já tem o arquivo que precisa . Depois quando estiver o p5.js web editor aberto, é só fazer "upload file". Depois que fizer e tentares resolver os problemas, e ainda sim persistir algo, posta novamente.

https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js

Deu certo! Obrigada Romeo. Só destacando que ainda foi necessário referenciar esse novo arquivo .js no arquivo index.html:

<script src="p5.collide2d.js"></script>

Depois disso rodou direitinho. Valeu!

Tive essa dúvida também, tentei rodar o gabarito e nada kkkkkkkkkk Mas por que tentei rodar o gab??? troquei os nomes das functions É que troquei o nome de algumas functions pra não ficar muito grande, e me confundi Agora tá tudo beleza no meu (até o momento aparecendo só a raquete do oponente)

Vejamos:

//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;
let raqueteComprimento = 10;
let raqueteAltura = 90; 

//variáveis raquete
let xRaquete = 5;
let yRaquete = 150;

//variáveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;

let colidiu = false; 

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

function draw() {
  background(0);
  mostraBolinha(); 
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMRaquete();
  //verificaColisaoRaquete();
  colisaoMRaqueteBiblioteca();
  mostraRaqueteOponente();

  }

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 movimentaMRaquete(){
      if (keyIsDown(UP_ARROW)) {
        yRaquete -= 10;
    }
    if (keyIsDown(DOWN_ARROW)) {
        yRaquete += 10;
    }
}
 function colisaoMRaqueteBiblioteca(){
   if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio< yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
     velocidadeXBolinha *=-1;
   }
 }

function mostraRaqueteOponente(){
  rect(xRaqueteOponente,yRaqueteOponente, raqueteComprimento, raqueteAltura);


}

ou o link

https://editor.p5js.org/6fonsecanara/sketches/zRZzyFRQX

edit 354231543: se vc não salvar seu sketch, o link não atualiza!

Oi Nara, não percebi.?, mas se estiver com alguma dificuldade, poderia por gentileza, abrir outro tópico. Obrigado!!