Criando a raquete do oponente

Aula 6
 Pensamento
Computacional

Série: 1ª EM

Criando a raquete do oponente

Aula 6

2
O que vamos aprender?

Construir a raquete do oponente

utilizando a linguagem JavaScript.

Criar os códigos da colisão da raquete com

a bolinha.

Adicionar placar ao jogo.

Acompanhe o vídeo da aula.

3
Criando a raquete do oponente
No jogo, a bolinha se movimenta para várias direções,
a raquete se movimenta por meio das teclas de setas e
há colisão entre a raquete e a bolinha.
Porém, não estamos jogando contra alguém. Assim
como fizemos no Scratch, vamos criar um oponente
representado por outra raquete. Para construir a
raquete do oponente, precisamos criar variáveis para
representar os eixos x e y da raquete do oponente.

Assim como fizemos para as variáveis da raquete,

adicionaremos as variáveis do oponente.
Iniciamos escrevendo as variáveis x e y do novo
elemento de nosso jogo, que chamaremos de
RaqueteOponente.

4
Criando a raquete do oponente
Para definirmos os parâmetros da raquete do oponente, criaremos também uma função similar à
mostraRaquete(). Nas últimas linhas do código, iremos escrever:

Para executá-la, chamaremos a função acima em draw(). As funções mostraRaqueteOponente()

e mostraRaquete() são iguais, exceto pelos dois primeiros parâmetros de rect(). Perceba que temos
duas funções que executam a mesma tarefa, ou seja, podemos utilizar a Lógica de Programação e
e modificar a função mostraRaquete(), como indicado abaixo.
Agora, ela terá dois parâmetros (pois
teremos duas raquetes). O xRaquete e o
yRaquete passarão a ser apenas x e y,
respectivamente:
5
Criando a raquete do oponente
Depois que definimos a função mostraRaquete para dois parâmetros (x e y), precisamos chamá-la na função
draw(), que será escrita da seguinte maneira:

6
Criando a raquete do oponente
Adicionaremos também os valores das variáveis da raquete do oponente, que criaremos com o let.

O valor da variável x da raquete do oponente deve ser 585. Ela se

posicionará no lado oposto da primeira raquete; e o valor da variável y
de ambas as raquetes deve ser 150, para que elas estejam posicionadas
a uma mesma altura.

7
Movimentando a raquete do oponente
Criamos a raquete do oponente, colocamos os valores das variáveis e a posicionamos em um lugar estratégico
para o jogo. Agora, precisamos movimentá-la, para dar continuidade ao jogo.

Raquete do
oponente.

8
Movimentando a raquete do oponente
Para iniciar o movimento da raquete do oponente, chamaremos a função movimentaRaqueteOponente()
dentro do bloco de draw() nas últimas linhas do código.

Função movimentaRaqueteOponente()
escrita no final de nosso código.

Função movimentaRaqueteOponente() na
função draw().

9
Movimentando a raquete do oponente
No Scratch, movimentamos a raquete adversária passando a posição Y da bolinha, para que ela fosse seguida, e
alterávamos essa posição. Faremos o mesmo no p5.js: criaremos uma função para alterar a velocidade Y
relacionada ao oponente, similarmente ao que temos para a movimentação da bolinha, velocidadeXBolinha
e velocidadeYBolinha. Antes, criaremos a variável velocidadeYOponente nas variáveis do oponente:

10
Movimentando a raquete do oponente
Em seguida, manipularemos os valores na função movimentaRaqueteOponente que vimos no slide anterior:

Desse modo, indicaremos que velocidadeYOponente receberá a posição Y da bolinha, subtraída

da posição Y da raquete do oponente e da altura da raquete. Dessa forma, a bolinha sempre
tocará em algum ponto da raquete. Esse valor será dividido por 2 e, ainda, subtrairemos 30,
mesma margem utilizada no Scratch.

11
Colisão com o oponente
Criamos e movimentamos a raquete do oponente porém, ainda não existe colisão entre a raquete e a bolinha. O
código tem a função colisaoMinhaRaqueteBiblioteca(). Ao criarmos uma nova função chamada
colisaoRaqueteOponenteBiblioteca(), poderíamos esperar o mesmo resultado, visto que elas seriam
idênticas. Será que é necessário essa quantidade de códigos para mudarmos os parâmetros colisaoRaquete e
colisaoRaqueteOponente? Como visto anteriormente, podemos atribuir um nome genérico para a função que
unirá essas duas variáveis, por exemplo, as que são usadas na função verificaColisaoRaquete(). No lugar de
xRaquete, utilizaremos apenas X, e no lugar de yRaquete, apenas Y.

12
Colisão com o oponente
Em draw(), substituiremos as linhas colisaoRaqueteOponenteBiblioteca() por
verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente) e colisaoMinhaRaqueteBiblioteca() por
verificaColisaoRaquete(xRaquete, yRaquete). Desse modo, nosso código dentro da função draw() é:

13
Criando o placar

Agora o jogo está mais interessante, porém falta

saber quem venceu a partida. No Scratch,
Criaremos as variáveis para o Placar do Jogo:
inserimos um placar para quando a bolinha tocar
na lateral da tela sem o intermédio da raquete.
Além disso, criamos duas variáveis, meusPontos
e pontosDoOponente, em que armazenamos os
pontos de cada jogador, e queremos fazer algo
similar no p5.js.

14
Criando o placar
Precisamos desenhar e exibir os valores das variáveis (conforme slide anterior) na tela. Para deixarmos o
projeto organizado, criaremos a função incluiPlacar(), que também chamaremos em draw(). Nela,
incluiremos o comando text(), que exige como parâmetros o conteúdo da variável meusPontos e as posições
de X e Y, para que seja exibida a pontuação na tela.

15
Criando o placar
A função incluiPlacar() será escrita nas últimas linhas O comando fill() representa a cor de nosso número, e
de código, da seguinte forma: 255 representa branco.
O comando text() possui atribuição de pelo menos
três parâmetros: o valor que desejamos que apareça,
nesse caso as variáveis meusPontos e
pontosDoOponente, e as coordenadas X e Y em que
os textos devem estar localizados no plano cartesiano.

Após escrever a função, tornar o placar visível e chamar em draw(), os pontos ainda não
serão contabilizados. Além disso, quando a bolinha tocar a borda direita, queremos que
um ponto seja adicionado ao placar do jogador; quando ela tocar a borda esquerda, um
ponto seja adicionado ao placar do oponente.

16
Criando o placar
No Scratch, trabalhamos com a posição aproximada
correspondente ao limite do comprimento da tela.
Quando a bolinha alcançava um número maior que o
limite, marcamos um ponto.
Sabendo que a largura total da tela é 600, quando o
jogo se inicia, a extrema borda lateral esquerda
corresponde a 0, enquanto a extrema borda lateral
direita corresponde a 600. Subtraímos 10 desse valor,
ficando com o limite de 590. Se o X da bolinha for
maior que esse valor, marcaremos um ponto.
Para isso, criaremos a função marcaPonto(), Nessa condicional, verificamos que se xBolinha
chamada em draw(). for maior que 590, ou seja, se ela está próxima
de tocar o limite da tela (600), 1 ponto é
adicionado. Para marcar um ponto para o
oponente, xBolinha deve ser menor que 10.

17
Considerações sobre a refatoração
Até o momento, temos a função incluiPlacar(), que contém dois text() preenchidos na
cor branca. Pensando em alguma forma de reutilizarmos o código, uma opção seria
incluir pontos, x e y como parâmetros de incluiPlacar(), e, em draw(), quando ela é
chamada, passarmos os parâmetros necessários. Entretanto, será que, de fato, essa
refatoração é imprescindível?
Avalie sempre se o seu código está escrito de forma que outra pessoa possa
entender e se está escrito em um quantidade mínima de linhas. Esses pontos são
sempre importantes de serem analisados e discutidos durante a criação de um projeto,
ficando a critério do seu time ou empresa decidir o que é mais importante para ser
levado em consideração. O importante é levar em consideração o que pode ser feito com
o código para melhorá-lo e torná-lo cada vez mais legível.

18
 Desafio
No jogo desenvolvido, jogamos sozinho contra a máquina. Para tornar o jogo mais
desafiador e estabelecer um vencedor, realize os seguintes passos:

a. Crie uma função para determinar um limite máximo de pontos. Se os meus

pontos ou do oponentes.
b. Crie uma mensagem no final do jogo para anunciar o vencedor.
c. Tente parar o jogo depois de anunciar o vencedor.

19