Limite até onde a raquete vai

Oi, Gustavo! Tudo certo por aí?

Desde já, agradeço a paciência em aguardar uma resposta!

Existem várias maneiras de limitar o espaço vertical da raquete. Trouxe aqui dois caminhos possíveis, então sinta-se livre para escolher aquele que você mais gostar!

• Limitando a raquete às margens: caso o valor da variável yRaquete seja menor ou igual a 0, obrigatoriamente ele permanecerá igual a 0, proibindo que a raquete vá para cima. A lógica é a mesma para a parte inferior; se yRaquete for superior ou igual à height (altura da tela) menos alturaRaquete, ela permanecerá com o mesmo valor, isto é, height - alturaRaquete (usamos este cálculo para que seja desconsiderado o comprimento vertical da raquete).

Abaixo há o código que realiza isso:

function limitaAlturaRaquete() {
  if (yRaquete <= 0) {
    yRaquete = 0;
  }

  if (yRaquete >= height - alturaRaquete) {
    yRaquete = height - alturaRaquete;
  }
}

• Deixar a raquete em um movimento circular: por meio disso, ao visualizar a movimentação da raquete, temos a impressão de que ela some pela parte superior e retorna pela inferior (o contrário também é válido). A ideia presente aqui é “inverter” a posição vertical da raquete.

Para realizar a lógica acima, podemos fazer o seguinte código:

function limitaAlturaRaquete(){
  if (yRaquete < - alturaRaquete) {
    yRaquete = height + alturaRaquete;
  }

  if (yRaquete > height + alturaRaquete) {
    yRaquete = - alturaRaquete;
  }
}

A primeira estrutura condicional verifica se yRaquete é inferior ao valor negativo de alturaRaquete. Se isso for verdade, yRaquete será igual ao valor de height mais alturaRaquete. Com isso, evitamos uma mudança brusca da posição, deixando como margem o próprio tamanho da raquete.

A segunda verificação realiza o processo inverso do primeiro bloco condicional!

Para finalizar, lembre-se que para utilizar os códigos apresentados acima, precisamos adicionar a chamada da função limitaAlturaRaquete() em draw(), da seguinte maneira:

function draw() {
    // ...outras chamadas de função
    limitaAlturaRaquete()
}

Por meio disso, evitamos que a nossa raquete ultrapasse de maneira exagerada o limite da tela! Legal, não acha?

Caso surjam dúvidas após minha explicação ou ao decorrer dos seus estudos, lembre-se de enviá-las no fórum. Fico à disposição para te auxiliar no que for necessário.

Grande abraço, Raphael!