1
resposta

[Dúvida] Quando aperto nas setas, a barra some

https://editor.p5js.org/gabrielgts/sketches/a9mK7TlwP


//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2 ;




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


//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificarColisaoborda();
  movimentaMinhaRaquete();





  rect (xRaquete,yRaquete ,raqueteComprimento
        ,raqueteAltura );


 }



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

function movimentaBolinha(){

  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificarColisaoborda(){
  if (xBolinha + raio > width || xBolinha - raio < 0){
    velocidadeXBolinha *= -1;
  }
  if (yBolinha + raio > height || yBolinha - raio < 0 ){
    velocidadeYBolinha *= -1;
  }

}


function movimentaMinhaRaquete(){  
  if (keyIsDown(UP_ARROW)) {
    y -= 10;
  }

  if (keyIsDown(DOWN_ARROW)) {
    y += 10;
  }




}
1 resposta

Opa Gabriel, tudo certo?

Testando seu código ele está certinho! Quando comenta sobre a barra, está se referindo a raquete? Se sim, quando ela desaparece quando usa os comandos de movimento quer dizer que ela ultrapassa a tela visível? Caso seja esse o caso, isso ocorre por não definirmos um valor fixo para a raquete parar de se movimentar, causando o efeito de "extrapolar" a tela.

Para resolver isso, podemos limitar o movimento da raquete do jogador adicionando as seguintes linhas de código na nossa função de movimento:

  if (yRaquete + raqueteAltura > height) {
    yRaquete = height - raqueteAltura
  }
  if (yRaquete < 0) {
    yRaquete = 0
  }

Assim, toda vez que a raquete ultrapassa um pouquinho as bordas superior e inferior, o código automaticamente reposiciona a raquete dentro dos limites, e consequentemente a raquete não sai da tela em momento nenhum. Sendo que:

  • yRaquete + raqueteAltura > height - vai considerar não somente a posição y da raquete como também a sua altura, considerando assim, a ponta da raquete;
  • yRaquete = height - raqueteAltura - posiciona a raquete verticalmente na tela com base na altura da tela e da raquete;

Caso surja alguma dúvida, fico à disposição.

Tenha um bom dia e bons estudos.

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