Você está na página 1de 16

Colisão com as bordas

Aula 4
Pensamento
Computacional

Série: 1ª EM

Tema: Colisão com as bordas

Aula 4

2
O que vamos aprender?
Conhecer as estruturas condicionais do
JavaScript;

Utilizar as estruturas condicionais e fazer


com que a bolinha do jogo Pong
permaneça no canto da tela;

Efetuar comentários no código;

Utilizar funções e refatoração. Acompanhe o vídeo da aula

3
Função draw()
Assim como no Scratch, precisamos fazer com que a

bolinha, ao tocar em uma das bordas, inverta a

direção do seu movimento. Para isso, verificaremos

se ela esbarra na borda da tela do jogo em algum

momento. Utilizaremos a função draw() (draw

significa desenhar, em inglês), que será o responsável

por esta etapa.

Função drawn()

4
Condicionais
Para saber se a bolinha esbarra nas bordas da tela, é necessário conhecer exatamente o limite
delas. Em Programação, podemos realizar essa verificação ao usar a condicional "se", escrito em
inglês if.

Invés do movimento acontecer em duas dimensões, nos eixos x e y, limitaremos o movimento


apenas em um eixo. Para isso, devemos mencionar o código, e, logo em seguida, aplicá-lo.

Para saber se a bolinha está tocando as bordas no eixo x, escreveremos uma condicional para a
largura da tela, que, em inglês, é width.

5
Comentários no código
Na programação que estamos trabalhando, utilizaremos o comando “comentar” na linha que desejamos que
seja desativada. Inserimos duas barras (//) na frente da linha que será desativada. Assim, essa linha será
desconsiderada na execução do código. Por exemplo, se queremos limitar o movimento da bolinha para que
ocorra apenas no eixo x, comentaremos na linha em que está o código referente ao movimento da bolinha no
eixo y.

Comentário no eixo y, o código dessa


linha não será executado.

6
Usando as condicionais
Depois de adicionar o comentário no eixo y, digitaremos uma condicional para o eixo x referente ao movimento
da bolinha. Queremos saber se a bolinha toca o limite da largura da tela nesse eixo, para isso, iremos usar o
comando width. Indicamos que se a posição da bolinha for maior que essa largura (Xbolinha > width) , será
feita uma ação, que é multiplicar a velocidade da bolinha por -1. A bolinha passará a se movimentar no
sentido oposto. Essa ação precisa estar entre chaves {}.

Condicional if, “se” a


De acordo com a condicional, executar a
posição da bolinha no
multiplicação da velocidade por -1. Repare
eixo x for maior que a
que a ação está entre chaves. { }.
largura estabelecida.

7
Usando as condicionais
Ao testarmos o código da página anterior, a bolinha parte da área central da tela, colide com a lateral direita,
inverte o sentido e desaparece quando ultrapassa a lateral esquerda da tela.
A lateral esquerda da tela é a posição x = 0. Portanto, acrescentaremos duas barras verticais (||) que
representam o operador lógico “ou”:

Com isso, estamos dizendo que se a posição x


da bolinha for maior que a largura máxima
(XBolinha > width) ou (||) se a posição x da
bolinha for menor que zero (xBolinha < 0),
“Ou”
devemos multiplicar a velocidade de XBolinha
por -1, logo invertemos a sua direção.

8
Mudando o eixo com comentário
Agora que a bolinha reconhece os limites laterais direito e o esquerdo, precisamos realizar o mesmo movimento
no eixo y. O primeiro passo é retirar o comentário da linha referente ao eixo y e adicionar o comentário na linha
do eixo x.

Comentário na linha referente ao eixo x: os comandos não serão


executados.

9
Criando uma nova condicional
No eixo x, trabalhamos a largura (horizontal) ao aplicarmos o width. Para o eixo y, iremos nos concentrar na altura
(vertical) com o uso do height (“altura” em inglês). Para executar no eixo y, criaremos uma nova condicional, e
digitamos mais um if. Dessa forma, queremos dizer que: se o y da bolinha for maior que a altura máxima
(xBolinha > width) ou (||) se o y da bolinha for menor que zero (xBolinha < 0), é necessário multiplicar a
velocidade em YBolinha por -1.

Condicional if, se a posição no


eixo x for maior que a largura.

Condicional if, se a posição no eixo X for maior que a largura.


Condicional if, se a posição no
eixo y for maior que a altura.

10
Eixos x e y
Retiraremos o comentário da
linha xBolinha e iremos verificar
que as bordas estão sendo
reconhecidas. Devemos, então,
escrever o seguinte código:

11
Raio e diâmetro
Uma parte da bolinha ainda ultrapassa os limites
das bordas. Isso acontece porque a descrição do
código circle() considera o centro do círculo como
parâmetro na colisão com as bordas. Porém, não
queremos que isso ocorra.
Para que a bolinha não ultrapasse os limites das
bordas, precisamos que o movimento se dê a partir
do raio, isto é, dos limites da bolinha, invés do seu
Variável raio com valor do diâmetro
centro. dividido por 2.

Como o diâmetro é duas vezes maior que o valor


do raio, criaremos a variável raio, que receberá
diametro / 2.

12
Raio e diâmetro
Para que a bolinha reconheça todas as bordas, tendo como referencial a medida do raio, precisamos alterar o
código para que ele some o valor do raio no lado direito e subtraia o mesmo valor do lado esquerdo. Faremos
esse processo tanto para o eixo x como y.

13
Refatoração e funções
Na função draw(), realizamos várias ações: desenhar,
movimentar a bolinha em ambos os eixos e verificar se
a mesma colide com as bordas. Com a refatoração,
podemos indicar novas funções para cada uma dessas
ações. O processo de refatoração nos auxilia a
melhorar o código, torna-o mais claro e eleva sua
legibilidade.

É bom ressaltar que as funções devem estar indicadas


dentro da função draw().

14
Refatoração e funções
Para melhorar o código, podemos inserir comentários nas primeiras linhas a fim de identificar qual é a parte do
código que as variáveis se referem. Por exemplo, podemos indicar as variáveis da bolinha nos eixos x e y, o
diâmetro e o raio; podemos estabelecer também os valores que se referem à velocidade da bolinha nos eixos x
e y.
Lembrando que as linhas de código com comentários não são consideradas na execução, portanto, não
alteram o comportamento.

15
Desafio
a. Agora que você aprendeu novas funcionalidades do JavaScript, refaça os passos

da aula para dar continuidade ao seu projeto salvo no p5.js. Lembre-se

sempre de salvar o seu projeto.

b. Em seguida, teste diferentes valores das variáveis de velocidade para

conhecer outros movimentos da bolinha. Será que o nosso código funciona

com números negativos? O nosso código sabe trabalhar com isso?

16

Você também pode gostar