{"id":1842,"date":"2022-06-10T20:19:31","date_gmt":"2022-06-10T23:19:31","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act-new\/?p=1842"},"modified":"2022-06-10T20:19:33","modified_gmt":"2022-06-10T23:19:33","slug":"jogo-da-tabuada-scratch-2-0","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/2022\/06\/10\/jogo-da-tabuada-scratch-2-0\/","title":{"rendered":"Jogo da Tabuada &#8211; Scratch 2.0"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Jogo da Tabuada - Scratch 2.0\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/uPZc5Cifl1o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>Inscreva-se no <a href=\"https:\/\/www.youtube.com\/channel\/UCCYzDDWYhHEt9-NODBosjqg\" target=\"_blank\" rel=\"noreferrer noopener\">Canal!<\/a><\/figcaption><\/figure>\n\n\n\n<p>Jogo finalizado: <a href=\"https:\/\/scratch.mit.edu\/projects\/698699212\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/scratch.mit.edu\/projects\/698699212\/<\/a><\/p>\n\n\n\n<p>Imagens utilizadas: <a href=\"https:\/\/drive.google.com\/drive\/folders\/1cjFRQ6z93v8I7SMq8CaBj-m5z06QHdtS?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/drive.google.com\/drive\/folders\/1cjFRQ6z93v8I7SMq8CaBj-m5z06QHdtS?usp=sharing<\/a><\/p>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Gloss\u00e1rio<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Atores:<\/strong> Elementos que possuem blocos de c\u00f3digo e que permitem algum tipo de intera\u00e7\u00e3o, seja esta por parte do usu\u00e1rio ou do sistema.<\/li><li><strong>Vari\u00e1veis:<\/strong> Vari\u00e1veis s\u00e3o como caixinhas que guardam informa\u00e7\u00f5es (texto ou n\u00famero) para o nosso programa. Elas podem ser listas tamb\u00e9m, ou seja, um grupo com v\u00e1rias dessas caixinhas. Na imagem abaixo, \u00e9 exemplificado como voc\u00ea pode criar vari\u00e1veis e interagir com elas.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"271\" height=\"548\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-192.png\" alt=\"\" class=\"wp-image-1843\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-192.png 271w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-192-148x300.png 148w\" sizes=\"(max-width: 271px) 100vw, 271px\" \/><figcaption>Imagem 1 &#8211; Menu esquerdo do Scratch mostrando algumas vari\u00e1veis.<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Eventos: <\/strong>Na aba de eventos, podemos definir o que deve acontecer quando outra coisa acontecer, como quando o jogo for iniciado por exemplo. Al\u00e9m disso, nos eventos \u00e9 poss\u00edvel configurar a transmiss\u00e3o e recebimento de informa\u00e7\u00f5es, para caso queiramos avisar os outros atores do jogo de algo para que eles possam reagir a isso (como quando o jogador acertar a palavra) de alguma maneira.<\/li><li><strong>Apar\u00eancia: <\/strong>Nesta aba, podemos customizar coisas sobre a disposi\u00e7\u00e3o visual do jogo, como falas de atores, mudan\u00e7a de cen\u00e1rios e mostrar\/esconder coisas na tela.<\/li><li><strong>Movimento<\/strong>: Nesta aba, podemos adicionar movimentos e anima\u00e7\u00f5es aos atores.<\/li><li><strong>Operadores<\/strong>: Nesta aba, encontramos novos operadores matem\u00e1ticos, al\u00e9m dos disponiveis anteroirmente. Os operadores possuem uma forma circular, indicando que eles tamb\u00e9m podem ser encaixados em outros blocos, como as instru\u00e7\u00f5es de sa\u00edda, ou ainda para alterar o valor de uma vari\u00e1vel.<\/li><\/ul>\n\n\n\n<div style=\"height:42px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Primeiros passos<\/h2>\n\n\n\n<p>Primeiramente, devemos pensar nos pontos-chave da l\u00f3gica do nosso jogo. Assim, vamos iniciar pensando no que deve ser feito para elabor\u00e1-lo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Contas de multiplica\u00e7\u00e3o;<\/li><li>Espa\u00e7o para o jogador digitar o resultado da conta;<\/li><li>Verifica\u00e7\u00e3o para saber se a conta est\u00e1 certa;<\/li><li>Contagem de pontos feitos pelo usu\u00e1rio;<\/li><li>Mudan\u00e7a para uma nova opera\u00e7\u00e3o;<\/li><\/ul>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">In\u00edcio de jogo<\/h2>\n\n\n\n<p>Primeiramente, devemos apresentar as instru\u00e7\u00f5es no come\u00e7o do jogo. Para isso, vamos colocar o gato do scratch para explicar o jogo. Em seguida devemos apresentar a primeira conta a ser resolvida pelo usu\u00e1rio e, depois, checar se a resposta est\u00e1 correta. Ap\u00f3s isso devolveremos um aviso para informar o usu\u00e1rio se ele\u00a0 acertou ou n\u00e3o. Com isso,\u00a0 encerramos o ciclo de uma opera\u00e7\u00e3o e podemos apresentar a pr\u00f3xima. Isso ir\u00e1 se repetir at\u00e9 todas as opera\u00e7\u00f5es serem conclu\u00eddas.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"708\" height=\"583\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-193.png\" alt=\"\" class=\"wp-image-1844\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-193.png 708w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-193-300x247.png 300w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><figcaption>Imagem 1: bloco de c\u00f3digo referente ao in\u00edcio do jogo, apresenta\u00e7\u00e3o das contas ao usu\u00e1rio e verifica\u00e7\u00e3o do resultado.<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:37px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Contas<\/h2>\n\n\n\n<p>Para conseguirmos fazer as contas, precisamos de 20 n\u00fameros atores (10 para o primeiro n\u00famero e 10 para o segundo n\u00famero). Vamos associar eles com os respectivos n\u00fameros. Ent\u00e3o o ator 1 ter\u00e1 o valor 1, o ator 3 ter\u00e1 o valor 3, e assim por diante. Vamos fazer duas vezes: para o primeiro n\u00famero da multiplica\u00e7\u00e3o e para o segunda n\u00famero da multiplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Para a exibi\u00e7\u00e3o apropriada na tela, devemos seguir a seguinte l\u00f3gica: Caso o valor da vari\u00e1vel (\u201cNumero 1\u201d para o primeiro n\u00famero da conta, e \u201cNumero 2\u201d para o segundo) seja igual ao n\u00famero que aquele ator representa, queremos que ele apare\u00e7a, e caso contr\u00e1rio, esconda.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"354\" height=\"323\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-194.png\" alt=\"\" class=\"wp-image-1845\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-194.png 354w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-194-300x274.png 300w\" sizes=\"(max-width: 354px) 100vw, 354px\" \/><figcaption>Imagem 2: bloco de c\u00f3digo para mostrar ou n\u00e3o o n\u00famero 1.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Temos que lembrar outro ponto: n\u00e3o queremos que as contas sejam pr\u00e9 definidas. Dessa forma, o nosso programa deve selecionar dois n\u00fameros aleat\u00f3rios entre 0 e 10, e considerando o que mencionamos nos par\u00e1grafos anteriores, a parte visual dos n\u00fameros de uma rodada aleat\u00f3ria do jogo dever\u00e1 ficar assim:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"180\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-195.png\" alt=\"\" class=\"wp-image-1846\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-195.png 688w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-195-300x78.png 300w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><figcaption>Imagem 3: exemplo de conta.<\/figcaption><\/figure>\n\n\n\n<p>Depois que o usu\u00e1rio digitar a resposta, o gato do Scratch deve falar se a resposta est\u00e1 correta ou incorreta, e adicionar 1 a pontua\u00e7\u00e3o final do usu\u00e1rio.<\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Encerramento<\/h2>\n\n\n\n<p>No final do jogo, ou seja, depois de 10 contas, o gato do Scratch deve falar a pontua\u00e7\u00e3o final do jogador e o jogo deve se encerrar de maneira correspondente ao qu\u00e3o bem o jogador foi durante a partida. Tudo isso pode ser visualizado na imagem abaixo, onde apresentamos o fluxo de encerramento do jogo no ator principal (gato).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"684\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-196.png\" alt=\"\" class=\"wp-image-1847\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-196.png 769w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-196-300x267.png 300w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><figcaption>Imagem 4: bloco de c\u00f3digo referente ao final do jogo.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Al\u00e9m disso, os outros atores do jogo (n\u00fameros e o \u201cx\u201d da multiplica\u00e7\u00e3o) devem tamb\u00e9m se esconder para que o gato diga a mensagem final. Assim, em cada um deles, adicione o seguinte bloco de c\u00f3digo:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"426\" height=\"181\" src=\"https:\/\/liag.ft.unicamp.br\/act-new\/wp-content\/uploads\/sites\/33\/2022\/06\/image-197.png\" alt=\"\" class=\"wp-image-1848\" srcset=\"https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-197.png 426w, https:\/\/liag.ft.unicamp.br\/wp-content\/uploads\/sites\/33\/2022\/06\/image-197-300x127.png 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><figcaption>Imagem 5: bloco de c\u00f3digo para esconder as contas no final do jogo.<\/figcaption><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jogo finalizado: https:\/\/scratch.mit.edu\/projects\/698699212\/ Imagens utilizadas: https:\/\/drive.google.com\/drive\/folders\/1cjFRQ6z93v8I7SMq8CaBj-m5z06QHdtS?usp=sharing Gloss\u00e1rio Atores: Elementos que possuem blocos de c\u00f3digo e que permitem algum tipo de intera\u00e7\u00e3o, seja esta por parte do usu\u00e1rio ou do sistema. Vari\u00e1veis: Vari\u00e1veis s\u00e3o como caixinhas que guardam informa\u00e7\u00f5es (texto ou n\u00famero) para o nosso programa. Elas podem ser listas tamb\u00e9m, ou seja, um grupo com [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"class_list":["post-1842","post","type-post","status-publish","format-standard","hentry","category-sem-categoria"],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/posts\/1842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/comments?post=1842"}],"version-history":[{"count":2,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/posts\/1842\/revisions"}],"predecessor-version":[{"id":1850,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/posts\/1842\/revisions\/1850"}],"wp:attachment":[{"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/media?parent=1842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/categories?post=1842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/aprendizadocriatividadeetecnologia\/wp-json\/wp\/v2\/tags?post=1842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}