[Dúvida] Estou com esse mesmo problema (Não consigo fazer o oponente errar) | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Eduardo Appio Dias Pini

| 90.7k xp | 14 posts

Designer Senior

Olhei a solução apresentadada nesse tópico (Não consigo fazer o oponente errar). Porem não esta funcionando. Ajuda

//variáveis da bolinha
let xBall = 300;
let yBall = 200;
let diameter = 20;
let radious = diameter / 2;

//velocidade da bolinha
let speedxBall = 5;
let speedyBall = 5;

//variáveis da raquete
let comprRaquete = 10;
let altuRaquete = 50;
let xRaquete = 5;
let yRaquete = 200;

//variáveis do oponente
let xRaqueteOp = 590;
let yRaqueteOp = 200;
let speedyRaqueteOp;
let errorPossible = 0;

//placar do jogo
let pontos = 0;
let pontosOp = 0;

let colidiu = false;

let raqueteHit
let ponto
let trilha

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

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

function draw() {
  background(0);
  showBall();
  moveBall();
  collisionBall();
  showRaquete(xRaquete, yRaquete);
  moveRaquete();
  // collideRaquete();
  collideRaqBiblioteca(xRaquete, yRaquete);
  collideRaqBiblioteca(xRaqueteOp, yRaqueteOp);
  showRaquete(xRaqueteOp, yRaqueteOp);
  moveBallOp();
  incluiPlacar();
  score();
}

function showBall(){
  circle(xBall,yBall,diameter);
}

function showRaquete(x,y){
  rect(x, y,comprRaquete, altuRaquete);
}

function moveBall (){
  xBall += speedxBall;
  yBall += speedyBall;
}

function collisionBall (){
  if (xBall + radious > width || xBall - radious < 0){
    speedxBall *= -1;
  }

  if (yBall + radious > height || yBall - radious < 0){
    speedyBall *= -1;
  }
}

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

function collideRaquete(){
  if (xBall - radious < xRaquete + comprRaquete && yBall - radious < yRaquete + altuRaquete && yBall + radious > yRaquete ){
    speedxBall *= -1;
    raqueteHit.play();
  }
}

function collideRaqBiblioteca(x, y){
  colidiu = collideRectCircle(x, y, comprRaquete, altuRaquete, xBall, yBall, radious);
  if (colidiu){
    speedxBall *= -1;
    raqueteHit.play();
  }

  // if (keyIsDown(87)){
  //   yRaquete -= 10;
  // }
  // if (keyIsDown(83)){
  //   yRaquete += 10;
  // }
}

function moveBallOp(){
  speedyRaqueteOp = yBall - yRaqueteOp - comprRaquete / 2 - 30;
  yRaqueteOp += speedyRaqueteOp + errorPossible
  errorChancePossible();
}

function errorChancePossible(){
  if (pontosOp >= pontos){
    errorPossible += 1
    if (errorPossible >= 39){
      errorPossible = 40
    }
  }
  else {
    errorPossible -=1
    if (errorPossible <=35){
        errorPossible = 30
    }
  }
}

function incluiPlacar(){
  stroke(255);
  textSize(20);
  textAlign(CENTER);
  fill(color(36, 113, 163));
  rect(130, 10, 40, 20);
  fill(255);
  text(pontos, 150, 27);
  fill(color(36, 113, 163));
  rect(430, 10, 40, 20);
  fill(255);
  text(pontosOp, 450, 27);
}

function score(){
  if (xBall + radious > 590){
    pontos += 1
    ponto.play();
  }

  if (xBall - radious < 10){
    pontosOp += 1
    ponto.play();
  }
}

2 respostas

solução!

por RODRIGO SILVA HARDER

| 2300.6k xp | 4888 posts

Alura Scuba Team Monitor de Fórum Ops

02/03/2023

Oi Eduardo, tudo bem?

A função errorChancePossible() atua por meio de um sistema condicional utilizando ife else para construir a lógica que exprime o seguinte comportamento: sempre que os pontos do oponente forem maiores do que os pontos do jogador haverá o incremento na chance do oponente errar e no momento em que os pontos do jogador forem maiores que a pontuação do oponente esse incremento é removido na mesma proporção, como podemos ver pelo código:

function errorChancePossible(){
  if (pontosOp >= pontos){
    errorPossible += 1
    if (errorPossible >= 39){
      errorPossible = 40
    }
  }
  else {
    errorPossible -=1
    if (errorPossible <=35){
        errorPossible = 30
    }
  }
}

Essa é uma das maneiras de executar a chance de erro do oponente. Contudo há outra maneira mais efetiva para conseguir realizar a chance de erro de forma mais aleatória.

Para realizar essa ideia, precisaremos comentar ou remover todos os trechos de código referentes à função errorChancePossible().

Em seguida, podemos partir para o ponto principal!

Para o problema em questão, temos o trecho de código abaixo:

let direcaoRaqueteOponente = 1;

function movimentaoponente(){
  const mediaYBolinha = yBolinha + raio;
  const mediaYRaqueteOponente = yraqueteoponente + (raquetealtura/2);

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

Vamos analisar o que foi feito em etapas?

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

Foi criada a variável direcaoRaqueteOponente. Ela determinará se a raquete do oponente será movimentada para baixo ou para cima.

Dentro de movimentaoponente()

Foi criada a variável mediaYBolinha, que armazenará a localização média da bolinha na tela;
Foi criada a variável mediaYRaqueteOponente, que armazenará a localização média da raquete do oponente na tela;
Caso mediaYBolinha seja superior a mediaYRaqueteOponente, significa dizer que a bolinha está abaixo da raquete do oponente verticalmente. Por esse motivo, direcaoRaqueteOponente continua sendo positivo, 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:

 yraqueteoponente += 5 * random(0.6, 0.95) * direcaoRaqueteOponente;

O valor 5 foi apenas um número que trouxe um bom resultado à operação;
random(0.6, 0.95) gerará um valor aleatório entre o intervalo de 0.6 e 0.95;
direcaoRaqueteOponente determinará se a raquete irá para cima ou para baixo, como vimos anteriormente.

Com isso, a raquete do oponente passa a funcionar normalmente, ora acertando, ora errando! Muita bacana, não acha?

Para deixar seu jogo ainda mais legal, adicionaremos uma função que altera a posição horizontal da bolinha caso ela esteja muito próxima da borda e da raquete ao mesmo tempo, evitando o problema de ficar presa. Veja só como ficou:


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

Lembre-se de chamá-la dentro de draw(), da seguinte maneira:

function draw() {
 // ... restante do código
  bolinhaNaoFicaPresa();
}

Espero que tenha compreendido minha explicação! Caso surjam dúvidas ao decorrer dos seus estudos, lembre-se que você pode contar com o fórum. Fico à disposição para te ajudar da melhor maneira possível!

Caso mesmo com as dicas acima você não consiga corrigir esse problema, sugiro que você compartilhe o link do seu código para que eu possa te ajudar da melhor maneira possível.

Espero que dê tudo certo!

Grande abraço e bons estudos!

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

por Eduardo Appio Dias Pini

| 90.7k xp | 14 posts

Designer Senior

03/03/2023

Nossa Rodrigo, muito obrigado pela solução. Cara você esmiuçou todo o código, eu estava sem entender como a function "erra oponente" funcionava.

Muitissimo obirgado.

Vou aplicar no meu código agora, abraços.

Chegou a hora de transformar