Jogue aqui: https://scratch.mit.edu/projects/679495174/

Descrição do material

O jogo de geometria é um jogo infantil desenvolvido na plataforma Scratch, onde é necessário que o aluno faça o reconhecimento de uma figura apresentada e digite seu nome correspondente, retornando uma mensagem de verificação.

Objetivo

Promover o estudo das formas geométricas básicas por um meio lúdico e cativante para o público infantil em um jogo simples. Além disso, instiga os alunos a pensarem nos principais conceitos de programação para elaboração da atividade

Tutorial de elaboração

Configurando os cenários

Será necessário para este jogo a utilização de dois cenários: School e Theater 2. Para preparar o ambiente, deve ser feito:

1. Inicialmente, para adicionar um cenário a lista de cenários do projeto, vá na seção Palco (localizada no canto inferior direito), clique em “Selecionar cenário” e selecione o cenário “School”.
2. Seguindo os mesmos passos citados anteriormente, adicione o cenário “Theater 2”.
3. Após a adição dos cenários, verifique se a seção Palco está selecionada e clique na aba “Cenários” (presente no canto superior esquerdo), para abrir a tela de configuração das informações dos cenários adicionados.
4. Nesta aba, será possível ver a presença de três cenários adicionados no projeto. Como apenas o “School” e o “Theater 2” serão utilizados, remova o primeiro cenário clicando sobre e na lixeira que aparece logo em seguida.
5. Para facilitar a identificação durante a elaboração do código, será necessário renomear os cenários. Para isso, selecione o cenário “School”, e na área fantasia, coloque o nome “Cenário inicial”.
6. Faça o mesmo com cenário “Theater 2”, porém com o nome “Cenário da pergunta”

Configurando os atores

Para a realização deste jogo serão necessários três atores. Sendo dois do próprio Scratch (“Button2” e “Devin”) e um que será adicionado com as figuras. Para prepará-los, deve ser feito:

1. Como o ator padrão do Scratch não será utilizado, começaremos o removendo. Indo até a área dos atores (localizada ao lado da seção Palco), selecione o “Ator1” e em seguida clique na lixeira.
2. Para adicionar um ator, clique no botão “Selecione um Ator” e escolha o ator “Button 2”. Este ator servirá para dar início ao jogo.
3. Ao selecionar um ator, é possível ver as suas configurações atuais. Para facilitar na identificação do ator, selecione-o e, na área “Ator”, coloque o nome “Jogar”. Para colocarmos o botão no local desejado, coloque para X o valor 0 e para o Y o valor -125.
4. É possível modificar os atores, seja os editando ou colocando outros visuais e, nesse caso, iremos editar o botão. Verifique se o ator “Jogar” está selecionado, clique na aba “Fantasias” (presente no canto superior esquerdo). Agora é possível notar que existem dois visuais para esse botão. Para o Primeiro, colocaremos o nome para Fantasia como “Espera” e , para o segundo, “Sobre”. Para ambos escreveremos “Jogar” em sua imagem e, para isso, é preciso clicar no símbolo “T”, selecionar a cor do texto (nesse caso preto) e clicar sobre a imagem na posição desejada.
5. Seguindo as instruções citadas anteriormente, adicione o ator “Devin”. Ele que comandará a execução do jogo realizando as perguntas.
6. Para as configurações iniciais dele, coloque para X o valor -120 e para Y o valor -40. Após isso, deixe-o invisível clicando na segunda imagem presente em “mostrar”.
7. Para adicionar um ator que não está presente no site do Scratch, coloque o mouse sobre o botão “Selecione um Ator” e em seguida clique em “Enviar Ator”. Selecione a primeira imagem do conjunto de figuras disponibilizadas e em “Abrir”.
8. Para as configurações, renomeie para “Figura”, e coloque na posição X igual a 0 e Y igual a 0. Além disso, é possível alterar o tamanho da imagem, mexendo em sua proporção. Nesse caso, colocaremos o valor de “Tamanho” igual a 30. Por fim, deixo-o invisível.
9.  Para adicionar as demais imagens a serem utilizadas, abra a tela de Fantasias do ator “Figura”. No canto inferior esquerdo, posicione o mouse sobre o botão “Escolher Fantasia” e clique em “Carregar Fantasia”. Selecione as demais figuras e clique em “Abrir”.

Criando o jogo

1. O jogo será iniciado quando a bandeira verde for clicada. Para garantir que o “Cenário inicial” estará visível, na tela de código do ator “Jogar”, coloque o evento “quando (bandeira verde) for clicado” na área de código. Em seguida, coloque o bloco “mude para o cenário” presente em “Aparência” na sequência e selecione “Cenário inicial”.
2. Sempre que for aberto o cenário inicial, deverá ser exibido o botão. Para isso adicione o evento “quando o cenário mudar para” e selecione “Cenário inicial” e em seguida o comando de aparência “mostre”.
3. Para dar aparência de um botão tradicional sempre que estiver na tela inicial, faremos um código que altera o visual quando o mouse estiver sobre o botão. Para isso, logo na sequência ao “mostre”, coloque um bloco de controle “sempre” para que enquanto nesta tela, o comando fique sendo executado. Dentro dele coloque um bloco “se então / senão”, que contará com a verificação se o mouse está sobre o botão ou não. Como condição do “se”, coloque o sensor “tocando em” com a opção “ponteiro do mouse”. No caso verdadeiro dessa verificação, coloque o bloco de aparência “mude para a fantasia” com a opção “Sobre” e, no caso falso, um mesmo bloco de aparência porém com a opção “Espera”.
4. Para iniciar o jogo, deverá ser clicado o botão “Jogar”. Para fazer esse controle, insira um novo evento “quando este ator for clicado”. Como o botão não deve ficar aparente durante a execução, insira logo na sequência o comando de aparência “esconda” e, como ele não está mais visível, devemos parar a alteração de visuais por meio do bloco de controle “pare” com a opção “outros scripts no autor”. Feito isso, transmita uma mensagem para iniciar o jogo, inserindo um novo evento “transmita mensagem” e adicione uma nova mensagem chamada “Iniciar Jogo“.
5. Ao final desses passos, verifique se o botão está funcionando corretamente.
6. Para a execução do jogo, o código estará presente no ator “Devin”. Para isso, selecione-o e, em seu corpo, coloque o evento “quando eu receber” com a opção “Iniciar Jogo”.
7. Assim que se inicia o jogo, Devin falará com o jogador. Porém, ele se encontra invisível, sendo necessário a sua exibição por meio do bloco da aparência “mostre”. Com isso, agora é possível exibir a fala,  inserindo o bloco presente em aparência “diga” com duração de 3 segundos e no texto a fala desejada. Neste caso, a mensagem a ser apresentada é “Olá amiguinho! Você conhece o nome das figuras geométricas para me ajudar?“.
8. Na sequência será elaborada e feita a pergunta sobre as figuras e para isso vamos seguir para o cenário “Cenário da pergunta”, por meio do bloco “mude para o cenário” presente em “Aparência”. Como efeito visual, colocaremos o Devin pensando durante a pergunta. Para isso é preciso colocar o bloco “mude para a fantasia” com a opção “devin-b”. Agora, com essa mudança no visual, quando for executado mais uma vez o jogo, ele começará com o novo visual, e, para que isso não ocorra, deve ser colocado um bloco “mude para a fantasia” com a opção “devin-a” antes do “mostre”.
9. Para a pergunta, iremos utilizar um sistema de aleatoriedade e será preciso uma lista com o nome de todas as figuras que estarão presentes no jogo (fantasias do ator “Figura”). Para isso, vá em “variáveis”, clique em “criar uma lista” e coloque o nome “Lista de figuras”. Será possível visualizar a lista criada no canto superior direito, logo em cima do cenário.
10. No canto da lista, existe um símbolo “+” que serve para adicionar itens na lista. Clique nele e insira o nome de cada fantasia presente no ator “Figura”. Após feito isso, você deverá estar com uma lista de comprimento 8.
11. Para a figura selecionada, também utilizaremos uma variável que guardará o nome da figura sorteada. Para isso, vá em “variáveis”, clique em “criar uma Variável” e coloque o nome “Figura Sorteada”.
12. Com as variáveis criadas, vamos elaborar o bloco que irá sortear uma figura. Primeiramente será utilizado um bloco que salvará o valor dentro da variável “Figura Sorteada”. O bloco utilizado é o “mude para” que está presente em “variáveis”.
13. Para selecionar um nome da lista de acordo com sua posição, utilizaremos um bloco da seção variáveis “item de” com a opção “Lista de figuras” dentro da área após o “para” do bloco anterior.
14. Para selecionar uma posição aleatória da lista, utilizaremos um bloco de operadores chamado “número aleatório entre” com os valores 1 e 8 no local após “item” do bloco anterior. Caso for alterado o número de elementos na lista, o valor 8 deve ser alterado, porém, para evitar essa mudança manual, também é possível utilizar o bloco presente em variáveis com o nome “tamanho de” com a opção “Lista de figuras”.
15. Para exibir a figura sorteada, devemos colocar um bloco de evento “transmita e espere” e adicionar uma nova mensagem “Exibir figura”. Após isso, vamos modificar o script do ator “Figura”.
16. Após selecionado “Figura”, mudaremos o visual para a figura correta e exibiremos. Para isso, utilize o bloco do evento “quando eu receber” com a opção “Exibir figura” para ativar o script e, em seguida coloque o bloco de aparência “mude para a fantasia” e, como valor coloque a variável “Figura Sorteada”. Em seguida, basta colocar o bloco “mostre”.
17. Voltando para o ator “Devin”, será feita a pergunta sobre a figura que está sendo exibida. Dessa forma, utilize o bloco “pergunte e espere” presente em sensores com a mensagem que será exibida. No caso, utilizaremos “Qual o nome dessa figura?”. Após o usuário responder, a resposta fica salva na variável “resposta” presente na seção sensores.
18. Agora com a resposta, iremos verificar se o nome inserido é o correto. Para a verificação iremos utilizar um bloco de controle “se então/ senão”. Como valor a ser verificado, utilizaremos um operador de “=” para verificar se o valor presente na variável “resposta” é igual ao da variável “Figura Sorteada”. Se forem iguais, utilizaremos o bloco presente em aparência “diga” com duração de 2 segundos e com a mensagem “Parabéns, você acertou!” e, caso esteja errado, um mesmo bloco porém com a mensagem ”Que pena, o nome não é esse.”.
19. Após a verificação da resposta, ele informa o nome da figura, mesmo se correto. Nesse caso, é utilizado o mesmo bloco “diga” com duração de 3 segundos porém, no local da mensagem, para colocar um texto junto com o valor da variável, utilizamos o bloco de operadores “junte com” que juntará a mensagem ”O nome dessa figura é ” com o valor da variável “Figura Sorteada”.
20. Após a exibição das falas, deverá ser lançada a mensagem que o jogo finalizou para voltar à tela inicial. Dessa forma, deve ser colocado um novo evento “transmita mensagem” e adicione uma nova mensagem chamada “Finalizar Jogo“ para que a figura suma e assim não apareça no cenário inicial. Após isso, selecione o ator “Figura” e adicione o bloco do evento “quando eu receber” com a opção “Finalizar Jogo“. Na sequência coloque o bloco de aparência “esconda”.

Por fim, para retornar corretamente para a tela inicial, retorne aos scripts do ator “Devin” e esconda-o por meio do bloco ”esconda” e em sequência mude de cenário para o “Cenário inicial” por meio do bloco “mude para o cenário” presente em “Aparência”.

Pontos de atenção

1. O conceito geral de variável assim como os controles condicionais poderá ser complicado de entender no início, havendo a necessidade de mais explicações.
2. A explicação do bloco de controle “sempre” juntamente aos comandos presentes internamente provavelmente causará estranheza, sendo necessária uma explicação mais ampla. Caso não queira explicar seu uso, pode ser removido todo o bloco juntamente do bloco “pare outros scripts desse ator” presente no script de quando o ator for clicado. O conjunto desses códigos não afetarão o funcionamento direto do código, apenas se tratam de um efeito visual depois que o código for ativado.
3. A explicação da linha utilizada para selecionar os nomes das figuras aleatoriamente provavelmente deverá ser explicada de outras maneiras para passar o funcionamento de como está sendo todo o processo que gera o nome de alguma das figuras.

Tutorial em video:

Links úteis

• Site do scratch oficial: https://scratch.mit.edu/
• Canal no Youtube do ACT: https://www.youtube.com/channel/UCCYzDDWYhHEt9-NODBosjqg