2
respostas

[Bug] Bud da Bolinha Presa atrás da Raquete

Realmente algumas vezes no projeto de "Lógica de programação: comece em lógica com o jogo Pong e Javascript" a bolinha fica preza atrás da raquete e ai marca vários pontos para o oponente nesse caso uma boa forma de resolver isso é criar uma função que retorne a bolinha ao centro da tela, e chamar essa função dentro da função que marca os pontos, dessa forma no momento em que for realizado o primeiro ponto a bolinha retornará para o centro.

// Função para retonar bolinha ao centro da tela
function bolinhaVoltaParaCentroDaTela(){
        xBolinha = 300
        yBolinha = 200
}

Dessa forma a nossa função marca ponto ficaria da seguinte forma:

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

Achei interessante esse método, porque a função é chamada dentro de outra função e não dentro do draw como de costume rs

Código completo:

//Variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 13;
let raio = diametro / 2;

//Variáveis da velocidade da bolinha

let velocidadeXbolinha = 6;
let velocidadeYbolinha = 6;

//variaveis da raquete

let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura =90;

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")
}


// Variaveis do Oponente 
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente = 6;

// Change de Errar
let chanceDeErrar = 0;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBordas();
  mostraRaquete(xRaquete,yRaquete);
  mostraRaquete(xRaqueteOponente,yRaqueteOponente);
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();  
  verificaColisaoRaquete(xRaquete,yRaquete);
  verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
  calculaChanceDeErrar();
  //bolinhaVoltaParaOMeioDepoisAposPonto();

}

function mostraBolinha(){
    circle(xBolinha,yBolinha,diametro);
} 

function movimentaBolinha(){
    xBolinha += velocidadeXbolinha;
    yBolinha += velocidadeYbolinha;
}

function verificaColisaoBordas(){
  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 movimentaRaqueteOponente(){
  if(keyIsDown(87)){
    yRaqueteOponente -=10;
     }
    if(keyIsDown(83)){
    yRaqueteOponente +=10;
     }
}*/

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

function verificaColisaoRaquete(){  if(xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio <    yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
    velocidadeXbolinha *= -1;
   raquetada.play();
} 
}

function verificaColisaoRaquete (x,y){
  colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXbolinha *= -1;
    raquetada.play();
  }
}

function incluiPlacar() {
    stroke(255);
    textAlign(CENTER);
    textSize(16); 
    fill(color(255,140,0))
    rect(150,10,40,20,5)
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(255,140,0))
    rect(450,10,40,20,5)
    fill(255);
    text(pontosDoOponente, 470, 26);
}

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

function calculaChanceDeErrar() {
  if (pontosDoOponente >= meusPontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}

function bolinhaVoltaParaCentroDaTela(){
        xBolinha = 300
        yBolinha = 200
}
2 respostas

Olá, Maelson! Tudo bem?

Parabéns pela implementação e também pela explicação para outros alunos, certamente você consolida seu conhecimento e ajuda outros alunos!

Continue com foco nos estudos e compartilhe seus projetos em suas redes sociais e github para montar portfólio.

Um abraço e bons estudos!

E aí Maelson, beleza ?

Eu cheguei numa solução parecida com a sua porém que preza mais pela fluidez do jogo. Ao invés de jogar a bolinha novamente ao centro da tela, resolvi colocá-la um pouco a frente da raquete no caso da marcação do ponto, assim conseguimos neutralizar a ocorrência das bolinha prender atrás da raquete e marcar pontos infinitamente para um dos jogadores apesar de não prevenir com que a bolinha prenda na raquete sem marcar pontos.

A função de marcar pontos ficou a seguinte:

function marcaPonto(){
  if(xBolinha>590){
    myPt += 1
    ponto.play();
    xBolinha=580
  }
  if(xBolinha<10){
    opPt +=1
    ponto.play();
    xBolinha=20
  }
}