Entrar Ainda não tem acesso?
1
resposta

Oponente só acerta/erra quando eu acerto/erro

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Editando placar e adicionando sons e atividade Para saber mais: erro do oponente

por Andressa Lombardoso
| 50k xp | 1 posts
Diagramadora

O oponente parece repetir os mesmos movimentos da minha raquete, ele só acerta quando eu acerto e só erra quando eu erro.

Tentei alterar os valores da função calculaChanceDeErrar() e a bolinha ou "buga" atrás da minha raquete ou o oponente não erra mais. 

//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 18;

//variáveis velocidade da bolinha
let velocidadexBolinha = 6;
let velocidadeyBolinha = 6;
let raio = diametro / 2;

//variáveis minha raquete
let xRaquete = 5;
let yRaquete = 150;

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

let comprimentoRaquete = 8;
let alturaRaquete = 80;

//variáveis dos pontos
let meusPontos = 0;
let pontosDoOponente = 0;

let colidiu = false;

let chanceDeErrar = 0;

//variáveis sons
let trilha;
let raquetada;
let ponto;

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

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

function draw() {
  background(0);
  mostraBolinha();
  movimentoBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPontos();
  bolinhaNaoBuga();
}

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

function movimentoBolinha(){
  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,comprimentoRaquete,alturaRaquete)
}

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

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

function verificaColisaoRaquete(x,y){
  colidiu = collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadexBolinha *= -1;
    raquetada.play();
  }
}

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

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  fill(color(128,0,128));
  rect(170, 10, 30, 20);
  fill(285);
  text(meusPontos, 185,24);
  fill(color(128,0,128));
  rect(430, 10, 30, 20);
  fill(285);
  text(pontosDoOponente, 445,24);
}

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

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

function bolinhaNaoBuga(){
    if (xBolinha - raio < 0){
    xBolinha = 23
    }
}
1 resposta
por Andrieli Gonçalves
| 981.4k xp | 1973 posts
Alura Scuba Team Monitora Escola Semente | Fórum Ops

Oi, dev! Tudo bom?

Desde já, agradeço a paciência em aguardar uma resposta!

Inicialmente, uma maneira de tornar o nosso jogo mais dinâmico, fazendo com que a raquete do oponente acerte ou erre sem um padrão existente, é por meio da alteração da lógica que envolve a função movimentaRaqueteOponente().

Para isso, separei o processo em duas etapas, vamos vê-las mais de perto?

Alterações fora da função movimentaRaqueteOponente()

O primeiro passo a ser feito é criar a variável direcaoRaqueteOponente. Ela determinará se a raquete do oponente será movimentada para baixo ou para cima.

Abaixo há o trecho de código que cria a variável:

let direcaoRaqueteOponente = 1;

Dentro de movimentaRaqueteOponente()

Para o desenvolvimento dos trechos de código associados à função, precisamos, a principio, desconsiderar os comandos pré-existentes. Você pode comentá-los ou excluí-los!

Depois disso, partiremos para o código que resultará no movimento da bolinha. Você pode vê-lo logo abaixo:

function movimentaRaqueteOponente(){
  const mediaYBolinha = yBolinha + raio;
  const mediaYRaqueteOponente = yRaqueteOponente + (alturaRaquete/2);

  if (mediaYBolinha > mediaYRaqueteOponente) {
    direcaoRaqueteOponente = 1;
  } else {
    direcaoRaqueteOponente = -1;
  }
  yRaqueteOponente += 5 * random(0.55, 0.95) * direcaoRaqueteOponente;
}

Mas afinal, o que cada parte significa?

  • A variável mediaYBolinha armazenará a localização média da bolinha na tela, por meio soma entre yBolinha e raio.
  • A variável mediaYRaqueteOponente armazenará a localização média da raquete do oponente na tela, através da soma entre yRaqueteOponente e a metade de alturaRaquete;
  • Caso mediaYBolinha seja superior a mediaYRaqueteOponente, significa dizer que a bolinha está abaixo da raquete do oponente verticalmente. Por esse motivo, direcaoRaqueteOponente continua sendo positiva, a fim de aumentar o valor de yRaqueteOponente (fazer a raquete descer). Caso isso não seja verdade, direcaoRaqueteOponente será igual a -1, fazendo com que a raquete adversária vá para cima;
  • Por fim, realizou-se uma atribuição com soma:
    • O valor 5 foi apenas um número que trouxe um bom resultado à operação;
    • random(0.55, 0.95) gerará um valor aleatório entre o intervalo de 0.55 e 0.95 (através dele, deixaremos o movimento da raquete do oponente mais dinâmico);
    • direcaoRaqueteOponente determinará se a raquete irá para cima ou para baixo, como vimos anteriormente.

Com isso, finalizamos o desenvolvimento da função movimentaRaqueteOponente().

Depois essa etapa, vamos ver uma maneira de evitar que a bolinha fique presa atrás das raquetes? Olha só o código abaixo:

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

Tendo como base a função bolinhaNaoBuga(), que já estava em seu código, adicionei mais algumas coisas:

  • Na primeira condicional, alterei o operador relacional “menor que” para “menor ou igual a”. Assim, caso a subtração entre xBolinha e o raio seja igual a zero, imediatamente a bolinha terá a sua localização alterada para a posição 20;
  • Além disso, foi inserida uma outra condicional logo abaixo. Caso a primeira verificação retorne false, então realizamos uma outra: se xBolinha for maior ou igual a 588, significa dizer que ela está muito próxima da lateral direita. Desse modo, a posição dela passa a ser o comprimento da tela subtraído de 20.

Ademais, vale salientar que, além das mudanças acima, será necessário alterar o diâmetro da bolinha. Ao invés de 18, podemos deixá-lo com o valor 20:

let diametro = 20;

Espero que tenha compreendido! Caso surjam dúvidas após minha explicação ou ao decorrer dos seus estudos, sinta-se confortável para enviá-las no fórum. Fico à disposição para te auxiliar!

Abraços e até mais!

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