{"id":803,"date":"2022-04-29T02:04:08","date_gmt":"2022-04-29T05:04:08","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act\/?p=803"},"modified":"2023-02-03T21:54:19","modified_gmt":"2023-02-04T00:54:19","slug":"jogo-de-geometria-scratch-3-0","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/act\/2022\/04\/29\/jogo-de-geometria-scratch-3-0\/","title":{"rendered":"Jogo de Geometria – Scratch 3.0 – Hello World"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Jogue aqui: https:\/\/scratch.mit.edu\/projects\/679495174\/<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

Descri\u00e7\u00e3o do material<\/h2>\n\n\n\n

<\/p>\n\n\n\n

O jogo de geometria \u00e9 um jogo infantil desenvolvido na plataforma Scratch, onde \u00e9 necess\u00e1rio que o aluno fa\u00e7a o reconhecimento de uma figura apresentada e digite seu nome correspondente, retornando uma mensagem de verifica\u00e7\u00e3o.<\/p>\n\n\n\n

Objetivo<\/h2>\n\n\n\n

Promover o estudo das formas geom\u00e9tricas b\u00e1sicas por um meio l\u00fadico e cativante para o p\u00fablico infantil em um jogo simples. Al\u00e9m disso, instiga os alunos a pensarem nos principais conceitos de programa\u00e7\u00e3o para elabora\u00e7\u00e3o da atividade<\/p>\n\n\n\n

Tutorial de elabora\u00e7\u00e3o<\/h2>\n\n\n\n

Configurando os cen\u00e1rios<\/h3>\n\n\n\n

Ser\u00e1 necess\u00e1rio para este jogo a utiliza\u00e7\u00e3o de dois cen\u00e1rios: School e Theater 2. Para preparar o ambiente, deve ser feito:<\/p>\n\n\n\n

    \n
  1. Inicialmente, para adicionar um cen\u00e1rio a lista de cen\u00e1rios do projeto, v\u00e1 na se\u00e7\u00e3o Palco <\/strong>(localizada no canto inferior direito), clique em \u201cSelecionar cen\u00e1rio\u201d e selecione o cen\u00e1rio \u201cSchool\u201d.<\/li>\n\n\n\n
  2. Seguindo os mesmos passos citados anteriormente, adicione o cen\u00e1rio \u201cTheater 2\u201d.<\/li>\n\n\n\n
  3. Ap\u00f3s a adi\u00e7\u00e3o dos cen\u00e1rios, verifique se a se\u00e7\u00e3o Palco <\/strong>est\u00e1 selecionada e clique na aba \u201cCen\u00e1rios\u201d<\/strong> (presente no canto superior esquerdo), para abrir a tela de configura\u00e7\u00e3o das informa\u00e7\u00f5es dos cen\u00e1rios adicionados.<\/li>\n\n\n\n
  4. Nesta aba, ser\u00e1 poss\u00edvel ver a presen\u00e7a de tr\u00eas cen\u00e1rios adicionados no projeto. Como apenas o \u201cSchool\u201d e o \u201cTheater 2\u201d ser\u00e3o utilizados, remova o primeiro cen\u00e1rio clicando sobre e na lixeira que aparece logo em seguida.<\/li>\n\n\n\n
  5. Para facilitar a identifica\u00e7\u00e3o durante a elabora\u00e7\u00e3o do c\u00f3digo, ser\u00e1 necess\u00e1rio renomear os cen\u00e1rios. Para isso, selecione o cen\u00e1rio \u201cSchool\u201d, e na \u00e1rea fantasia<\/strong>, coloque o nome \u201cCen\u00e1rio inicial\u201d.<\/li>\n\n\n\n
  6. Fa\u00e7a o mesmo com cen\u00e1rio \u201cTheater 2\u201d, por\u00e9m com o nome \u201cCen\u00e1rio da pergunta\u201d<\/li>\n<\/ol>\n\n\n\n

    Configurando os atores<\/h3>\n\n\n\n

    Para a realiza\u00e7\u00e3o deste jogo ser\u00e3o necess\u00e1rios tr\u00eas atores. Sendo dois do pr\u00f3prio Scratch (\u201cButton2\u201d e \u201cDevin\u201d) e um que ser\u00e1 adicionado com as figuras. Para prepar\u00e1-los, deve ser feito:<\/p>\n\n\n\n

      \n
    1. Como o ator padr\u00e3o do Scratch n\u00e3o ser\u00e1 utilizado, come\u00e7aremos o removendo. Indo at\u00e9 a \u00e1rea dos atores (localizada ao lado da se\u00e7\u00e3o Palco<\/strong>), selecione o \u201cAtor1\u201d e em seguida clique na lixeira.<\/li>\n\n\n\n
    2. Para adicionar um ator, clique no bot\u00e3o \u201cSelecione um Ator\u201d e escolha o ator \u201cButton 2\u201d. Este ator servir\u00e1 para dar in\u00edcio ao jogo.<\/li>\n\n\n\n
    3. Ao selecionar um ator, \u00e9 poss\u00edvel ver as suas configura\u00e7\u00f5es atuais. Para facilitar na identifica\u00e7\u00e3o do ator, selecione-o e, na \u00e1rea \u201cAtor\u201d, coloque o nome \u201cJogar\u201d. Para colocarmos o bot\u00e3o no local desejado, coloque para X o valor 0 e para o Y o valor -125.<\/li>\n\n\n\n
    4. \u00c9 poss\u00edvel modificar os atores, seja os editando ou colocando outros visuais e, nesse caso, iremos editar o bot\u00e3o. Verifique se o ator \u201cJogar\u201d est\u00e1 selecionado, clique na aba \u201cFantasias\u201d <\/strong>(presente no canto superior esquerdo). Agora \u00e9 poss\u00edvel notar que existem dois visuais para esse bot\u00e3o. Para o Primeiro, colocaremos o nome para Fantasia como \u201cEspera\u201d e , para o segundo, \u201cSobre\u201d. Para ambos escreveremos \u201cJogar\u201d em sua imagem e, para isso, \u00e9 preciso clicar no s\u00edmbolo \u201cT\u201d<\/strong>, selecionar a cor do texto (nesse caso preto) e clicar sobre a imagem na posi\u00e7\u00e3o desejada.<\/li>\n\n\n\n
    5. Seguindo as instru\u00e7\u00f5es citadas anteriormente, adicione o ator \u201cDevin\u201d. Ele que comandar\u00e1 a execu\u00e7\u00e3o do jogo realizando as perguntas.<\/li>\n\n\n\n
    6. Para as configura\u00e7\u00f5es iniciais dele, coloque para X o valor -120 e para Y o valor -40. Ap\u00f3s isso, deixe-o invis\u00edvel clicando na segunda imagem presente em \u201cmostrar\u201d.<\/li>\n\n\n\n
    7. Para adicionar um ator que n\u00e3o est\u00e1 presente no site do Scratch, coloque o mouse sobre o bot\u00e3o \u201cSelecione um Ator\u201d<\/strong> e em seguida clique em \u201cEnviar Ator\u201d<\/strong>. Selecione a primeira imagem do conjunto de figuras disponibilizadas e em \u201cAbrir\u201d.<\/strong><\/li>\n\n\n\n
    8. Para as configura\u00e7\u00f5es, renomeie para \u201cFigura\u201d, e coloque na posi\u00e7\u00e3o X igual a 0 e Y igual a 0. Al\u00e9m disso, \u00e9 poss\u00edvel alterar o tamanho da imagem, mexendo em sua propor\u00e7\u00e3o. Nesse caso, colocaremos o valor de \u201cTamanho\u201d igual a 30. Por fim, deixo-o invis\u00edvel.<\/li>\n\n\n\n
    9.  Para adicionar as demais imagens a serem utilizadas, abra a tela de Fantasias do ator \u201cFigura\u201d. No canto inferior esquerdo, posicione o mouse sobre o bot\u00e3o \u201cEscolher Fantasia\u201d <\/strong>e clique em \u201cCarregar Fantasia\u201d<\/strong>. Selecione as demais figuras e clique em \u201cAbrir\u201d<\/strong>.<\/li>\n<\/ol>\n\n\n\n

      Criando o jogo<\/h3>\n\n\n\n
        \n
      1. O jogo ser\u00e1 iniciado quando a bandeira verde for clicada. Para garantir que o \u201cCen\u00e1rio inicial\u201d estar\u00e1 vis\u00edvel, na tela de c\u00f3digo do ator \u201cJogar\u201d, coloque o evento \u201cquando (bandeira verde) for clicado\u201d na \u00e1rea de c\u00f3digo. Em seguida, coloque o bloco \u201cmude para o cen\u00e1rio\u201d presente em \u201cApar\u00eancia\u201d na sequ\u00eancia e selecione \u201cCen\u00e1rio inicial\u201d.<\/li>\n\n\n\n
      2. Sempre que for aberto o cen\u00e1rio inicial, dever\u00e1 ser exibido o bot\u00e3o. Para isso adicione o evento \u201cquando o cen\u00e1rio mudar para\u201d e selecione \u201cCen\u00e1rio inicial\u201d e em seguida o comando de apar\u00eancia \u201cmostre\u201d.<\/li>\n\n\n\n
      3. Para dar apar\u00eancia de um bot\u00e3o tradicional sempre que estiver na tela inicial, faremos um c\u00f3digo que altera o visual quando o mouse estiver sobre o bot\u00e3o. Para isso, logo na sequ\u00eancia ao \u201cmostre\u201d, coloque um bloco de controle \u201csempre\u201d para que enquanto nesta tela, o comando fique sendo executado. Dentro dele coloque um bloco \u201cse ent\u00e3o \/ sen\u00e3o\u201d, que contar\u00e1 com a verifica\u00e7\u00e3o se o mouse est\u00e1 sobre o bot\u00e3o ou n\u00e3o. Como condi\u00e7\u00e3o do \u201cse\u201d, coloque o sensor \u201ctocando em\u201d com a op\u00e7\u00e3o \u201cponteiro do mouse\u201d. No caso verdadeiro dessa verifica\u00e7\u00e3o, coloque o bloco de apar\u00eancia \u201cmude para a fantasia\u201d com a op\u00e7\u00e3o \u201cSobre\u201d e, no caso falso, um mesmo bloco de apar\u00eancia por\u00e9m com a op\u00e7\u00e3o \u201cEspera\u201d.<\/li>\n\n\n\n
      4. Para iniciar o jogo, dever\u00e1 ser clicado o bot\u00e3o \u201cJogar\u201d<\/strong>. Para fazer esse controle, insira um novo evento \u201cquando este ator for clicado\u201d. Como o bot\u00e3o n\u00e3o deve ficar aparente durante a execu\u00e7\u00e3o, insira logo na sequ\u00eancia o comando de apar\u00eancia \u201cesconda\u201d e, como ele n\u00e3o est\u00e1 mais vis\u00edvel, devemos parar a altera\u00e7\u00e3o de visuais por meio do bloco de controle \u201cpare\u201d com a op\u00e7\u00e3o \u201coutros scripts no autor\u201d. Feito isso, transmita uma mensagem para iniciar o jogo, inserindo um novo evento \u201ctransmita mensagem\u201d e adicione uma nova mensagem chamada \u201cIniciar Jogo\u201c.<\/li>\n\n\n\n
      5. Ao final desses passos, verifique se o bot\u00e3o est\u00e1 funcionando corretamente.<\/li>\n\n\n\n
      6. Para a execu\u00e7\u00e3o do jogo, o c\u00f3digo estar\u00e1 presente no ator \u201cDevin\u201d. Para isso, selecione-o e, em seu corpo, coloque o evento \u201cquando eu receber\u201d com a op\u00e7\u00e3o “Iniciar Jogo”.<\/li>\n\n\n\n
      7. Assim que se inicia o jogo, Devin falar\u00e1 com o jogador. Por\u00e9m, ele se encontra invis\u00edvel, sendo necess\u00e1rio a sua exibi\u00e7\u00e3o por meio do bloco da apar\u00eancia \u201cmostre\u201d. Com isso, agora \u00e9 poss\u00edvel exibir a fala,  inserindo o bloco presente em apar\u00eancia \u201cdiga\u201d com dura\u00e7\u00e3o de 3 segundos e no texto a fala desejada. Neste caso, a mensagem a ser apresentada \u00e9 \u201cOl\u00e1 amiguinho! Voc\u00ea conhece o nome das figuras geom\u00e9tricas para me ajudar?\u201c.<\/li>\n\n\n\n
      8. Na sequ\u00eancia ser\u00e1 elaborada e feita a pergunta sobre as figuras e para isso vamos seguir para o cen\u00e1rio \u201cCen\u00e1rio da pergunta\u201d, por meio do bloco \u201cmude para o cen\u00e1rio\u201d presente em “Apar\u00eancia”. Como efeito visual, colocaremos o Devin pensando durante a pergunta. Para isso \u00e9 preciso colocar o bloco \u201cmude para a fantasia\u201d com a op\u00e7\u00e3o \u201cdevin-b\u201d. Agora, com essa mudan\u00e7a no visual, quando for executado mais uma vez o jogo, ele come\u00e7ar\u00e1 com o novo visual, e, para que isso n\u00e3o ocorra, deve ser colocado um bloco \u201cmude para a fantasia\u201d com a op\u00e7\u00e3o \u201cdevin-a\u201d antes do \u201cmostre\u201d.<\/li>\n\n\n\n
      9. Para a pergunta, iremos utilizar um sistema de aleatoriedade e ser\u00e1 preciso uma lista com o nome de todas as figuras que estar\u00e3o presentes no jogo (fantasias do ator \u201cFigura\u201d). Para isso, v\u00e1 em \u201cvari\u00e1veis\u201d, clique em \u201ccriar uma lista\u201d e coloque o nome \u201cLista de figuras\u201d. Ser\u00e1 poss\u00edvel visualizar a lista criada no canto superior direito, logo em cima do cen\u00e1rio.<\/li>\n\n\n\n
      10. No canto da lista, existe um s\u00edmbolo \u201c+\u201d que serve para adicionar itens na lista. Clique nele e insira o nome de cada fantasia presente no ator \u201cFigura\u201d. Ap\u00f3s feito isso, voc\u00ea dever\u00e1 estar com uma lista de comprimento 8.<\/li>\n\n\n\n
      11. Para a figura selecionada, tamb\u00e9m utilizaremos uma vari\u00e1vel que guardar\u00e1 o nome da figura sorteada. Para isso, v\u00e1 em \u201cvari\u00e1veis\u201d, clique em \u201ccriar uma Vari\u00e1vel\u201d e coloque o nome \u201cFigura Sorteada\u201d.<\/li>\n\n\n\n
      12. Com as vari\u00e1veis criadas, vamos elaborar o bloco que ir\u00e1 sortear uma figura. Primeiramente ser\u00e1 utilizado um bloco que salvar\u00e1 o valor dentro da vari\u00e1vel \u201cFigura Sorteada\u201d. O bloco utilizado \u00e9 o \u201cmude para\u201d que est\u00e1 presente em \u201cvari\u00e1veis\u201d.<\/li>\n\n\n\n
      13. Para selecionar um nome da lista de acordo com sua posi\u00e7\u00e3o, utilizaremos um bloco da se\u00e7\u00e3o vari\u00e1veis \u201citem de\u201d com a op\u00e7\u00e3o \u201cLista de figuras\u201d dentro da \u00e1rea ap\u00f3s o \u201cpara\u201d do bloco anterior.<\/li>\n\n\n\n
      14. Para selecionar uma posi\u00e7\u00e3o aleat\u00f3ria da lista, utilizaremos um bloco de operadores chamado \u201cn\u00famero aleat\u00f3rio entre\u201d com os valores 1 e 8 no local ap\u00f3s \u201citem\u201d do bloco anterior. Caso for alterado o n\u00famero de elementos na lista, o valor 8 deve ser alterado, por\u00e9m, para evitar essa mudan\u00e7a manual, tamb\u00e9m \u00e9 poss\u00edvel utilizar o bloco presente em vari\u00e1veis com o nome \u201ctamanho de\u201d com a op\u00e7\u00e3o \u201cLista de figuras\u201d.<\/li>\n\n\n\n
      15. Para exibir a figura sorteada, devemos colocar um bloco de evento \u201ctransmita e espere\u201d e adicionar uma nova mensagem \u201cExibir figura\u201d. Ap\u00f3s isso, vamos modificar o script do ator \u201cFigura\u201d.<\/li>\n\n\n\n
      16. Ap\u00f3s selecionado \u201cFigura\u201d, mudaremos o visual para a figura correta e exibiremos. Para isso, utilize o bloco do evento \u201cquando eu receber\u201d com a op\u00e7\u00e3o \u201cExibir figura\u201d para ativar o script e, em seguida coloque o bloco de apar\u00eancia \u201cmude para a fantasia\u201d e, como valor coloque a vari\u00e1vel \u201cFigura Sorteada\u201d. Em seguida, basta colocar o bloco \u201cmostre\u201d.<\/li>\n\n\n\n
      17. Voltando para o ator \u201cDevin\u201d, ser\u00e1 feita a pergunta sobre a figura que est\u00e1 sendo exibida. Dessa forma, utilize o bloco \u201cpergunte e espere\u201d presente em sensores com a mensagem que ser\u00e1 exibida. No caso, utilizaremos \u201cQual o nome dessa figura?\u201d. Ap\u00f3s o usu\u00e1rio responder, a resposta fica salva na vari\u00e1vel “resposta” presente na se\u00e7\u00e3o sensores<\/strong>.<\/li>\n\n\n\n
      18. Agora com a resposta, iremos verificar se o nome inserido \u00e9 o correto. Para a verifica\u00e7\u00e3o iremos utilizar um bloco de controle \u201cse ent\u00e3o\/ sen\u00e3o\u201d. Como valor a ser verificado, utilizaremos um operador de \u201c=\u201d para verificar se o valor presente na vari\u00e1vel \u201cresposta\u201d \u00e9 igual ao da vari\u00e1vel \u201cFigura Sorteada\u201d. Se forem iguais, utilizaremos o bloco presente em apar\u00eancia \u201cdiga\u201d com dura\u00e7\u00e3o de 2 segundos e com a mensagem \u201cParab\u00e9ns, voc\u00ea acertou!\u201d e, caso esteja errado, um mesmo bloco por\u00e9m com a mensagem \u201dQue pena, o nome n\u00e3o \u00e9 esse.\u201d.<\/li>\n\n\n\n
      19. Ap\u00f3s a verifica\u00e7\u00e3o da resposta, ele informa o nome da figura, mesmo se correto. Nesse caso, \u00e9 utilizado o mesmo bloco \u201cdiga\u201d com dura\u00e7\u00e3o de 3 segundos por\u00e9m, no local da mensagem, para colocar um texto junto com o valor da vari\u00e1vel, utilizamos o bloco de operadores \u201cjunte com\u201d que juntar\u00e1 a mensagem \u201dO nome dessa figura \u00e9 \u201d com o valor da vari\u00e1vel \u201cFigura Sorteada\u201d.<\/li>\n\n\n\n
      20. Ap\u00f3s a exibi\u00e7\u00e3o das falas, dever\u00e1 ser lan\u00e7ada a mensagem que o jogo finalizou para voltar \u00e0 tela inicial. Dessa forma, deve ser colocado um novo evento \u201ctransmita mensagem\u201d e adicione uma nova mensagem chamada \u201cFinalizar Jogo\u201c para que a figura suma e assim n\u00e3o apare\u00e7a no cen\u00e1rio inicial. Ap\u00f3s isso, selecione o ator \u201cFigura\u201d e adicione o bloco do evento \u201cquando eu receber\u201d com a op\u00e7\u00e3o \u201cFinalizar Jogo\u201c. Na sequ\u00eancia coloque o bloco de apar\u00eancia \u201cesconda\u201d.<\/li>\n<\/ol>\n\n\n\n

        Por fim, para retornar corretamente para a tela inicial, retorne aos scripts do ator \u201cDevin\u201d e esconda-o por meio do bloco \u201desconda\u201d e em sequ\u00eancia mude de cen\u00e1rio para o \u201cCen\u00e1rio inicial\u201d por meio do bloco \u201cmude para o cen\u00e1rio\u201d presente em “Apar\u00eancia”.<\/p>\n\n\n\n

        Pontos de aten\u00e7\u00e3o<\/h2>\n\n\n\n
          \n
        1. O conceito geral de vari\u00e1vel assim como os controles condicionais poder\u00e1 ser complicado de entender no in\u00edcio, havendo a necessidade de mais explica\u00e7\u00f5es.<\/li>\n\n\n\n
        2. A explica\u00e7\u00e3o do bloco de controle \u201csempre<\/strong>\u201d juntamente aos comandos presentes internamente provavelmente causar\u00e1 estranheza, sendo necess\u00e1ria uma explica\u00e7\u00e3o mais ampla. Caso n\u00e3o queira explicar seu uso, pode ser removido todo o bloco juntamente do bloco \u201cpare outros scripts desse ator<\/strong>\u201d presente no script de quando o ator for clicado. O conjunto desses c\u00f3digos n\u00e3o afetar\u00e3o o funcionamento direto do c\u00f3digo, apenas se tratam de um efeito visual depois que o c\u00f3digo for ativado.<\/li>\n\n\n\n
        3. A explica\u00e7\u00e3o da linha utilizada para selecionar os nomes das figuras aleatoriamente provavelmente dever\u00e1 ser explicada de outras maneiras para passar o funcionamento de como est\u00e1 sendo todo o processo que gera o nome de alguma das figuras.<\/li>\n<\/ol>\n\n\n\n
          <\/div>\n\n\n\n

          Tutorial em video:<\/p>\n\n\n\n

          \n