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

Bug no jogo: A bolinha percorre o eixo Y tremendo

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 Rafaela Camargo dos Santos
| 2.8k xp | 5 posts

Oi pessoal!

Após importar a biblioteca collide 2d para o p5, meu jogo travou de forma que a bolinha sobe e desce tremendo. a seguinte mensagem aparece no console:

p5.collide v0.7.3

Abaixo, meu 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;

//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 = 
    collidePointCircle(xRaquete, yRaquete, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);

  if (colidiu){
    velocidadeXBolinha *= -1;
  }

}

Outra coisa que notei é: aparentemente, o código collide sofreu atualizações, então está diferente do utilizado pelo professor, com menos variáveis. Podem me ajudar, por favor?

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

Olá, Rafaela. Tudo certo?

Observei que você não fechou o escopo da function draw(), isso certamente gera conflitos no seu código. Verifique também se você realizou o upload da biblioteca collide2d para o seu projeto e chamou no arquivo index.html.

Vou deixar logo abaixo o exemplo do código realizado pelo instrutor:

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


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

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

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

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

Fico à disposição se as dúvidas persistirem!

Um abraço e bons estudos!

por Rafaela Camargo dos Santos
| 2.8k xp | 5 posts

Oi Camila, obrigada pelo breve retorno!

De fato eu fiz o upload da biblioteca collide2d para meu projeto e chamei no arquivo index.html, conforme explicado na aula.

O gabarito do exercício, eu peguei na aula, então, já o tenho, mas meu erro continua persistindo.Sugere algum outro ponto para correção?

por Rafaela Camargo dos Santos
| 2.8k xp | 5 posts

Camila,

revisitei a aula e fiz o passo a passo novamente. Acredito que tenha sido um erro meu de digitação, ou de fato não devo ter fechado o escopo da function draw() {fiquei procurando! kkkkk}

mas agora deu certo! Obrigada!