Lógica de programação_ comece em lógica com o jogo Pong e Javascript_ Aula 2 - Atividade 4 Colisão com as bordas _ Alura - Cursos online de tecnologia

Prévia do material em texto

19/12/22, 21:55 Lógica de programação: comece em lógica com o jogo Pong e Javascript: Aula 2 - Atividade 4 Colisão com as bordas | Alura -…
https://cursos.alura.com.br/course/pong-javascript/task/56091 1/3
04
Colisão com as bordas
COPIAR CÓDIGO
Transcrição
A bolinha está se movendo para além das bordas do nosso jogo, e não é este o
comportamento que queremos. Queremos que, assim que ela toque uma das
bordas, ela inverta a posição, assim como �zemos no Scratch. Para isto,
precisamos veri�car se ela está tocando a borda em algum momento, dentro da
função que está desenhando o nosso jogo ( draw() ).
Na programação, esta veri�cação, o "se", é escrito com if , e usaremos uma
variável que o próprio p5 disponibiliza. Além disso, comentaremos a linha
contendo yBolinha . Se xBolinha for maior que a largura ( width ) da tela,
queremos fazer algo, que por sua vez estará entre chaves (ou "bigodes"). No
caso, iremos multiplicar velocidadeXBolinha por -1 , para que ela se
movimente no sentido oposto.
function draw() {
 background(0);
 circle(xBolinha, yBolinha, diametro);
 xBolinha += velocidadeXBolinha;
 //yBolinha += velocidadeYBolinha;
 if (xBolinha > width) {
 velocidadeXBolinha *= -1;
 }
}
19/12/22, 21:55 Lógica de programação: comece em lógica com o jogo Pong e Javascript: Aula 2 - Atividade 4 Colisão com as bordas | Alura -…
https://cursos.alura.com.br/course/pong-javascript/task/56091 2/3
COPIAR CÓDIGO
COPIAR CÓDIGO
Ao testarmos este código, a bolinha parte da área central da tela, colide com a
lateral direita da tela, inverte o sentido, e desaparece quando ultrapassa a
lateral esquerda da tela. Sabemos que esta lateral esquerda é o X = 0, portanto
acrescentaremos outra condição no código, por meio de duas barras verticais,
o que quer dizer "ou":
if (xBolinha > width || xBolinha < 0) {
 velocidadeXBolinha *= -1;
}
Desta vez, temos a bolinha reconhecendo tanto o limite lateral direito quanto o
esquerdo. Para lidarmos com os movimentos verticais, descomentaremos a
linha com yBolinha e comentaremos a linha com xBolinha , para melhor
entendimento. Faremos algo bem similar ao que �zemos anteriormente, em
relação a X, mas desta vez lidaremos com a altura ( height ) da tela.
function draw() {
 background(0);
 circle(xBolinha, yBolinha, diametro);
 //xBolinha += velocidadeXBolinha;
 yBolinha += velocidadeYBolinha;
 if (xBolinha > width || xBolinha < 0) {
 velocidadeXBolinha *= -1;
 }
 if (yBolinha > height || yBolinha < 0) {
 velocidadeYBolinha *= -1;
 }
}
19/12/22, 21:55 Lógica de programação: comece em lógica com o jogo Pong e Javascript: Aula 2 - Atividade 4 Colisão com as bordas | Alura -…
https://cursos.alura.com.br/course/pong-javascript/task/56091 3/3
Descomentaremos a linha com xBolinha e veri�caremos que as bordas estão
sendo reconhecidas, como gostaríamos.