Iniciando no JavaScript

Aula 3
 Pensamento
Computacional

Série: 1ª EM

Tema: Iniciando no JavaScript

Aula 3

2
O que vamos aprender?

Começar a construir o jogo Pong com

base em uma nova linguagem de
programação chamada JavaScript (JS);

Acompanhe o vídeo da aula

Trabalhar com um editor de texto para os

códigos JavaScript denominado p5.js.

Acompanhe o vídeo da aula

3
 Materiais necessários
Nesta aula, utilizaremos o editor de texto p5.js, um
serviço da web de criação de códigos em
linguagem JavaScript. Nosso objetivo é construir o
jogo Pong com o uso dessa nova linguagem de
programação. Os códigos serão criados e
visualizados no p5.js. Podemos acessá-lo por meio
de uma busca no Google, digitando P5.js no
buscador, ou no link a seguir:

Acesse o site p5.js

4
Criando uma conta no p5.js
Antes de criar uma conta no p5.js, ao acessar a página principal, vamos perceber que o site está no idioma inglês.
Podemos alterar o idioma da seguinte forma: vá no canto superior direito da página e clique em “English”. Será
mostrado um menu e, a partir dele, opte pelo idioma português (ou outro da sua preferência).

5
Criando uma conta no p5.js
Caso seja seu primeiro acesso, ainda no canto superior direito da página, selecione “Registrar-se” para criar uma
nova conta. Preencha os campos com os dados solicitados.

6
 Ambiente de
Programação: p5.js
Depois de criarmos a conta, é possível salvar e recuperar os projetos. Para confirmar que o login deu certo,
verificaremos se o nome que escolhemos para a nossa conta aparece no canto superior esquerdo da tela.
Lembre-se que, ao final da aula, você deve sair da sua conta.

7
 Revisão das aulas anteriores - Scratch
No Scratch, podemos observar que a interface de programação é dividida nas seguintes seções:

Códigos disponíveis Códigos que estão sendo Botão de “iniciar” O jogo

para utilizar usados (que executa o jogo)

8
 Ambiente de
Programação: p5.js
No p5.js, o botão de “iniciar” é usado para executar o código que desenvolvemos. Podemos perceber que já
temos algumas linhas com códigos preexistentes. Vamos compreender o que eles significam?

botão de “iniciar”

códigos
preexistentes

9
 Ambiente de
Programação: p5.js
Na tela principal do editor de texto do p5.js, veremos algumas
linhas de código prontas e uma área de “prévia”. Essa será o espaço
destinado para visualização da execução do código. A primeira linha
do código é a função setup(), que é chamada uma vez quando o
programa é iniciado. Essa função é utilizada para definir as
propriedades iniciais do ambiente, como tamanho da tela e cor
de fundo, entre outros aspectos.

10
 Ambiente de
Programação: p5.js
Temos outro elemento no código, o “createCanvas(largura,altura)” que criará as dimensões da tela
prévia. O primeiro número representa a largura (eixo x) que desejamos. Já o segundo, a altura, ou seja,
o eixo y.
Área de visualização da execução das
linhas dos códigos.

11
Cenário e bolinha
A função draw() (que significa “desenhar” em inglês) executa continuamente as linhas de código contidas
dentro de seu bloco, que são aquelas abaixo de cada função. A função background() define a cor usada
para o fundo da tela p5.js. O valor default desta função é 220. Default é uma palavra empregada em
Programação e na área da Computação, cujo o seu significado é “padrão”. Na função background, é possível que os
números variem de 0 até 255. Quanto menor este valor, mais escuro ficará o fundo do retângulo. Vamos deixar
sempre o valor do background() “0”, assim a cor do plano de fundo do jogo ficará em preto.

12
Cenário e bolinha
No Scratch, os códigos disponíveis ficam sempre visíveis e conseguimos montá-los de acordo com os nossos
objetivos. Já no p5.js, para desenharmos a bolinha do nosso jogo, devemos executar os seguintes passos:

● Vá no canto superior direito, em

Ajuda;
● Ao clicar, um novo menu irá se
abrir;
● Clique em Referência;
● Uma nova aba surgirá.

13
Cenário e bolinha
A nova aba estará no idioma inglês. No menu, procure pela opção Shape (traduzido do inglês, significa “forma”) e
clique em circle() (círculo em inglês).

14
 Cenário e bolinha
A função circle() deve ser digitada com a seguinte sintaxe:
circle(coordenada do eixo x, coordenada do eixo y, diâmetro).
O nosso código deve ficar circle(0, 0, 50).

É bom ressaltar que o diâmetro é o dobro do raio de uma

circunferência, que é a linha que liga o centro da mesma à sua
borda.

15
 Ajustando o código
Ao pressionarmos o botão de play (“tocar” em inglês), veremos aproximadamente 1/4 do círculo
posicionado no canto superior esquerdo da tela prévia:

16
 Ajustando o código
No Scratch, a posição inicial da bolinha foi Variáveis das
definida com as coordenadas (0, 0), tendo como coordenadas (x,y) e do
diâmetro da bolinha.
referência o centro da tela. No p5.js, o plano
cartesiano e a movimentação nos eixos x e y
são um pouco diferentes: a coordenada (0, 0)
tem como referência o canto superior esquerdo
da tela, exatamente onde se encontra a bolinha
(como observada no slide anterior). Será
necessário modificar os valores da coordenada
para que a bolinha fique localizada no centro
da tela. Para facilitar a leitura do código,
armazenaremos os valores das coordenadas
O círculo que representa a bolinha
em variáveis, e para tanto, usamos a palavra será criado com as variáveis.
let.
17
CamelCase,
você conhece?
As nomenclaturas de variáveis seguem a
convenção de apresentarem a primeira letra
da primeira palavra minúscula, e as primeiras
letras das demais palavras, se houverem,
maiúsculas. Esta convenção se denomina
CamelCase.
A provável origem do termo é a semelhança do
contorno de expressões CamelCase, nas quais Para saber mais sobre a
as letras em maiúsculo "saltam" no meio das convenção CamelCase, clique aqui.
minúsculas, tal como a corcova de um camelo.

18
CamelCase, você conhece?
Perceberemos que as variáveis xBolinha e yBolinha estão em concordância com a
nomenclatura CamelCase. Durante as aulas de linguagem JavaScript, utilizaremos
bastante essa nomenclatura.

19
Movimentação da bolinha
O próximo passo é fazer com que a
bolinha se movimente em ambos os eixos.
Para isso, indicaremos na função draw()
que xBolinha e yBolinha terão acréscimos Velocidades para
de valores. Usaremos novamente a palavra os eixos x e y

let para armazenar esses valores, que

serão aplicados na função draw().

Os acréscimos de
velocidade
representamos
com “+=”.

20
 Desafio
Após desenvolver o Pong com base no Scratch, vamos produzir este jogo utilizando
outra linguagem de programação: Javascript.

Tendo como norteador o editor web do P5.js, pinte o cenário na cor preta e crie
uma bolinha que se movimente, use a mesma lógica de programação do Scratch.

Em seguida, experimente alternar as cores da bolinha e do fundo. Tente mudar a

cor do fundo para branco, invés da cor preta, e a cor da bolinha para preta. É
possível também adicionar outras cores: experimente o comando
background(255,200,0);

21