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

[Dúvida] Não encontro a solução para o erro: colliderectcircle is not defined

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Criando minha raquete no jogo e atividade Importando outra biblioteca

por Priscila do Evangelho Fernandes
| 15.7k xp | 6 posts

Eu baixei o arquivo, abri no projeto conforme o tutorial, mas ainda aparece que o colliderectcircle is not defined. Estou com a cabeça quente!

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

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

//velocidades da bolinha let velocidadeXBolinha = 6 let velocidadeYBolinha = 6

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

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

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

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

4 respostas
por Victor Costa Santos
| 1945.4k xp | 3755 posts
Alura Scuba Team Monitor de ForumOps

Olá Priscila, tudo bem?

Peço que verifique o seu arquivo ìndex.html e verifique que se foi chamado a biblioteca, como exemplificado no código abaixo:

  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
     <script src="p5.collide2d.js"></script> //observe que foi adicionado a biblioteca
  </body>
</html>

Contudo, é necessário ter acesso ao seu código para que eu seja mais assertivo sobre como sanar esse erro e te indicar os locais de correção, sendo assim peço que compartilhe o seu projeto para que eu possa te auxiliar.

Para compartilhar o projeto no P5, siga os passos abaixo:

  • Com o p5 aberto e já logado, clique em File (arquivo)
  • Logo depois em Share(compartilhar)
  • Por fim, copie o terceiro link do "edit".
  • Cole o link na resposta do fórum

Deixo abaixo um gif que exemplifica o procedimento de compartilhamento do código:

O gif ou uma série de capturas que dá uma impressão de vídeo, mostra uma tela do navegador que estar aberta na ferramenta p5.js, o gif serve exemplificar para o aluno Gabriel Como ele pode compartilhar o link, o fundo da tela está todo acinzentado escuro em poucos segundos mostra algumas linhas de códigos que não é interessante para o aluno o mouse se direciona fazendo os seguintes comandos dentro da plataforma, aba arquivo que fica no topo da tela do p5, e depois compartilhar e clicar na terceira e última opção, nesse tutorial são abertos pequenos pop-ups que auxiliar a legibilidade do aluno para realizar os comandos, por fim o gif apresenta colando o link no fórum da comunidade alura Caso o primeiro método não funcione, fico no aguardo e a disposição para lhe auxiliar!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Priscila do Evangelho Fernandes
| 15.7k xp | 6 posts

Olá Victor! Obrigada por responder

Eu não consegui resolver, peço sua ajuda. Penso que o meu projeto está um pouco bagunçado porque eu não havia salvo e perdi tudo. Então fiz um novo muito rápido e copiei e colei muitos códigos do professor, diferente do meu primeiro projeto que eu estava fazendo com mais calma.

Vou compartilhar ele contigo e peço sua ajuda.

Grata!

https://editor.p5js.org/prifernandespt/sketches/3yBQQ4BXl

solução!
por Victor Costa Santos
| 1945.4k xp | 3755 posts
Alura Scuba Team Monitor de ForumOps

Oi Priscila!

Analisando o seu game encontrei alguns pequenos erros de fácil correção, vamos lá:

No arquivo index.html você precisa adicionar o arquivo de colisão, como mencionado na minha primeira resposta a ti mais reforço o uso dele, do seguinte modo:

 <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src = "p5.collide2d.js"></script> // nova linha adicionada
  </body>

Logo depois vamos arrumar a chamada de uma função que faz o alinhamento do texto que é o textAling(CENTER) que fica na função incluiPlacar(), como exemplificado mais abaixo:

function incluiPlacar (){
  textAlign(CENTER); // linha do segundo erro
  textSize (16)
  fill(255)
  text(meusPontos, 278, 26)
  text(pontosDoOponente, 321, 26)

}

OBS: peço que copie e cole essa função por cima da antiga, em alguns testes houve alguns bugs que impossibilitou a continuidade do game.

O último erro a ser reparado é que na linha 29, há uma variável não declarada, “let” que está sozinha, o que não é legal, basta apenas apagar.

Acredito que depois dessas alterações o seu jogo volte a funcionar perfeitamente, mas reforço que em caso de qualquer dúvida estou aqui para lhe auxiliar.

Por fim deixo o link da cópia do seu jogo depois do mesmo ter sido reparado:

Espero ter ajudado!

Desejo-lhe muito sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Priscila do Evangelho Fernandes
| 15.7k xp | 6 posts

Muito obrigada! Consegui solucionar os problemas!