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

[Sugestão] Chance de errar com número aleatório

Olá, estou compartilhando minha solução. Toda vez que o oponente rebate ou faz ponto e lançado um número aleatório que pode somar ou subtrair sua posição. Assim que ele leva ponto o número aleatório zera e ele volta a acertar. Para que não haja um salto da barra em cima da bolinha também adicionei um tempo de 0,8s de resposta para atualizar a posição da barra do oponente toda vez que ele for errar.

Segue o código:

//dimensões da tela
let larguraTela = 800;
let alturaTela = 600;

//variáveis da bolinha
let xBolinha = larguraTela / 2;
let yBolinha = alturaTela / 2;
let diametro = 20;
let raio = diametro / 2;

//velocidade da bolinha
let velxBolinha = 6;
let velyBolinha = 6;

//variáveis da raquete
let larguraRaquete = 15;
let alturaRaquete = 80;
let yRaquete = alturaTela / 2 - (alturaRaquete / 2);
let colisao = false;

//variáveis minha raquete
let xMinhaRaquete = 5;
let yMinhaRaquete = yRaquete;

//raquete oponente
let xRaqueteOponente = larguraTela - larguraRaquete - 5;
let yRaqueteOponente = yRaquete;

let primeiraJogada = 0;
let numAleatorio = 0;
let taxaErro = 0;

//placar do jogo
let meusPontos = 0;
let pontosOponente = 0;
let meuPlacar = larguraTela / 4;
let placarOponente = larguraTela - larguraTela / 4;

//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(larguraTela, alturaTela);
  trilha.loop();
}

function draw() {
  background(0);

  mostraBolinha();
  validaPrimeiraJogada();
  movimentaBolinha();
  verificaBorda();

  mostraRaquete(xMinhaRaquete, yMinhaRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  moveMinhaRaquete();

  moveOponenteRaquete();

  colisaoRaquete();

  validaPontos();
  placar(meuPlacar - 20, 7);
  placar(placarOponente - 20, 7);
  incluiPlacar(meusPontos, meuPlacar, 26);
  incluiPlacar(pontosOponente, placarOponente, 26);
}

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

function validaPrimeiraJogada(){
  if(primeiraJogada == 0){
    ladoPrimeiraJogada();

    primeiraJogada = 1;
  }
}

function ladoPrimeiraJogada(){
  numAleatorio = gerarNumAleatorio(2);

  if(numAleatorio == 0){
    velxBolinha *= -1;
  }

  numAleatorio = gerarNumAleatorio(2);

  if(numAleatorio == 0){
    velyBolinha *= -1;
  }
}

function movimentaBolinha(){
  xBolinha += velxBolinha;
  yBolinha += velyBolinha;
}

function verificaBorda(){
  if(xBolinha + raio > width || xBolinha - raio < 0){
      velxBolinha *= -1;
     }
  if(yBolinha + raio > height || yBolinha - raio < 0){
      velyBolinha *= -1;
     }
}

function mostraRaquete(x, y){
  rect(x, y, larguraRaquete, alturaRaquete);
}

function moveMinhaRaquete(){
  if(keyIsDown(UP_ARROW)){
    yMinhaRaquete -= 6;
  }
  if(keyIsDown(DOWN_ARROW)){
    yMinhaRaquete += 6;
  }
}

function moveOponenteRaquete(){
  yRaqueteOponente = yBolinha - (alturaRaquete / 2) + taxaErro;
}

// Fazendo com biblioteca pronta
function colisaoRaquete(){
  //minha raquete colisão
  colisao = collideRectCircle(xMinhaRaquete, yMinhaRaquete, larguraRaquete, alturaRaquete, xBolinha, yBolinha, raio);

  if(colisao){
    velxBolinha *= -1;
    raquetada.play();
  }

  //raquete oponente colisão
  colisao = collideRectCircle(xRaqueteOponente, yRaqueteOponente, larguraRaquete, alturaRaquete, xBolinha, yBolinha, raio);

  if(colisao){
    velxBolinha *= -1;

    raquetada.play();

    atualizaTaxaErro();
  }
}

function gerarNumAleatorio(finalInt){
  let num = Math.floor(Math.random() * finalInt);

  return num;
}

function zeraTaxaErro(){
  setTimeout(function(){
        taxaErro = 0;
    },800);
}

function atualizaTaxaErro(){
    setTimeout(function(){
        numAleatorio = gerarNumAleatorio(3);

      if(numAleatorio == 0){
        zeraTaxaErro();
      } else if(numAleatorio == 1){
        numAleatorio = gerarNumAleatorio(55);

        taxaErro = numAleatorio;
      } else {
        numAleatorio = gerarNumAleatorio(55);

        taxaErro = -numAleatorio;
      }
    },800);
}

function validaPontos(){
  if(xBolinha - raio < 0){
    pontosOponente += 1;

    ponto.play();

    atualizaTaxaErro();
  }

  if(xBolinha + raio > width){
    meusPontos += 1;

    ponto.play();

    zeraTaxaErro();
  }
}

function placar(x, y){
  fill("#ffa500");
  stroke(255);
  rect(x, y, 40, 25);
}

function incluiPlacar(pontos, x, y){
  textAlign(CENTER);
  textSize(20)
  fill(255);
  text(pontos, x, y);
}
2 respostas

Também adicionei variáveis de largura e altura de tela caso a queria jogar em telas maiores.

solução!

Oi Gabriel, tudo bem?

Parabéns pela iniciativa de desenvolver além e por compartilhar sua solução conosco. Seu código ficou show! A ideia de colocar um tempo de resposta foi ótima. É muito importante colocar em prática o que se aprende e se desafiar a criar algo novo.

Neste contexto, para que você continue evoluindo ainda mais nos aprendizados, indico que você mergulhe na nossa Formação JavaScript para Frontend, onde você aprenderá a aliar esta linguagem de programação aos seus projetos para adicionar ainda mais funcionalidades e recursos.

Conte sempre com a Alura para evoluir seus estudos.

Tenha um bom dia e bons estudos.