ALURA - Ensino Médio 1 ANO - Curso 1 do 1 Bimestre - Aula 13

Prévia do material em texto

Melhorando o 
visual do jogo
Aula 13
Habilidades trabalhadas nesta aula:
(EF07MA04) Resolver e elaborar problemas que envolvam operações com números inteiros.
(EF07MA13) Compreender a ideia de variável, representada por letra ou símbolo, para expressar relação entre 
duas grandezas, diferenciando-a da ideia de incógnita.
(EF07CO01) Criar soluções de problemas para os quais seja adequado o uso de registros e matrizes unidimen-
sionais para descrever suas informações e automatizá-las usando uma linguagem de programação.
(EF07CO02) Analisar programas para detectar e remover erros, ampliando a confiança na sua correção.
(EF07CO05) Criar algoritmos fazendo uso da decomposição e do reúso no processo de solução de forma cola-
borativa e cooperativa e automatizá-los usando uma linguagem de programação.
Listas: criando o seu jogo de 
cartas com listas e padrões
 Unidade
2
O que vamos aprender?
Alterar a cor do fundo.
Criar uma variável para 
armazenar a quantidade de 
pontos do oponente.
Posicionar uma variável.
ACOMPANHE O VÍDEO DA AULA
https://cursos.alura.com.br/course/scratch-criando-jogo-cartas-listas-padroes/task/134382
3
Visual e pontos 
do oponente
Anteriormente, adicionamos sons para 
quando ganhamos ou perdemos uma 
rodada. Assim, temos um sistema de 
pontuação funcionando e, quando 
clicamos em um atributo, a carta 
do oponente se vira. Caso o atributo 
clicado seja maior que o da carta do 
oponente, um som será tocado. 
Caso seja menor, outro som será 
emitido. Nesta aula, vamos finalizar 
nosso projeto criando uma variável 
para armazenar os pontos do oponente. 
Além disso, melhoraremos nosso 
projeto adicionando um fundo com 
efeitos visuais. Para isso, vamos utilizar 
novamente os blocos de aparência.
Para iniciar a aula, é importante os estudantes compreendam 
que, até o momento, vivenciamos como o Pensamento Compu-
tacional é importante para resolução de problemas. Decompuse-
mos uma situação-problema, que era criar nosso jogo, em partes 
menos complexas; primeiro; adicionamos nossa carta, depois os 
atributos etc. Precisamos abstrair alguns conceitos e, principal-
mente, identificamos diversos padrões que nos ajudaram a cons-
truir e aprimorar ainda mais nosso algoritmo em forma de script 
em blocos no Scratch. Esse método de pensamento contribui 
não somente para a resolução de problemas computacionais, 
mas também para situações do dia a dia e outras áreas.
4
Temos um jogo que está funcionando, com efeitos, sons e um sistema 
de pontuação. Agora, precisamos criar uma variável para armazenar os 
pontos do oponente. Para isso, selecionaremos o Palco, localizado no 
canto inferior direito da tela: .
Na seção Variáveis, clicaremos em .
Nomearemos essa variável como PONTOS DO OPONENTE. Em seguida, 
clicaremos em OK.
5
Criada a variável, vamos adicionar, da seção Variáveis, o bloco 
 ao bloco condicional Senão antes do bloco que emite 
o som Clang, dentro do script rosa que define a pontuação. Também 
alteraremos a variável BOTÃO para PONTOS DO OPONENTE, como 
mostra a imagem a seguir:
Feito isso, posicionaremos a variável , que está no 
Palco, no canto superior direito da tela. Para fazer isso, arrastaremos 
a variável para o local desejado, segurando-a com o botão esquerdo 
do mouse. Neste momento, pergunte aos estudantes por 
que os pontos do oponente não são zerados e 
como isso pode ser resolvido. É esperado que 
eles respondam que será preciso adicionar um 
bloco que mude o valor da variável para 0 no 
script que inicia a rodada. Além disso, é impor-
tante perceber que estamos constantemente 
identificando padrões que já utilizamos anterior-
mente, como nesse caso: o mesmo padrão para 
zerar os valores do nosso ponto.
6
Ao testar nosso jogo clicando na bandeira verde, perceberemos que os 
pontos estão sendo computados corretamente, porém, quando o jogo 
é executado pela segunda vez, os pontos do oponente não estão sendo 
zerados. Precisamos resolver isso.
Para redefinir os pontos do oponente, precisamos nos atentar ao 
seguinte script:
Assim, da seção Variáveis, arrastaremos mais um bloco 
para esse script, posicionando-o entre os blocos que apagam os itens do 
atributo e o bloco que é igual a ele. 
7
Em seguida, substituiremos a variável BOTÃO por PONTOS DO 
OPONENTE no menu suspenso do bloco, que ficará da seguinte forma: 
Assim, quando a bandeira verde for clicada, os pontos do oponente 
serão zerados.
Com nosso jogo pronto, podemos pensar em melhorias em seu design. 
Para isso, adicionaremos um cenário ao jogo, clicando na aba Cenários, 
localizada no canto superior esquerdo da tela.
8
Para preencher nosso cenário, utilizaremos a ferramenta Retângulo , 
que é o último ícone das ferramentas disponíveis:
Com essa ferramenta selecionada, clicaremos na parte superior do lado 
esquerdo da área de edição de cenário para fazer o desenho e traçaremos 
a diagonal até o lado inferior direito, arrastando o retângulo com botão 
esquerdo do mouse pressionado. Este será o resultado:
9
Repare que o fundo do nosso jogo mudou de cor. Para escolher uma 
nova cor, clique em , na parte superior do lado esquerdo da área 
de edição do cenário. Você pode deslizar nas faixas Cor, Saturação e 
Brilho para escolher a cor que desejar. Utilizaremos os seguintes valores 
como exemplo:
Você também pode usar os seguintes botões para escolher uma forma 
de preenchimento.
O primeiro botão é o de preenchimento sólido. Os outros três são efeitos 
de degradê que vão de uma cor à outra.
10
Neste momento, utilizaremos a segunda opção de preenchimento . 
Na primeira cor, deixaremos a que foi sugerida pelo Scratch e, na segunda, 
colocaremos outro tom de azul, como mostra a imagem a seguir:
Para aceitar as mudanças, basta clicar na área de edição do cenário. 
Assim, podemos ver as alterações no Palco:
11
Agora, adicionaremos um texto ao Palco para que possamos melhorar a 
visualização das variáveis.
Para isso, selecione a ferramenta e clique em qualquer lugar da área 
de edição do cenário, digitando o texto Pontos do Oponente.
Para mudar esse texto de lugar, clique na ferramenta e o texto estará 
automaticamente selecionado. Então, poderemos arrastá-lo para onde 
quisermos. Em nosso caso, iremos posicionar o novo texto abaixo da 
carta do oponente:
Também deixaremos esse texto na cor preta, clicando em e 
mudando Brilho para 0.
12
Feito isso, repetiremos o processo e adicionaremos outro texto, dessa vez 
no canto superior esquerdo, para marcar os nossos pontos. Observe:
Caso queiram mudar o tipo de fonte dos textos adicionados, é preciso 
selecioná-los e, na ferramenta  , escolher outro tipo de fonte clicando 
no ícone , logo acima da área de edição do cenário.
Feito isso, mudaremos a forma de exibição das variáveis no palco. Assim, 
começaremos clicando com o botão direito na variável e 
escolheremos a opção letras grandes.
Em seguida, reposicionaremos nossa variável de acordo com o texto escrito 
no Palco; faremos o mesmo com a variável  .
13
Assim, nosso Palco ficará da seguinte maneira:
Para finalizar, adicionaremos efeitos ao nosso cenário quando ganhamos 
ou perdemos a rodada.
Começaremos voltando para a aba Código, localizada no canto superior 
direito da tela.
Para desenvolver ainda mais a 
habilidade de identificar padrões, 
os estudantes podem ser ques-
tionados sobre como podemos 
adicionar efeitos ao nosso palco. 
É esperado que eles respondam 
que será preciso adicionar um 
bloco que tenha um efeito de 
cor no script que define a função 
pontuação. Nesse caso, estamos 
utilizando o mesmo padrão de 
mudanças de pontos que toca o 
som, mas agora adicionaremos 
efeitos visuais ao cenário.
14
Vamos analisar o seguinte script, que define a função pontuação:
Para mudarmos nosso cenário de cor quando ganhamos um ponto, 
arrastaremos, da seção Aparência, o bloco para cima 
do bloco que toca o som Collect. Além disso, mudaremos o valor de 
25 para 150, como mostra a imagem a seguir:
15
Repare que, ao testarmos ojogo, ele funciona da primeira vez, porém, ao 
iniciarmos uma segunda rodada, a cor do Palco não volta para a anterior. 
Antes de resolvermos isso, vamos adicionar mais um efeito de cor, que 
será executado quando perdemos a rodada.
Assim, da seção Aparência, arrastaremos o bloco 
para cima do bloco que toca o som Clang. Além disso, mude o valor de 
25 para 75, como mostra a imagem a seguir:
16
Agora, precisaremos que, sempre que se inicie uma rodada nova, 
a cor do cenário volte ao normal. Para isso, adicionaremos o bloco 
 ao início do script que inicia a rodada.
Feito isso, podemos testar nosso projeto clicando na bandeira verde do 
Palco. Nosso projeto está funcionando perfeitamente!
 Desafio
17
Assim, finalizamos nosso projeto. Ao longo desse curso, adicionamos 
diversos atores, mudamos suas camadas, trabalhamos com números 
aleatórios e reconhecemos diversos padrões para utilizar o mesmo 
código com diferentes atores. Também utilizamos o recurso Mochila 
para replicar esses padrões identificados. Além disso, trabalhamos 
com variáveis, condicionais, repetições, listas e funções, que são 
conceitos importantes para a programação.
Agora, você pode criar seu próprio jogo Super Trunfo utilizando 
qualquer temática que desejar. Assim, seu desafio final será alterar 
alguns elementos visuais do seu jogo, como texto, cores etc., 
deixando mais personalizado!
CLIQUE AQUI PARA AVALIAR ESTE MATERIAL
O projeto do jogo baseado no Super Trunfo possibilita o desenvolvimento do pensamento computacional, além de possibilitar a utilização dos 
padrões para a criação de outros temas de jogos baseado em elementos que vemos em outras disciplinas do currículo escolar, como animais, 
plantas, figuras históricas, personagens do folclore, de contos etc. Isso permite também uma abordagem interdisciplinar desses conteúdos.
https://docs.google.com/forms/d/e/1FAIpQLSdj6D4ophEVDczMqZKzLL0_9vCK5C2UoSKSxaMr-1os8-B8-A/viewform