1
resposta

[Dúvida] sistema de dificuldade

Olá todo mundo!

terminei agora o jogo do Pong no P5.js e estou tentando atribuir um sistema de dificuldades para o jogo.

facil - velocidade da bolinha = 4 medio - velocidade da bolinha = 6 dificil - velocidade da bolinha = 8

porem ao adicionar as funcoes mudarDificuldade e dificuldade a bolinha segue "infinitamente" para a direita causando um bug que os pontos do jogador vao adicionando +1 sem parar.

Alguem ja tentou fazer isso e poderia me ajudar? Obrigado

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2 ;

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


//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

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

let colidiu = false;

//Placar
let meusPontos = 0;
let pontosDoOponente = 0;


function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
  mudarDificuldade();
  facil();
}

let dificuldade = 1;

function mudarDificuldade(){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255,0,0));
  rect(200, 10, 40, 20);
  fill(255);
  text('Facil', 220, 26);
}

function facil() {
  if (dificuldade = 1) {
    velocidadeXBolinha = 6;
    velocidadeYBolinha = 6;

  } else {
    dificuldade = 0;
  }
}


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

function movimentaBolinha(){
  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, raqueteComprimento, 
      raqueteAltura);
}

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

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

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

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

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

function marcaPonto(){
  if (xBolinha < 10){
    pontosDoOponente++
  }
  if (xBolinha > 590){
    meusPontos++
  }
}
1 resposta

Oi Leandro, tudo bem?

Peço desculpas pela demora em te responder!

Analisei seu código e gostaria de deixar aqui algumas sugestões para você conseguir criar o sistema de dificuldades.

  • Criaremos uma variável que abrirá uma janela pop-up perguntando qual o nível de dificuldade (fácil (1), médio (2) ou difícil (3)) e para isso, utilizaremos a função prompt que é responsável por abrir um pop-up na janela do navegador.
let nivelDificuldade = parseInt(prompt("Escolha um nível para o jogo:\n 1 - Fácil \n 2 - Médio \n 3 - Difícil"));
  • Em seguida vamos criar a função selecionaDificuldade() que será utilizada para definir dentro do jogo qual sistema de velocidade da bolinha será atribuído, sendo o nível de complexidade aumentado pelo consequente aumento da velocidade:
function selecionaDificuldade(){
  if(nivelDificuldade == 1){
    velocidadeXBolinha = 6;
    velocidadeYBolinha = 6;
  }
  if(nivelDificuldade == 2){
    velocidadeXBolinha = 10;
    velocidadeYBolinha = 10;
  }
  if(nivelDificuldade == 3){
    velocidadeXBolinha = 15;
    velocidadeYBolinha = 15;
  }
}

selecionaDificuldade();

A função selecinaDificuldade() não precisa ser chamada dentro da função draw() ,pois ela está sendo usada como parâmetro inicial para outras funções que já estão inseridas ali, como é o caso da movimentaBolinha() por exemplo; se ela ficar dentro do Draw, ela será chamada sempre, ou seja toda hora estaremos tentando modificar a dificuldade e velocidade. Porém, a velocidade e dificuldade são valores constantes, que não se alteram ao longo do jogo, por isso pode ficar fora da função draw().

  • Depois criaremos a parte visual do grau de dificuldade que ficará no canto superior da tela indicando o nível escolhido.
function mudarDificuldade(){

  if (nivelDificuldade == 1){
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255,0,0));
    rect(200, 10, 40, 20);
    fill(255);
    text('Facil', 220, 26);
  }
  if (nivelDificuldade == 2){
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255,0,0));
    rect(200, 10, 40, 20);
    fill(255);
    text('Médio', 220, 26);
  }
   if (nivelDificuldade == 3){
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255,0,0));
    rect(200, 10, 40, 20);
    fill(255);
    text('Difícil', 220, 26);
  }
}

Vale ressaltar que para cada dificuldade você pode setar uma configuração diferente para o layout, por isso em cada condicional if utilizamos as mesmas funções para desenhar texto, colorir, dentre outros.

Como resultado dessas modificações, teremos o seguinte resultado: Gif animado colorido da área de exibição do jogo de pong mostrando inicialmente uma janela pop-up com os dizeres: “Escolha um nível para o jogo” seguido de uma legenda contendo três níveis “1- fácil”, “2-médio” e “3 - difícil”.Após selecionar as dificuldades uma janela preta se abre no canto superior esquerdo e o jogo começa com duas raquetes uma em cada lateral da  tela e a bolinha branca se movimentando aleatoriamente, sendo seguida pela raquete do oponente que está situada no canto direito. No topo da tela é possível ver o placar com os números em branco cercados por um retângulo laranja e no meio dos dois um outro retângulo vermelho com os dizeres do nível de dificuldade escolhido, primeiro.  O vídeo mostra a seleção dos três níveis de dificuldade, começando pelo nível fácil onde a bolinha se move mais lentamente, no nível médio a velocidade aumenta e no nível difícil a velocidade da bolinha fica ainda mais rápida.

Deixo abaixo o código completo com as modificações: LINK DO PROJETO NO P5 MODIFICADO

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição.

Grande abraço e bons estudos!

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