Entrar Ainda não tem acesso?
5
respostas

Erro com a Colisão da 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 Faça como eu fiz na aula

por Beatriz Neris Corrêa
| 7.3k xp | 9 posts

Eu olhei e olhei o código mas n consegui encontrar o que estava errado, o p5 continua escrevendo " p5.js says: There's an error due to "collideRectCircle" not being defined in the current scope (on line 91 in sketch.js [/sketch.js:91:3]).▶️ Error at line 91 in "verificaColisaoRaquete" in 9b8a0f0d-e667-48b3-8fd8-793473a51d35 (blob:https://preview.p5js.org/9b8a0f0d-e667-48b3-8fd8-793473a51d35:91:3)

▶️ Called from line 40 in "draw" in 9b8a0f0d-e667-48b3-8fd8-793473a51d35 (blob:https://preview.p5js.org/9b8a0f0d-e667-48b3-8fd8-793473a51d35:40:3)"

Abaixo o código:

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

Por favor me ajudem! :|

5 respostas
por Everton Galdino da Silva
| 70.6k xp | 7 posts
Supervisor - Analista de TI

Boa tarde Beatriz,

Verifica se você colocou a referência da biblioteca(p5.collide2D) no arquivo index e incluiu o arquivo "p5.collide2d.js" no seu projeto:

Arquivo index:

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

Print da pasta com os arquivos do jogo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeCopiei o seu código e adicionei os dois passos acima e funcionou certinho!

Essa aula vai te ensinar a baixar a biblioteca e fazer as alterações caso tenha dúvidas: https://cursos.alura.com.br/course/pong-javascript/task/56101

por Beatriz Neris Corrêa
| 7.3k xp | 9 posts

Sim, eu coloquei, já atualizei o navegador, recarreguei a página do p5 e nada continua da mesma forma, não sei o que pode ser

Abaixo o código do "index.html":

/head>
  <body>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>
por Everton Galdino da Silva
| 70.6k xp | 7 posts
Supervisor - Analista de TI

Posta o seu index.html completo e um print do p5 para ver se consigo te ajudar... Outra coisa, qual navegador vc está usando?

por Luiz Fernando da Silva Freitas
| 187.9k xp | 3 posts
Programador ou Engenheiro de Software

Beatriz,

Copiei seu código, add o arquivo conforme print abaixo, add no index.html, <script src="p5.collide2d.js"></script>, e funcionou.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meu teste foi feito no Chrome.

por Fagund1s
| 204.7k xp | 47 posts

Beatriz eu optei por não usar API externa, então fiz assim.


//Váriaveis da bola
let velocidadeXBola = 8;
let velocidadeYBola = 8;

//Velocidade da bola
let xBola = 300;
let yBola = 200;
let diametroBola = 20;
let raio = diametroBola / 2

//Váriaveis da raquete
xRaquete = 0;
yRaquete = 150;
raqueteAltura = 80;
raqueteComprimento = 8;

//Váriaveis da raquete do inimigo
xRaqueteInimigo = 590;
yRaqueteInimigo = 150;

//Váriaveis de pontos
meusPontos = 0 ;
inimigoPontos = 0;


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

}

function draw() {

  background(0);
  desenhaBola();
  velocidadeBola();
  colisaoBolaNasBordas();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteInimigo, yRaqueteInimigo);
  movimentarRaquete();
  movimentarRaqueteInimigo();
  verificarColisaoBola();
  verificarColisaoBolaInimigo();
  placar();
  addPontos();


}

  function desenhaBola (){

    circle (xBola, yBola, diametroBola);

  }

  function velocidadeBola (){

    xBola += velocidadeXBola;
    yBola += velocidadeYBola;

  }

  function colisaoBolaNasBordas (){

    if (xBola + raio > width || xBola - raio < 0 ){
    velocidadeXBola *= -1;
  }

    if (yBola + raio > height || yBola - raio < 0) {
   velocidadeYBola *= -1

 }
}


  function mostraRaquete (x, y){

  rect(x, y, raqueteComprimento, raqueteAltura);

}




function movimentarRaquete (){

  if (keyIsDown(UP_ARROW)){

    yRaquete -= 10;

  } 

  if (keyIsDown(DOWN_ARROW)){

    yRaquete += 10

  }
}

  function movimentarRaqueteInimigo(){

    velocidadeRaqueteInimigo = yBola - yRaqueteInimigo - raqueteComprimento / 2 - 30;
    yRaqueteInimigo += velocidadeRaqueteInimigo


  }

  function verificarColisaoBola (){

    if (xBola - raio < xRaquete + raqueteComprimento
       && yBola - raio < yRaquete + raqueteAltura 
        && yBola + raio > yRaquete){ 

        velocidadeXBola *= -1

  }
}

  function verificarColisaoBolaInimigo (){

    if (xBola + raio > xRaqueteInimigo - raqueteComprimento
       && yBola + raio > yRaqueteInimigo - raqueteAltura 
        && yBola - raio > yRaqueteInimigo){ 

        velocidadeXBola *= -1

  }
}

  function placar (){
    fill(255)
    text(meusPontos, 250, 25)
    text(inimigoPontos, 325, 25)    
  }

  function addPontos (){

    if (xBola > 590 ){
    meusPontos += 1;
   }
    if (xBola < 5 ){
    inimigoPontos += 1;
    }
  }