2
respostas

[Sugestão] SolucaoSimplesParaBolinhaNaoTravar

Minha solucao nao foi criar uma nova function, mas sim alterar a function marcaPonto, para o seguinte:

function marcaPonto(){
  if(xBolinha > 585) { *//aqui mudei, era 590, alterei para 585, pois se somarmos, a espessura da raquete (10) mais o afastamento (5), ou seja se a bolinha passar a linha da raquete ja sera considerado ponto;*
    meusPontos += 1;
    ponto.play();
    xBolinha = 300; **//apos a pontuacao a bolinha volta ao centro da tela, como em uma partida de futebol**
    yBolinha = 200;
  }
  if(xBolinha < 15) { **//aqui a mesma coisa de "<10, passei para <15**
    pontosDoOponente += 1;
    ponto.play();
    xBolinha = 300;**//mesma logica da bola voltar ao centro**
    yBolinha = 200;
  }
}

Digam me oque acharam.. tem algo que deixei de considerar? quem quiser segue meu code inteiro(o fundo deste e verde kkk nao reparem):

//variaveis da bolinha;
var xBolinha = 300;
var yBolinha = 200;
var diametroBolinha= 13;
let raioBolinha= diametroBolinha/ 2;

//velocidade da bolinha;
var velocidadeXBolinha = 5;
var velocidadeYBolinha = 5;

//variaveis da minha raquete;
let xRaquete = 5;
let yRaquete = 150;
let raqueteWidth =10;
let raqueteHigh = 90;
let colidiu =false; //variavel usada para colisao da biblio
let meusPontos= 0;

//variaveis da raquete oponente;
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;
let pontosDoOponente= 0;
let chanceDeErrar =50;

//Sons do jogo
let raquetada;
let ponto;
let trilha;

function preload(){ //funcao usada para carregar algo

  trilha = loadSound("trilha.mp3"); //aqui cusamos o loadSound e atribuimos o nome e formato do arquivo;
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
}

//define o limite do das bordas
function setup() {
 createCanvas(600, 400); 
 //trilha.play(); //nao usamos play pq se nao ele toca ate a musica acabar e queremos que toque em loop, por tanto funcao loop;
  trilha.loop();
}

//function pre fabricada pela js que desenha e roda em loop tudo 
function draw() {
  background('darkgreen');
  mostraBolinha(); //mostra a bolinha criada
  movimentaBolinha(); //define a velocidade e direcao da bolinha
  verificaColisaoBorda(); //verifica se atingiu o (limite da tela - raio)
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete (xRaqueteOponente, yRaqueteOponente)
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete,yRaquete);
  verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);
  movimentaRaqueteOponente();
  incluiPlacar();
  marcaPonto();

}

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

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

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

  }

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

}

function mostraRaquete(x,y) {
  rect(x, y, raqueteWidth, raqueteHigh)
}


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


function verificaColisaoRaquete(xDaRaquete,yDaRaquete) {
  colidiu= 
  collideRectCircle(xDaRaquete, yDaRaquete, raqueteWidth, raqueteHigh, xBolinha, yBolinha, raioBolinha);

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

function movimentaRaqueteOponente() {
  //nao usaremos a funcao abaixo por testaremos um controle multiplayer
  velocidadeYOponente = yBolinha - yRaqueteOponente -raqueteHigh/2 -30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar;
  calculaChanceDeErrar();

  //abaixo a nova funcao na qual vc pode jogar com as teclas "w" e "S"
   //if(keyIsDown(87)) {
   // yRaqueteOponente -= 10;
 // }
  //if (keyIsDown(83)){
  //  yRaqueteOponente += 10;
  //}
}

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

function incluiPlacar() {
  stroke(255); //stroke significa contorno e o numero dentro e a cor;
  textAlign(CENTER)
  textSize(20);
  fill(color(255,140,0));
  rect(180,9,40,20,5);
  fill(color(255,140,0));
  rect(380,9,40,20,5);
    fill(255);
  text(meusPontos,200, 26);
   fill(255);
  text(pontosDoOponente,400, 26);
}

function marcaPonto(){
  if(xBolinha > 585) {
    meusPontos += 1;
    ponto.play();
    xBolinha = 300;
    yBolinha = 200;
  }
  if(xBolinha < 15) {
    pontosDoOponente += 1;
    ponto.play();
    xBolinha = 300;
    yBolinha = 200;
  }
}

2 respostas

Oi Andre, tudo bem?

Testei seu código para que a bolinha não fique presa na raquete, e de fato essa solução minimiza o problema. Parabéns por pensar em fazer a bolinha voltar ao centro do campo toda vez que é marcado um ponto, seu código demonstra um bom uso da lógica de programação para resolver bugs.

Gostaria também de te parabenizar pelo seu código, ele apresenta clareza, coerência e boa indentação. Caso queira aprofundar seus conhecimentos sobre lógica de programação usando o p5.js para criar um jogo, recomendo o curso de Lógica de programação: laços e listas com Javascript.

Se porventura se sentir confortável em compartilhar seu conhecimento, interagir com outros estudantes, trocar experiências e fazer networking, sugiro que participe do discord de alunas e alunos:

Continue se dedicando aos seus estudos e caso tenha dúvidas, estarei à disposição para te ajudar :)

Sucesso e bons estudos!

Gostei da sua solução, venho testando outras soluções do fórum mas a sua foi a única que mostrou clareza na aplicação do código, apenas criar uma função não ajuda, se vc não consegue explicar a aplicação no código, quem está tendo seu primeiro contato com programação não compreende a aplicabilidade da função! Obrigado!