Aula com o Scratch 

Faça os seguintes jogos, agora na sala virtual do Scratch, do Prof. Marcos.
Sala virtual que você se cadastrou.

Jogo Corrida de Carros

Revisão da aula da semana 24 a 28 de fevereiro
Alura

Revisão da Primeira Aula da Alura - Unidade de Lógica de Programação: jogos, arte e criatividade

Nesta unidade, vamos ensinar a construir dois projetos. O primeiro é inspirado em nossa infância, quando brincávamos de pega-pega. Vamos explicar ao computador como funciona a brincadeira e criar uma versão digital.

Para isso, aprenderemos a adicionar personagens, criar um cenário divertido, fazer com que um personagem corra atrás do outro e pare ao se encostarem. Queremos que você explore a criatividade e use esse projeto como base para futuros projetos incríveis.

O segundo projeto é uma extensão chamada Caneta, que faz uma analogia com desenhar no caderno com papel e caneta. Aqui, o computador será nosso papel e a extensão será a caneta para criar desenhos. Vamos trabalhar com simetria e usar muitos recursos para criar desenhos divertidos.

Se você está curioso ou curiosa para começar essa jornada de aprendizado, te espero no próximo vídeo, onde começaremos a ensinar como construir o projeto do pega-pega juntos. Vamos lá?

Olá, pessoal!

Sejam muito bem-vindos a mais uma unidade!

Nesta unidade, vamos te ensinar a construir dois projetos.

Primeiro projeto

Será um jogo inspirado na brincadeira chamada pega-pega. Vamos explicar ao computador como ela funciona e criar uma versão digital.

Para construirmos nosso jogo, vamos:

1 - Aprender a adicionar personagens;

2 - Criar um cenário divertido;

3 - Fazer com que um personagem corra atrás do outro e pare ao se encostarem.

Queremos que você explore sua criatividade e use esse projeto como base para futuros projetos incríveis.

Segundo projeto

Vamos usar uma extensão no StartLab chamada “Caneta”, semelhante a desenhar no caderno com papel e caneta. Aqui, o computador será nosso papel e a extensão será a caneta para criar desenhos divertidos.

Link geral da aula

Transcrição

Olá! Vamos começar a construir o nosso projeto do pega-pega?

Antes de começarmos a programar e desenvolver esse projeto, é importante que você pausr este vídeo e vá até uma atividade chamada "Comece aqui". Lá, você encontrará um link sublinhado na cor roxa ou azul com o texto "Inicie seu projeto aqui".

Vamos clicar com o botão esquerdo do mouse sobre o link e ele nos levará ao ambiente de programação onde vamos começar a desenvolver o nosso projeto. Podemos pressionar o atalho "F11" do teclado para deixar o código em tela cheia.

Como vamos desenvolver nosso projeto do pega-pega? Primeiro, precisamos definir as regras básicas: teremos um personagem que representará nós mesmos, que vai fugir, e outro que vai correr atrás. Além disso, vamos criar um cenário divertido.

[00:53] Seleção dos personagens e do cenário

Vamos começar pelo personagem principal, aquele que vai nos representar. Na parte inferior direita da tela, há uma opção para selecionar um ator. Clicando com o botão esquerdo do mouse, você encontrará diversas opções de fantasias e personagens. Todos estão organizados em ordem alfabética, então é fácil procurar por eles. Escolherei o Casey como nosso personagem principal, mas, se preferir outro, fique à vontade para escolher.

Em seguida, vamos selecionar o segundo personagem, aquele que vai correr atrás da gente. Novamente, na parte inferior direita, selecionamos um ator. Pense em um personagem que você acharia assustador ou divertido para essa função. Pode ser um morcego, urso, dinossauro, cachorro, entre outros. Eu escolherei o Frog, um sapo, porque não gosto muito de sapos e quero fugir dele.

Ao observar o projeto até agora, você verá que há um gatinho na parte inferior direita, que é o personagem padrão ao iniciar o projeto. Como não queremos o gatinho no nosso jogo, vamos excluí-lo. Para isso, clique com o botão esquerdo do mouse sobre o gatinho e selecione o ícone da lixeira.

Agora, vamos pensar no cenário para substituir o fundo branco padrão. Em vez de selecionar um personagem, vamos escolher um cenário. Na parte inferior direita da tela, há a opção "Celecionar cenário". Lá, você encontrará vários cenários disponíveis. Escolherei o "Blue Sky", mas fique à vontade para usar a criatividade e escolher o que preferir.

Com o cenário e os personagens definidos, precisamos programar suas ações. No momento, nosso código não faz nada, pois apenas configuramos os elementos visuais.

[02:51] Programação das ações do Casey

Primeiro, vamos fazer o Casey seguir o cursor do nosso mouse. Isso permitirá que controlemos o personagem principal, enquanto fugimos do sapo. Então, selecione o Casey clicando com o botão esquerdo do mouse sobre ele para começar a desenvolver o código. No lado esquerdo da tela, estão os blocos de programação que usaremos.

Para iniciar o projeto, precisamos que ele comece quando a bandeira verde for clicada. A bandeira verde funciona como um botão de "play". Clique na categoria amarela "Eventos", na paleta de blocos à esquerda, selecione o bloco quando "bandeira verde" for clicado e arraste para a área de código.

Queremos que o Casey sempre siga o cursor do mouse. Para isso, usaremos um bloco de controle que permite ações contínuas. Na categoria laranja "Controle", selecione o bloco sempre e arraste para baixo do bloco quando "bandeira verde" for clicado. Este bloco fará com que a ação dentro dele seja repetida indefinidamente.

Agora, precisamos que o Casey se mova para a posição do cursor do mouse. Na categoria azul "Movimento", selecione o bloco vá para [posição aleatória] e arraste para dentro do bloco sempre.

quando "bandeira verde" for clicado

sempre

    vá para [posição aleatória]

Copiar código

Perceba que há uma seta à direita de posição aleatória. Isso indica que este bloco possui um menu que permite alterar esta opção. Ao clicar nesta seta, temos outras opções, como ponteiro do mouse e Frog. Vamos escolher ponteiro do mouse.

quando "bandeira verde" for clicado

sempre

    vá para [ponteiro do mouse]

Copiar código

Com isso, quando clicarmos na bandeira verde e movimentarmos o mouse, o Casey seguirá o cursor do mouse, permitindo que você controle o personagem principal.

[04:55] Programação do Frog (Sapo)

Agora, precisamos programar o Frog, pois ele ainda não tem nenhuma ação definida. Para isso, pause o projeto clicando em "Pare", um círculo vermelho que fica à direita da bandeira verde.

Depois, na parte inferior direita, selecione o Frog com o botão esquerdo do mouse. Você verá que ele não possui nenhum código, pois só programamos o Casey até agora.

Precisamos fazer o Frog seguir o Casey. Vamos começar com os mesmos blocos que usamos para o Casey. Clique na categoria amarela "Eventos", na paleta de blocos à esquerda, selecione o bloco quando "bandeira verde" for clicado e arraste para a área de código. Em seguida, na categoria laranja "Controle", selecione o bloco sempre e encaixe-o no bloco quando "bandeira verde" for clicado.

quando "bandeira verde" for clicado

sempre

Copiar código

Agora, vamos para a categoria azul "Movimento", selecionamos o bloco deslize por [1] segs. até [posição aleatória] e arrastamos para dentro do bloco sempre.

quando "bandeira verde" for clicado

sempre

    deslize por [1] segs. até [posição aleatória]

Copiar código

Clicando na seta à direita de posição aleatória, abrimos o menu deste bloco. Ao fazer isso, vemos as outras opções ponteiro do mouse e Casey. Como queremos que ele vá atrás do Casey, vamos selecionar a opção Casey.

quando "bandeira verde" for clicado

sempre

    deslize por [1] segs. até [Casey]

Copiar código

Agora, ao clicar na bandeira verde, podemos movimentar o Casey com o mouse e o Frog o seguirá continuamente, criando a primeira versão do nosso jogo de pega-pega!

Vamos parar o projeto novamente clicando no círculo vermelho e salvá-lo clicando em "Salvar agora", no topo da página. É importante lembrar de salvar o projeto para podermos continuar a usá-lo!

[06:35] Próximos passos

Na próxima aula, precisamos melhorar alguns aspectos. Queremos que o movimento do Frog seja mais suave e, além disso, o jogo deve parar quando o Frog encostar no Casey. Faremos isso na próxima aula.

Nos vemos lá!

08Para saber mais: Loop ou Laço de repetição (`sempre`)

Nesta aula, aprendemos um conceito muito importante que utilizaremos por diversas vezes durante nosso aprendizado em programação: a ideia de repetição contínua com bloco de repetição sempre.

O bloco sempre é um tipo de laço que faz algo acontecer sem parar. Um exemplo seria quando você está jogando um jogo e o personagem continua andando, até você dizer para ele parar.

Vamos ver este bloco de código acontecer na prática? A ideia é fazer o personagem (no caso escolhemos o “Ben”, mas pode ser outro) girar em torno de si continuamente, até o programa ser parado. Inicialmente adicionamos o Ben e um cenário para ele:

Projeto da Caneta

Entre no link a seguir do projeto da Caneta na Alura.

https://cursos.alura.com.br/course/logica-de-programacao-jogos-artes-criatividade/task/164012

Transcrição

Olá, estudante! Nesta aula, começaremos a construir um novo projeto. Na nossa atividade "Comece Aqui Meu Projeto", clicaremos com o botão esquerdo do mouse sobre o botão verde da página, escrito "Iniciar meu projeto" para acessarmos o ambiente do StartLab.

Nosso grande desafio para este projeto é começar a usar extensões, ou seja, blocos que ainda não estão dentro do StartLab e que ainda não aprendemos. Neste caso, estamos falando de uma extensão chamada caneta.

[00:32] Utilizando a extensão caneta

Audiodescrição: Animação de uma pasta aparecendo com o título "Parte 1: Utilizando a extensão caneta". O fundo é verde, a pasta é um degradê de laranja para rosa e no canto superior direito da pasta tem uma figurinha colorida com o desenho do rosto do Cody. Além disso, toca uma música instrumental suave.

Ao olharmos para lista de blocos, à esquerda, não conseguimos encontrar nenhum bloco associado à caneta. Para resolvermos isso, precisaremos adicionar uma extensão, clicando com o botão esquerdo do mouse no botão roxo no canto inferior esquerdo, com o ícone de dois blocos e um sinal de "+".

Ao clicarmos, encontraremos alguns cartões com opções. O segundo dele é o cartão "Caneta", onde clicaremos. Ao fazermos isso, adicionamos ao nosso projeto uma nova categoria de blocos, chamada "Caneta".

Se o nosso desafio é usar a caneta, podemos imaginar como ela é utilizada fora do computador. Pegamos um lápis ou uma caneta, posicionamos em um pedaço de papel e desenhamos com a mão. No caso do computador, usamos o mouse para representar a mão, então podemos usar alguns códigos que já fizemos no projeto anterior, como o do pega-pega.

Começamos com o quando "bandeira verde" é clicada, e encaixamos o sempre nele. Ao invés de vá para [posição aleatória], mudaremos para [ponteiro do mouse]. Assim, quando clicamos na bandeira verde, o Cody passa a seguir o ponteiro do mouse pelo palco, como se fosse o nosso lápis.

quando "bandeira verde" for clicado

sempre

    vá para [ponteiro do mouse]

Copiar código

Paramos o código e, se quisermos utilizar a caneta, acessaremos a categoria "Caneta" na coluna da esquerda. Nessa categoria, encontraremos o bloco use a caneta. Arrastaremos esse bloco para ficar antes do bloco sempre, pois queremos que ele use a caneta apenas uma vez.

quando "bandeira verde" for clicado

use a caneta

sempre

    vá para [ponteiro do mouse]

Copiar código

Agora, ao clicamos no botão de bandeira verde, acima do palco, o Cody, ao seguir o ponteiro do mouse, deixa uma linha azul por onde passa. Assim poderemos desenhar, criar formas geométricas ou escrever nosso nome.

Ao construirmos esses desenhos, percebemos que, toda vez que paramos e reiniciamos o código, os desenhos criados anteriormente continuam lá. Podemos imaginar uma forma que, ao clicarmos novamente na bandeira, uma folha nova aparece no palco do StartLab, como se virássemos a página. Vamos fazer isso.

Começaremos parando o código. Na seção de blocos de caneta, temos o bloco apague tudo. Podemos arrastar ele para antes do bloco use a caneta.

quando "bandeira verde" for clicado

apague tudo

use a caneta

sempre

    vá para [ponteiro do mouse]

Copiar código

Quando clicamos na bandeira verde, primeiro apagamos todos os desenhos, depois usamos a caneta e, por fim, adicionamos o cursor para sempre seguir o ponteiro do mouse. Assim, quando clicamos no botão de bandeira verde, todos os riscos que desenhamos anteriormente somem, permitindo que escrevamos novamente.

Eu vou fazer o teste de escrever o meu nome. Enquanto faço isso, notamos que o Cody está muito grande, atrapalhando quando tento escrever.

[03:36] Determinando o tamanho do Cody

Audiodescrição: Animação de uma pasta aparecendo com o título "Parte 2: Determinando o tamanho do Cody". O fundo é verde, a pasta é um degradê de laranja para rosa e no canto superior direito da pasta tem uma figurinha colorida com o desenho do rosto do Cody. Além disso, toca uma música instrumental suave.

Para diminuirmos o tamanho do Cody, primeiro vamos arar o desenho. Abaixo do palco, encontramos o campo "Tamanho", que está no valor 100. Podemos ajustar esse valor para ficar menor que 100. Por exemplo, se mudarmos o tamanho para 5 e pressionarmos Enter, o Cody fica extremamente pequeno na tela, e não atrapalhando nossos desenhos.

Tamanho: 5

Podemos explorar mais funcionalidades da caneta. Então pararemos novamente o código, clicando no botão vermelho no canto superior esquerdo do palco.

Na coluna da esquerda, ainda na categoria "Caneta", encontramos outros blocos, como o mude a cor da caneta para ["cor laranja"]. Se não quisermos uma caneta azul, que é a cor padrão, podemos escolher outra cor.

Arrastaremos esse bloco para baixo do use a caneta, mas sempre deixaremos fora do bloco sempre. No mundo real, podemos abrir um estojo com várias cores de caneta e escolher a que preferirmos. Da mesma forma, ao clicarmos no campo com a cor, abrimos um menu com três campos (Cor, Saturação e Brilho) e, arrastando o ponto branco nesses campos, podemos selecionar a cor desejada.

Observação: O instrutor disse que escolheu a cor roxa, mas com o campo "Brilho" estava com um valor muito alto, a tonalidade escolhida ficou rosa.

Por exemplo, vou escolher a cor roxa. Movi o ponto branco do campo "Cor" para roxo e cliquei na bandeira verde. Agora, quando movo a caneta no palco, está com a cor que escolhi. Também podemos aumentar o tamanho da caneta, se acharmos que a ponta esta fina.

Na coluna de blocos, encontramos o bloco mude o tamanho da caneta para [1]. Normalmente o valor 1 é o padrão, que é a linha mais fina.

Podemos alterar esse valor e aumentar a espessura da linha. Arrastamos esse bloco para cima do bloco sempre e alteramos o valor para 3, por exemplo.

quando "bandeira verde" for clicado

apague tudo

use a caneta

mude a cor da caneta para ["cor rosa"]

mude o tamanho da caneta para [3]

sempre

    vá para [ponteiro do mouse]

Copiar código

Ao clicarmos na bandeira, a caneta fica maior, permitindo criar nossas próprias artes.

Fica o desafio para vocês: desenhem bem legal. No próximo vídeo, vamos explorar como desenhar com mais canetas de forma divertida.

Até lá!

Carimbo no Star Lab

https://cursos.alura.com.br/course/logica-de-programacao-jogos-artes-criatividade/task/182853

• 1º Parte da aula, cadastrar-se no Scratch, turma do professor Marcos -  professor2025cwb

• 2º Parte da aula, continuar o curso do Alura, de onde você parou.