{"id":1158,"date":"2022-05-13T18:32:51","date_gmt":"2022-05-13T21:32:51","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act\/?p=1158"},"modified":"2023-02-03T21:35:29","modified_gmt":"2023-02-04T00:35:29","slug":"jogo-de-contar-ate-30-tutorial-scratch-2-0","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/act\/2022\/05\/13\/jogo-de-contar-ate-30-tutorial-scratch-2-0\/","title":{"rendered":"Jogo de contar at\u00e9 30 &#8211; Scratch 2.0 &#8211; Grupo LCorp"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">O tutorial foi produzido pela equipe Lcorp \u2013 ACT Unicamp Limeira<\/p>\n\n\n\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 De Contar - Scratch 2.0\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/x9PiwFAtOK4?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 class=\"wp-element-caption\"><sup><sub>Inscreva-se no <a href=\"https:\/\/www.youtube.com\/channel\/UCCYzDDWYhHEt9-NODBosjqg\" target=\"_blank\" rel=\"noreferrer noopener\">Canal<\/a><\/sub><\/sup><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Jogue aqui &gt;&gt; <a href=\"https:\/\/scratch.mit.edu\/projects\/684075731\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/scratch.mit.edu\/projects\/684075731\/<\/a><\/p>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Gloss\u00e1rio<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<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>\n\n\n\n<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>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"306\" height=\"619\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-184.png\" alt=\"\" class=\"wp-image-1159\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-184.png 306w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-184-148x300.png 148w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><figcaption class=\"wp-element-caption\"><sub><sup><br>Imagem 1 &#8211; Menu esquerdo do Scratch mostrando algumas vari\u00e1veis.<\/sup><\/sub><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<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>\n\n\n\n<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>\n\n\n\n<li><strong>Movimento<\/strong>: Nesta aba, podemos adicionar movimentos e anima\u00e7\u00f5es aos atores.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:27px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Primeiros passos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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<ol class=\"wp-block-list\">\n<li>Precisamos saber quais informa\u00e7\u00f5es guardar sobre o jogo e seu andamento.<\/li>\n\n\n\n<li>Precisamos dispor os n\u00fameros na tela e torn\u00e1-los \u201carrast\u00e1veis\u201d<\/li>\n\n\n\n<li>Precisamos de um jeito de efetuar a soma quando soltarmos o n\u00famero no quadrado<\/li>\n\n\n\n<li>Por fim, precisamos mostrar o resultado e encerrar o jogo<\/li>\n<\/ol>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Inicio do jogo e o que devemos guardar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para a l\u00f3gica desse jogo temos dois pontos principais: a possibilidade de arrastar os n\u00fameros dispostos na interface para dentro da caixa em que ser\u00e1 contabilizada a soma e a checagem desse valor \u201csoma\u201d para compararmos com o nosso objetivo 30.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para isso usamos uma vari\u00e1vel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em><strong>contador<\/strong><\/em>: Para sabermos a soma atual dos n\u00fameros inseridos na caixa.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m gostar\u00edamos de fazer com que o gato explique o jogo no in\u00edcio, pelo fato da ideia do mesmo n\u00e3o ser t\u00e3o intuitiva quanto os outros jogos que fizemos. Portanto, voc\u00ea deve adicionar o seguinte bloco de c\u00f3digo no ator do gato:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"488\" height=\"306\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-185.png\" alt=\"\" class=\"wp-image-1160\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-185.png 488w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-185-300x188.png 300w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Como mostrar os n\u00fameros e torn\u00e1-los arrast\u00e1veis?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para mostrarmos os n\u00fameros, devemos adicionar um ator para cada (de 0 \u00e0 9) e uma caixa no meio, para que possamos inserir c\u00f3digo dentro deles posteriormente. Para adicionar um ator, basta clicar no bot\u00e3o do canto inferior direito,<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"398\" height=\"230\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-186.png\" alt=\"\" class=\"wp-image-1161\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-186.png 398w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-186-300x173.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Agora, precisamos adicionar algumas regras de apar\u00eancia essenciais para cada uma das letras e da caixa, uma vez que devemos esconder os n\u00fameros quando:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>O jogo for iniciado, pois segundo nossos planos o gato dever\u00e1 explicar como o jogo funciona no in\u00edcio.<\/li>\n\n\n\n<li>Quando o jogo terminar, seja o resultado \u201cganhou\u201d ou \u201cperdeu\u201d, para mostrarmos o encerramento na tela.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, devemos mostrar os n\u00fameros quando recebermos o evento \u201cin\u00edcio jogo\u201d, evento esse que \u00e9 transmitido depois que o gato terminar de apresentar o jogo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"305\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-187.png\" alt=\"\" class=\"wp-image-1162\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-187.png 478w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-187-300x191.png 300w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Como faremos a l\u00f3gica da soma?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando arrastamos um n\u00famero para dentro da caixa localizada no centro da tela, devemos adicionar esse n\u00famero \u00e0 vari\u00e1vel contador. Agora, como vamos saber que o n\u00famero est\u00e1 dentro da caixa? Bom, quando o n\u00famero estiver tocando a caixa, gra\u00e7as ao nosso bloco sensor (em azul claro).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o n\u00famero estiver tocando a caixa, vamos pegar o valor atual da vari\u00e1vel contador e adicionar o n\u00famero que acabamos de arrastar, assim, vamos ter um novo valor para contador. Ap\u00f3s contabilizar o novo valor, devemos fazer o ator do n\u00famero voltar ao seu lugar de in\u00edcio, como descrito no c\u00f3digo abaixo (incrementando o bloco que j\u00e1 t\u00ednhamos mostrado no t\u00f3pico anterior).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abaixo, pode ser identificado o que acabamos de explicar, no bloco \u201cquando eu receber in\u00edcio jogo\u201d, que deve ser replicado para todos os atores de n\u00fameros. Apenas lembre de mudar o valor adicionado ao contador para o valor do ator (n\u00famero) em si.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"502\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-188.png\" alt=\"\" class=\"wp-image-1163\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-188.png 497w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-188-297x300.png 297w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Encerramento do Jogo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizando a vari\u00e1vel <em>contador<\/em> n\u00f3s iremos checar se a soma alcan\u00e7ou o valor desejado, no caso 30. Caso o <em>contador<\/em> seja igual a 30 ent\u00e3o iremos transmitir o evento <em>ganhou<\/em>, esse evento \u00e9 recebido pelo Ator Principal e pela caixa. O Ator Principal ir\u00e1 mudar a localiza\u00e7\u00e3o e exibir a mensagem de sucesso. Por sua vez, caso o contador ultrapasse a contagem de 30, o ator ir\u00e1 receber o evento <em>perdeu<\/em>, esse evento, de semelhante forma, \u00e9 recebido pelo Ator Principal e pela caixa. O Ator Principal ir\u00e1 mudar sua localiza\u00e7\u00e3o e exibir a mensagem de derrota, por sua vez a caixa altera sua apar\u00eancia para <em>esconda<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"222\" height=\"168\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-189.png\" alt=\"\" class=\"wp-image-1164\" \/><figcaption class=\"wp-element-caption\"><em>l\u00f3gica para transmitir ganhou ou perdeu com base no contador<\/em><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"369\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-190.png\" alt=\"\" class=\"wp-image-1165\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-190.png 482w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-190-300x230.png 300w\" sizes=\"(max-width: 482px) 100vw, 482px\" \/><figcaption class=\"wp-element-caption\">ator do gato<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"304\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-191.png\" alt=\"\" class=\"wp-image-1166\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-191.png 438w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-191-300x208.png 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><figcaption class=\"wp-element-caption\">ator da caixa (ret\u00e2ngulo)<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O tutorial foi produzido pela equipe Lcorp \u2013 ACT Unicamp Limeira Jogue aqui &gt;&gt; https:\/\/scratch.mit.edu\/projects\/684075731\/ Gloss\u00e1rio Primeiros passos 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: Inicio do jogo e o que devemos guardar Para a l\u00f3gica desse jogo temos dois pontos [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":2866,"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-1158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":5,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1158\/revisions\/2867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media\/2866"}],"wp:attachment":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media?parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/categories?post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/tags?post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}