10
respostas

[Dúvida] Bolinha fica tremendo no meio da tela enquanto acompanha o oponente no eixo Y

Oi gente,

Vi alguns tópicos como o meu, mas ainda não consegui achar o problema e nem resolvê-lo. Como o título, a bolinha só se movimenta no eixo y de forma tremida. Segue 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 = 2;

//váriaveis da raquete
let xRaquete = 5
let yRaquete = 150
let raqueteComprimento = 10
let raqueteAltura = 90


//váriaveis do oponente
let xRaqueteOponente = 585
let yRaqueteOponente = 150
let velocidadeYOponente ;


let colidiu = false;

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

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

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 colisaoRaqueteBiblioteca(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
}
10 respostas

oi Aluno. experimente comentar as últimas funções, um por vez e veja se resulta. Porém a função colisaoRaqueteBiblioteca(); me parece sobrar, comece por ela, apenas comente-a e veja se resolve. Caso contrário, poste o link do projeto.

!

Preciso de ajuda. Estou tentando fazer a bolinha colidir com a raquete do componente, e não estou conseguindo. Já inverti os sinais da forma da minha raquete, já tentei pegar referencias daqui do fórum e nada está dando certo. Não consegui utilizar o arquivo do GitHub, por isso acabei me perdendo e agora estou perdidinha. rs

Segue abaixo os códigos que estou utilizando até o momento.

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

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, alturaRaquete, comprimentoRaquete); }

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

function verificaColisaoRaquete(){ if (xBolinha - raio < xRaquete + alturaRaquete && yBolinha - raio < yRaquete + comprimentoRaquete && yBolinha + raio > yRaquete){ velocidadeXBolinha *= -1; } }

function verificaColisaoRaqueteOponente(){ if (xBolinha + raio > xRaquete - alturaRaquete && yBolinha + raio < yRaquete + comprimentoRaquete && yBolinha + raio > yRaquete){ velocidadeXBolinha *= -1; } }

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

Oi Thays, olha só, copie seu código e poste usando este comando " </> " , este comando faz seu código ficar indentado, ele está na barra de formatação acima pra facilitar olharmos. E se possível, abra outro tópico, senão fica confuso kk E se quiseres compartilhar o projeto, o que ajuda mais ainda, é só seguir os passos na gif acima. Obrigado e bons estudos.

Oi Thays, por acaso a função não vai funcionar enquanto ele estiver comentada, certo?

Oi Romeu, obrigada pelo retorno. Ainda estou meio perdida com as ferramentas da plataforma. Estou apanhando aqui, para me encontrar rs.

Pois bem. Segue abaixo link de acesso ao meu projeto. https://editor.p5js.org/ThaysOliveira/sketches/cMBZSa80K

Espero que consiga me ajudar, por que a partir da raquete do oponente em diante, acabei me perdendo na explicação e confundiu minha cabeça toda. Desde já agradeço pela ajuda.

//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 alturaRaquete = 10;
let comprimentoRaquete = 80;

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

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

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

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, alturaRaquete, comprimentoRaquete);
}

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

function verificaColisaoRaquete(){
    if (xBolinha - raio < xRaquete + alturaRaquete
        && yBolinha - raio < yRaquete + comprimentoRaquete
        && yBolinha + raio > yRaquete){
        velocidadeXBolinha *= -1;
    }
}

function verificaColisaoRaqueteOponente(){
   if (xBolinha + raio > xRaquete - alturaRaquete
        && yBolinha + raio > yRaquete + comprimentoRaquete
        && yBolinha + raio < yRaquete){
        velocidadeXBolinha *= 1;
    }
}

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

Boa noite!

Estou tendo o mesmo problema, só que de outra forma: https://editor.p5js.org/henriqueiba/sketches/3eU62qUc7

Eu to tentando fazer a colisão do oponente, sem usar a biblioteca também só que queria fazer da forma como fiz no mostraRaquete

function verificaColisaoRaquete(x,y){ if (xBolinha - raio < x + raqueteComprimento && yBolinha - raio < y + raqueteAltura && yBolinha + raio > y) velocidadeXBolinha *= -1 }

resolveram?

O meu problema de com o placar permanece :'( https://editor.p5js.org/ThaysOliveira/sketches/cMBZSa80K

oi Thays.

No seu código de pontuação, estão invertidos os sinais!! Por isso a pontuação era acelerada. A lógica é : se o xBolinha for maior que 590 pontua para minhaRaquete, é o lado que tende a sempre aumentar, pois está se distanciando do zero. Se o xBolinha for menor que 10, pontua a raqueteOponente. É o lado que tende a diminuir, pois está indo em direção ao zero.

Inverta-os os sinais como na imagem e tudo se resolve.

Thais, entendo que vc aproveitou que era po mesmo assunto e tal, mas abrir um novo tópico facilita encontrar as pessoas. Eu já nem recordava-me disso. kk Espero que o seu problema tenha resolvido Aluno!! Espero ter ajudado.

Bons estudos!!