Jogo da Divisão – Scratch 3.0 – Grupo Hello World
Aula2 scratch 3

O jogo de divisão é um jogo infantil desenvolvido na plataforma Scratch. O usuário/aluno deve responder questões envolvendo conceitos matemáticos da divisão, como divisor, dividendo e quociente. O jogo retorna uma resposta ao usuário se ele acertou ou não.

Objetivo do material

Incentivar o estudo dos conceitos matemáticos básicos de divisão, ensinados principalmente durante o ensino fundamental. Tanto na execução e desenvolvimento do jogo, os alunos são instigados a envolver a matemática com a programação e pensar de modo lógico.

O jogo completo:

Clique aqui!

Tutorial completo de elaboração

I – Configurando os cenários

Será necessário para este jogo a utilização de apenas um cenário, sendo ele o Chalkboard. Para preparar o ambiente, deve ser feito:

  1. Para adicioná-lo no projeto, vá na seção Palco (localizada no canto inferior direito), clique em “Selecionar cenário” e selecione o cenário “Chalkboard”.

II – Configurando os controles

Para a realização deste jogo será necessário dois atores, sendo eles a Abby e o Button 2 do próprio Scratch. 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 colocarmos o botão no local desejado, coloque para X o valor 0 e para o Y o valor 45.
  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 “Button2” 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 “Abby”. Ela será a responsável por fazer as perguntas de matemática e é quem conterá a lógica principal do jogo.

Para as configurações iniciais dela, coloque para X o valor -100 e para Y o valor -85.

III – Criando o Jogo

  1. O jogo será iniciado quando a bandeira verde for clicada e para isso começaremos o código pelo ator “Button2”. Para garantir que o botão esteja visível assim que a bandeira verde for acionada, coloque o evento “quando (bandeira verde) for clicado” na área de código. Em seguida, coloque o bloco “mostre” presente em “Aparência”.
  2. 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, esse 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”.
  3. Para iniciar o jogo, deverá ser clicado o botão escrito 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. Para isso, deve ser colocado um novo evento “transmita mensagem” e adicione uma nova mensagem chamada “Iniciar Jogo“.
  4. Agora, partindo para o código do jogo, iremos abrir o espaço de código do autor “Abby”. Suas ações darão início só após a mensagem “Iniciar Jogo“ ser emitida e, portanto, coloque o bloco de evento “quando eu receber” com a opção “Iniciar jogo” como bloco iniciador do código.
  5. Assim que for iniciado, temos que mostrar a “abby” para que possamos exibir a pergunta. Para isso, coloque o bloco de aparência ”mostre” na sequência do código.
  6. Antes de dar continuidade na montagem dos blocos, precisaremos criar 4 variáveis que possuirão os valores relativos à divisão. Para a criação de cada uma, vá na aba “Variáveis” e selecione “criar uma variável”. Escreva o nome “Dividendo” e, neste jogo, a opção de acesso não irá interferir, podendo assim deixar na opção padrão. Por fim, confirme e repita o mesmo processo para a criação das variáveis “Divisor”, “Quociente” e “Resto”. Ao final, você conseguirá ver as variáveis criadas logo abaixo do botão “Criar uma Variável” e no canto superior direito, logo em cima do cenário. Neste último é também visível o valor que está sendo armazenado em cada uma delas.
  7. Agora com as variáveis prontas, iremos gerar os números de forma aleatória para o divisor e para o dividendo. Primeiramente, colocaremos o bloco “mude para” presente na aba “variáveis” juntamente da opção “Dividendo” para conseguirmos armazenar os valores que serão gerados dentro da variável. No local para o valor, colocaremos um bloco de operação “número aleatório entre” com o valor máximo igual a 100.
  8. Para o “Divisor”, faremos os mesmos passos, colocando um bloco “mude para” juntamente com “número aleatório entre”. No entanto, para evitar que a operação de divisão possua o quociente igual a zero, colocaremos como valor máximo, o valor gerado e armazenado na variável “Dividendo”. Para isso, selecione o bloco “Dividendo” presente em “Variáveis” até a posição do maior número. Como é possível perceber, as variáveis poderão ser utilizadas em todos os espaços redondos, permitindo que realizemos as operações com os valores gerados.
  9. Agora, sabendo um pouco mais de como funcionam as variáveis, iremos armazenar o valor para o “Quociente”. Será necessário o bloco “mude para” com um bloco operador de divisão dentro. Como não queremos trabalhar com números decimais, para pegar apenas o valor relativo ao quociente da divisão, usaremos o bloco a princípio escrito como “módulo de” e selecionaremos a opção “arredondamento para baixo de” como valor para “mude para”. Na sequência, colocaremos o operador de divisão juntamente com as variáveis “Dividendo” e “Divisor”.
  10. Já para o “Resto”, é mais simples. Existe um bloco de operador específico para isso. Dessa forma, é necessário apenas pegar um bloco “mude para” com “Resto” selecionado e o operador “resto de por” com as variáveis  “Dividendo” e “Divisor”.
  11. Após realizado todos os passos, é possível executar o código clicando sobre e verificar se os valores que estão sendo armazenados nas variáveis estão corretos.
  12. Neste ponto, possuímos todas as informações necessárias para a realização das perguntas. Para isso usaremos o sensor “Pergunte” para exibir a pergunta. No entanto, para colocar palavras juntamente de variáveis no campo de pergunta, é necessário a utilização do bloco operador “junte com”. Esse bloco permite a união de diversos tipos de informação e pode conter, inclusive, outros blocos “junte com” em seu interior. Dessa forma, será preciso colocar dentro de “Pergunte”, 4 blocos “junte com” e em seguida colocar na sequência dos espaços vazios os seguintes conteúdos, respectivamente: o texto “Quanto é o quociente da divisão de “; a variável “Dividendo”; o texto “  por ”; a variável “Divisor”; e por último o texto “?”.
  13. Agora precisamos fazer a verificação da resposta dada pelo usuário. No caso, o valor introduzido ficará na variável padrão “resposta” presente em sensores. Para verificar, coloque um bloco de controle “se então / senão” e como verificação utilize o bloco operador de igualdade com os blocos “resposta” e “Quociente”. No caso de estar correto, consequentemente a comparação ser verdadeira, coloque um bloco “diga por” com a mensagem “Uau, você acertou!” por 2 segundos. No caso de resposta errada, logo o caso falso, coloque um mesmo bloco porém com dois blocos “junte com” para podermos exibir o valor correto. Dessa forma, coloque na sequência dos espaços vazios os seguintes conteúdos: o texto “Ops, essa não é a resposta. O valor correto para o quociente é ”; a variável “Quociente”; e o texto ”.”  por 4 segundos.
  14. Para a pergunta a respeito do resto, a lógica é a mesma apresentada nos passos III.13 e III.14. No caso, o que será feito de diferente é que no primeiro espaço da pergunta, a mensagem escrita será “Agora, qual é o resto da divisão de ”. Além disso, a verificação e a exibição da resposta correta, conterão a variável “Resto” no lugar de “Quociente” juntamente ao primeiro texto de resposta incorreta atualizada com “Ops, essa não é a resposta. O valor correto para o resto é ”.
  15. Após a emissão da mensagem para o jogador, devemos indicar que o jogo acabou para voltarmos para a tela inicial. Antes disso é preciso esconder a imagem de “Abby” para que não apareça na tela inicial. Sendo assim, coloque um bloco de aparência “esconda”. Feito isso, iremos notificar o fim do jogo por meio do bloco de evento “transmita mensagem” com uma nova mensagem chamada “Fim de Jogo“.
  16. Para finalizar o código do jogo, devemos voltar para a área de código do ator “Button2”. Nele iremos adicionar o código de resposta ao evento de “Fim de Jogo” para voltarmos à tela inicial e poder continuar jogando. Iremos adicionar um bloco de evento “Quando eu receber” com o valor “Fim de Jogo” juntamente do mesmo conteúdo que vem seguido ao bloco de evento “quando (bandeira verde) for clicado” descrito nos passos III.1 e III.2.
  17. Finalizado todos os passos anteriores, agora resta esconder as variáveis para que durante o jogo não esteja visível a resposta para o jogador. Para isso, basta ir em variáveis e remover a seleção em frente de cada nome das variáveis. Por fim, para a exibição correta assim que começar a jogar pela primeira vez, deixe a Abby invisível manualmente clicando na segunda imagem presente em “mostrar” nas configurações do ator.

Imagens do jogo em desenvolvimento:

Tutorial em video:

Inscreva-se no Canal!

Pontos de atenção

  1. Para a definição das variáveis, é importante escolher um limite pequeno, como 1 a 100. Isso faz com que os jogadores lembrem mais de números comuns vistos no dia a dia, como da tabuada.
  2. Para definir o divisor, não esquecer de definir um limite máximo até o “Dividendo”, caso contrário a operação irá retornar um número menor que 1.
  3. Após a configuração do botão (passos III.1 e III.2), é necessário fazer uma verificação, para garantir que o botão está funcionando adequadamente.

Links úteis

undefined