Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Colisão da raquete do oponente com a borda de baixo (Função COM)

Ainda estou com um problema de como resolver da raquete do oponente quando bate na borda de baixo. (quando é usado a função COM). No if "verificaColisaoRaqueteOponenteBaixo()"

Meu código:

/* VARIÁVEIS */
// fundo do jogo
let xFundo = 600;
let yFundo = 400;

// bolinha
let xBolinha = xFundo / 2;
let yBolinha = yFundo / 2;

let diametro = 15;

let raio = diametro / 2;

// minha raquete
let xRaquete = 1;
let yRaquete = 150;

// raquete do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;

let velocidadeYOponente;

let chanceDeErrar = 0;

// raquetes
let colidiu = false;

let comprimentoRaquete = 10;
let alturaRaquete = 90;

// velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

// placar do jogo
let meusPontos = 0;
let pontosOponente = 0;

// sons do jogo
let raquetada;
let ponto;
let trilhaSonora;

/* FUNÇÕES */
// carregar os sons do jogo
function preload() {
  trilhaSonora = loadSound("trilha.mp3");
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
}

// montar o fundo do jogo
function setup() {
  createCanvas(xFundo, yFundo);
  trilhaSonora.loop();
}

// mostrar o jogo acontecendo
function draw() {
  background(0);

  mostraBolinha();
  mostraRaquete(xRaquete,yRaquete);
  mostraRaquete(xRaqueteOponente,yRaqueteOponente);
  movimentaBolinha();
  verificaColisaoBorda();
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaquete,yRaquete);
  verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);
  adicionaPlacar();
  marcaPonto();
  verificaColisaoRaqueteBordaCima();
  verificaColisaoRaqueteBordaBaixo();
  verificaColisaoRaqueteOponenteCima();
  //verificaColisaoRaqueteOponenteBaixo();
}

// montar a bolinha
function mostraBolinha() {
  circle(xBolinha, yBolinha, diametro);
}

// montar as raquetes
function mostraRaquete(x,y) {
  rect(x, y, comprimentoRaquete, alturaRaquete);
}

// aplicar a velocidade da bolinha verticalmente e horizontalmente
function movimentaBolinha() {
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

// verificar a colisão da bolinha com a borda do jogo
function verificaColisaoBorda() {
  if ((xBolinha + raio) > width || (xBolinha - raio) < 0) {
    velocidadeXBolinha *= -1;
  }

  if ((yBolinha + raio) > height || (yBolinha - raio) < 0) {
    velocidadeYBolinha *= -1;
  }
}

// colisão da minha raquete com as bordas
function verificaColisaoRaqueteBordaCima(){
  return yRaquete > -1;
}

function verificaColisaoRaqueteBordaBaixo(){
  return yRaquete < 310;
}

// colisão da raquete do oponente com a borda de cima
function verificaColisaoRaqueteOponenteCima(){
  return yRaqueteOponente > -1;
}

// raquete do oponente não ultrapassar a borda de baixo
/*function verificaColisaoRaqueteOponenteBaixo(){
  return yRaqueteOponente < 310;
}*/


// movimentar a minha raquete
function movimentaMinhaRaquete(){
  if (keyIsDown(UP_ARROW)){    
    if(verificaColisaoRaqueteBordaCima()){ // verifica se pode ou não movimentar as raquetes para cima.
      yRaquete -= 10;
    }  
}  
  if (keyIsDown(DOWN_ARROW)){
    if(verificaColisaoRaqueteBordaBaixo()){ // verifica se pode ou não movimentar a raquetes para baixo.
      yRaquete += 10;
    }      
  }
}

// movimentar a raquete do oponente. *Função COM*
function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete / 2 - 30;

  if (verificaColisaoRaqueteOponenteCima()) {
    yRaqueteOponente += velocidadeYOponente + chanceDeErrar;
    calculaChanceDeErrar();
  }
  if (verificaColisaoRaqueteOponenteBaixo()) {
    yRaqueteOponente += velocidadeYOponente + chanceDeErrar;
    calculaChanceDeErrar();
  }

}

// verfica se a bolinha esta colidindo com a raquete
function verificaColisaoRaquete(x,y) {
  colidiu = collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);

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

// montar o placar do jogo
function adicionaPlacar() {
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(139,0,139));
  rect(150, 10, 40, 20);
  fill(255);
  text(meusPontos, 170, 26);
  fill(color(139,0,139));
  rect(450, 10, 40, 20);
  fill(255);
  text(pontosOponente, 470, 26);
}

// marcando os pontos 
function marcaPonto() {
  if (xBolinha > 590) {
    meusPontos += 1;
    ponto.play();
  }
  if (xBolinha < 10) {
    pontosOponente += 1;
    ponto.play();
  }
}

// calculando a chance do oponente de errar
function calculaChanceDeErrar() {
  if (pontosOponente >= meusPontos) {
    chanceDeErrar += 1;

    if (chanceDeErrar >= 39) {
      chanceDeErrar = 40;
    }
  } 
  else {
    chanceDeErrar -= 1;

    if (chanceDeErrar <= 35) {
      chanceDeErrar = 35;
    }
  }
}
1 resposta
solução!

Oi Leticia, como você está?

Peço desculpas pela demora em obter um retorno.

Para que o nosso código de colisão da raquete do oponente na parte de baixo da tela funcione, precisamos considerar que a colisão da borda de cima somente permite o movimento da raquete quando ela estiver acima de -1, dessa forma, qualquer declaração posterior de colisão com a parte de baixo não será considerada:

function verificaColisaoRaqueteOponenteCima(){
  return yRaqueteOponente > -1;
}

Dessa forma, precisamos além de indicar para o nosso código em que momento a raquete deve parar de se movimentar, nesse caso usando a função verificaColisaoRaqueteOponenteBaixo, mas também, adicionar uma limitação fixa da raquete na borda de baixo.

Para tal, precisamos identificar quando a raquete estiver próxima da borda de baixo, sendo assim, usamos a altura da tela e a altura da raquete. A altura da raquete define a sua extensão, ao subtrairmos uma da outra podemos achar quando a ponta da raquete está exatamente encostada na borda, ao realizarmos essa subtração temos o valor de onde queremos que a raquete esteja, sendo assim, temos o valor y da raquete, a sua posição vertical:


// raquete do oponente não ultrapassar a borda de baixo
function verificaColisaoRaqueteOponenteBaixo(){
  return yRaqueteOponente >= height - alturaRaquete;
}

Por fim, adicionaremos uma limitação fixa para a raquete, onde o movimento não poderá passar daquele ponto, dessa vez, iremos atribuir ao yRaqueteOponente o valor da posição superior da raquete, assim, impedimos que a raquete passe daquele ponto.

  if (verificaColisaoRaqueteOponenteBaixo()) {
    yRaqueteOponente += velocidadeYOponente + chanceDeErrar;
    calculaChanceDeErrar();
//Limitação da raquete
    yRaqueteOponente = height - alturaRaquete
  }
}

Após essas modificações, teremos o seguinte resultado:

Inicia transcrição. O gif ou uma série de capturas que dá uma impressão de vídeo, mostra em um fundo acinzentado escuro 2 telas coladas uma na outra. Uma tela lateral esquerda com uma série de códigos e a outra tela na lateral direita com um jogo rodando. O gif serve para demonstrar para a aluna Leticia o código funcionando e limitando o movimento das raquetes dentro da tela. Na tela dos códigos é destacado uma função principal referente ao movimento da raquete do oponente. Na tela do jogo há dois retângulos em cada extremidade, eles perseguem uma bolinha dentro da tela. Fim da transcrição.

Para acessar o código completo com as modificações realizadas, segue abaixo o projeto:

Se me permite, uma dica em relação à estrutura organizacional do seu código e que também influencia em relação a boas práticas de programação, é termos cautela ao separar em várias funções o código. Uma função deve ter apenas uma única responsabilidade, ao quebramos em várias partes, podemos dificultar a compreensão e manutenção do código.

function verificaColisaoBorda() {
  if ((xBolinha + raio) > width || (xBolinha - raio) < 0) {
    velocidadeXBolinha *= -1;
  }

  if ((yBolinha + raio) > height || (yBolinha - raio) < 0) {
    velocidadeYBolinha *= -1;
  }
}

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

  if (yRaqueteOponente < -1 || yRaqueteOponente > 310 && yBolinha > 310 || yBolinha < -5){

  } else{
    yRaqueteOponente += velocidadeYOponente + chanceDeErrar
    calculaChanceDeErrar()  
  }
}

Após essas modificações, teremos o seguinte resultado:

Inicia transcrição. O gif ou uma série de capturas que dá uma impressão de vídeo, mostra em um fundo acinzentado escuro 2 telas coladas uma na outra. Uma tela lateral esquerda com uma série de códigos e a outra tela na lateral direita com um jogo rodando. O gif serve para demonstrar para a aluna Leticia o código funcionando e limitando o movimento das raquetes dentro da tela. Na tela dos códigos são destacadas duas funções principais, uma referente ao movimento da raquete do usuário e a sobre o movimento da raquete do oponente. Na tela do jogo há dois retângulos em cada extremidade, eles perseguem uma bolinha dentro da tela. Fim da transcrição.

Para acessar o código completo com as modificações realizadas, segue abaixo o projeto:

Fico à disposição.

Conte sempre com o fórum da Alura para evoluir seus estudos.

Um bom dia e bons estudos!

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