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

[Projeto] Projeto Pronto mas Erro da Bolinha Presa Persiste

Boa noite,

Eu finalizei o projeto Ping Pong com p5.js, incrementei as dicas do pessoal a respeito do problema da bolinha presa entre a borda e a raquete mas testei e vi que o erro persiste. Abaixo, irei colocar meu código completo e gostaria de uma sugestão de possível alteração ou incremento.

obs: Gostaria de saber se, utilizando apenas uma função, eu consigo verificar tanto a colisão entre borda e a minha raquete quanto a colisão entre a borda e a raquete do oponente.

//Variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let dBolinha = 15;
let raio = dBolinha / 2;

//Velocidade da bolinha
let VelxBolinha = 6
let VelyBolinha = 6

//Variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let wRaquete = 10;
let hRaquete = 90;

//Variáveis do Oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let VelyOponente;

let Colidiu = false;

//Placar do Jogo
let meusPontos = 0;
let pontosDoOponente = 0;

//Sons do Jogo

let Raquetada;
let Ponto;
let Trilha;

function preload(){
  trilha = loadSound("trilha.mp3");
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
}

function setup() {
  createCanvas(600, 400);
  trilha.loop()
}

function draw() {
  background(0);
  MostraBolinha();
  MovimentaBolinha();
  VerificaColisaoBorda();
  MostrarRaquete(xRaquete, yRaquete);
  MovimentaMinhaRaquete();
//verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  MostrarRaquete(xRaqueteOponente, yRaqueteOponente);
  MovimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  MarcaPonto();
//Caso a bolinha fique presa na borda
  BolinhaNaoFicaPresa();

}

function MostraBolinha(){
  circle(xBolinha, yBolinha, dBolinha)
}

function MovimentaBolinha(){
  xBolinha += VelxBolinha;
  yBolinha += VelyBolinha;

}

function VerificaColisaoBorda(){
  if (xBolinha + raio > width ||
     xBolinha - raio < 0){
    VelxBolinha *= -1;
  }
  if (yBolinha + raio > height ||
     yBolinha - raio <0){
    VelyBolinha *= -1;
  }
}

function MostrarRaquete(x, y){
  rect(x, y, wRaquete, hRaquete);
}

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

function VerificaColisaoRaquete(){
  if (xBolinha - raio < xRaquete + wRaquete 
      && yBolinha - raio <yRaquete + hRaquete 
      && yBolinha + raio > yRaquete){
    VelxBolinha *= -1;
    raquetada.play();
  }
}

function verificaColisaoRaquete(x, y){
  Colidiu =
  collideRectCircle(x, y, wRaquete, hRaquete, xBolinha, yBolinha, raio);
  if (Colidiu){
    VelxBolinha *= -1;
    raquetada.play();
  }
}

function MovimentaRaqueteOponente(){
  if (keyIsDown(87)){
    yRaqueteOponente -= 10;
    }
  if (keyIsDown(83)){
    yRaqueteOponente += 10;     
      }
}

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(20);
  fill(color (255, 140, 0));
  rect(180, 6, 40, 25);
  fill(255);
  text(meusPontos, 200, 26);
  fill(color(255, 140, 0));
  rect(380, 6, 40, 25);
  fill(255);
  text(pontosDoOponente, 400, 26);
}

function MarcaPonto(){
  if (xBolinha > 590){
    meusPontos +=1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
    ponto.play();
  }
}

function BolinhaNaoFicaPresa(){
    if (xBolinha + raio < 0){
            xBolinha = 300;
      }
}
2 respostas
solução!

Olá Jullian, tudo bem? Espero que sim!

Modificaremos um pouco o código para evitar que a bolinha fique presa na raquete:

function BolinhaNaoFicaPresa() {
    if (xBolinha - raio <= 0){
      xBolinha = 35;
    } else {
if (xBolinha - raio >= 588){
        xBolinha = width - 35;
      }
    }
}

Com esse código a bolinha sempre será movida para a frente da raquete quando estiver próxima da borda, dessa forma evitamos que a bolinha fique presa:

  • O primeiro if verifica se borda da bolinha (xBolinha - raio) chegou até o canto esquerdo da tela (posição 0), quando isso acontece, movemos a posição horizontal da bolinha (xBolinha) para a frente da raquete do usuário:
if (xBolinha - raio <= 0){
      xBolinha = 35;
}
  • O segundo if segue a mesma ideia do primeiro, porém, ele atua na borda direita da tela. Utilizamos o valor da largura da tela (width) para quando a bolinha passar da raquete retornar um pouco a frente da borda e da raquete do oponente:
if (xBolinha - raio >= 588){
        xBolinha = width - 35;
     }

Segue o código funcionando:

Quanto a usar um único código para todas as colisões, essa é uma ótima pergunta!

Sim é possível, porém, não é recomendável, visto que na programação é uma boa prática que a função tenha uma única responsabilidade e não haja um acúmulo de código, ao usar uma única função poderíamos prejudicar a leitura e manutenção do código. Pensemos daqui alguns meses, será que conseguiríamos entender o que cada coisa faz ou até realizar a manutenção do código se tudo estiver acoplado na mesma função?

Se precisar de ajuda estamos a disposição, conte conosco.

Um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Boa tarde Gabriel,

Eu fiz a alteração no código como você mostrou e deu certo. Obrigado pela ajuda!