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

(DÚVIDA) Iniciar com movimentação após o ponto

Oi pessoal!

Estou tentando fazer algumas melhorias no código do PONG no P5JS.

Eu queria fazer com que quando realizado o ponto (meu ou oponente), a bolinha voltasse ao xBolinha e só iniciasse quando da movimentação da seta...

Conseguem me ajudar?

Obrigada!

2 respostas
solução!

Olá Thalita, tudo certo?

Ótima pergunta!

De início, vamos modificar as variáveis de velocidade da bolinha para armazenar 2 estados, um estacionário (0) e outro em movimento (6):

let velocidadeXBolinha = [0,6];
let velocidadeYBolinha = [0,6];

Criamos algumas variáveis extras referentes a velocidade da bolinha atualmente, dessa forma poderemos manipular individualmente quando a velocidade deve mudar entre os 2 estados, como queremos que o jogo já comece com a bolinha se movendo atribuímos a variável com o valor de movimento:

let velocidadeXAtual = velocidadeXBolinha[1];
let velocidadeYAtual = velocidadeYBolinha[1];

Faremos algumas alterações no código para que possamos manejar esses momentos de velocidade:

//Seguindo a velocidade atual, seja ela 0 ou 7
function movimentaBolinha(){
    xBolinha += velocidadeXAtual;
    yBolinha += velocidadeYAtual;

}
//Inverte a direção da velcoidade atual da bolinha, estando parada ou em movimento
function verificaColisaoBorda(){
  if (xBolinha + raio> width ||
     xBolinha - raio< 0){
    velocidadeXAtual *= -1;
  }

  if (yBolinha + raio> height ||
     yBolinha - raio < 0){
    velocidadeYAtual *= -1;
  }
}
//Para a colisão da raquete seguir a mesmo norma da colisão da borda
function verificaColisaoRaquete(x, y){
  colidiu = collideRectCircle(x, y,raqueteComprimento,raqueteAltura,
xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXAtual *= -1;
    raquetada.play();
  }
}

Criaremos uma função bolinhaInicio() ela será responsável para levar e manter a bolinha na posição inicial até segunda ordem:

function bolinhaInicio() {
  xBolinha = 300;
  yBolinha = 200;
  velocidadeXAtual = velocidadeXBolinha[0];
  velocidadeYAtual = velocidadeYBolinha[0];

}
//Adicionamos ela no final de uma pontuação:
function marcaPonto(){
  if (xBolinha > 590){
    meusPontos += 1;
    ponto.play();
    bolinhaInicio();
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
    ponto.play();
    bolinhaInicio();
  }
}

Por fim adicionamos uma última função que faça a bolinha se movimentar quando cliquemos na seta para cima ou para baixo se a bolinha estiver no centro:

function bolinhaVolta() {
  if ((keyIsDown(UP_ARROW) || 
       keyIsDown(DOWN_ARROW)) &&
       xBolinha == 300 && 
       yBolinha == 200) {
       velocidadeXAtual = velocidadeXBolinha[1];
       velocidadeYAtual = velocidadeYBolinha[1];
  }

}
//Aplicamos ela dentro do movimento da nossa raquete:
function movimentaMinhaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }

  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
bolinhaVolta();
}

Prontinho, assim o código vai estar funcionando como deseja. Segue o projeto no p5 já funcionando:

Caso ainda tenha dúvidas sobre este tópico, estarei à disposição. Abraços e bons estudos!

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

Obrigada Armano! Era isso que eu precisava.