Code4Kids

Resumo do curso

 

 

Code4kids

Nesse curso o aluno aprenderá uma ferramenta intuitiva chamada Scratch, produzida pela Massachusetts Institute of Technology - MIT dedicada a ensinar programação para crianças e jovens. Hoje, jogos e animação gráfica sao as brincadeiras do momento e as profissões do futuro. Com esse curso seu filho ingressará em um mundo divertido e dará os primeiros passos na linguagem de programação.

 

PLANO DE AULAS

Code4kids

Objetivo geral do curso:  Aumentar o desejo pela área de programação. Esse curso é a maneira mais lúdica de iniciar crianças no mundo da programação, ao término é indicado entrar no curso de Criação de games 2D.

 

Scratch 27 Horas (18 Aulas)

Descrição módulo

  1.  Aula: Introdução ao Scratch apresentando a interface e os recursos básicos da ferramenta.

Fazer jogo clique no rato.

  1. Troca de cenário, seguir o mouse

fazer jogo do rato fugindo do gato

 

  1. A definição de uma variável, laços de repetição, contagem de pontos.

Fazer a imagem de uma bruxa aparecer de maneira aleatória e desaparecer quando for clicada, e adicionar um placar para contagem das vezes que acertou a bruxa.

 

  1. Resposta a cliques, alteração da aparência de objetos, tocar sons, transmissão e recepção de eventos.

fazer uma história a escolha do aluno.

 

  1. Laços de repetição, parar laços de repetição.

Lição Criar um ponto onde vários objetos ficam aparecendo na mesma posição aleatoriamente Fazer parar quando clicado.

 

  1. Movimentar e controlar os personagens, criar uma visão dos eixos x e y, detectar colisões, condições de parada.

Lição Criar um jogo para orientar um peixe e tentar comer todas as presas que estão nadando pelo mar.

 

  1. Eventos, variáveis, animação, tocar sons, condições de parada, modificar recursos.

Lição  Montar um jogo de corrida entre um leão e um papagaio no deserto. Ao chegarem ao final, mostrar mensagem de quem venceu e recomeçar o jogo

 

  1. Manter e definir o placar, mudar trajes e aparência, definir uma resposta aleatória, detectar um clique e verificar se o objeto foi clicado, transmissão de mensagens.

Lição  Um objeto é mostrado na tela em menor escala e distorcido, opções de vários objetos aparecem e tem-se que acertar qual é o objeto que está distorcido

 

  1. Condições de parada, comparação numérica, contas simples de matemática.

Lição   Criar uma ferramenta de pintura para criar desenhos. Esta ferramenta permitirá escolher a cor do lápis, limpar a tela, usar carimbos.

 

  1. Utilização do vídeo para interação

Lição Criar um jogo que destrói o inimigo utilizando as mãos .

  1. Criar uma animação sobre Princesas e cavaleiros

 

  1. Fazer um animal de estimação virtual

 

  1. Fazer um jogo de labirinto

 

  1. Compartilhar nas redes sociais.

  1. Fazer um jogo ou animação para apresentar no DragonDay. (3 aulas)

 

  1. Dragon Day

Aula 1

Aula 1:

Vamos conhecer o Scratch?
Objetivo: Introduzir o Scratch apresentando a interface e os recursos básicos da ferramenta. Introduzir conceito de ator e pano de fundo.

O Scratch é uma ferramenta desenvolvida pelo MIT para ensinar crianças a partir de 6 anos a programarem computador.

Primeiro devemos abrir o Scratch no ícone que fica na Área de Trabalho do seu computador:

Obs: o programa deverá ter sido instalado anteriormente.

 

Depois, o próximo passo é abrir um programa (jogo) no Menu Arquivo:

 

Clicar em “Abrir” para escolher o jogo: “Clicando no codeDragon”.

Este jogo deverá ser disponibilizado pelo professor.

Agora que o programa já está aberto vamos entender a tela e seus principais botões e componentes?

 

 

Vamos fazer as seguintes alterações no jogo:

– Mudar o pano de fundo

– Mudar a fantasia do ator.

– Desenhar a fantasia do ator.

– Mudar o som quando clicar no codeDragon (escolher novo som e gravar um)

 

Clique na aba “Sons”

Clique no autofalante para visualizar e escolher mais sons.

 

Para gravar um novo som com o microfone do computador selecione o botão destacado abaixo:

 

Escolha um nome:

 

 

Clique em gravar como destacado abaixo:

 

 

Obs: sons gravados pelo microfone costumam precisar ser editados no botão”Editar” ao lado do botão de gravação.

Obs: antes de tentar gravar o som assegure-se que seu computador possua um microfone funcional.

– Depois de carregado do arquivo ou criado um novo som, ele estará pronto para ser selecionado na área de Script.

 

– Mudar o que o codeDragon fala ao iniciar o jogo.

– Salvar as alterações do jogo.

 

 

Aula 2

Aula 2

Vamos escrever nosso primeiro programa?
Objetivos: Iniciação a EVENTOS e MOVIMENTO. Leitura de teclado e introdução a LOOPs. Criação e manipulação de atores.

Que tal fazermos um jogo de um gatinho correndo atrás de um rato?

Ao abrir o programa scracth (online ou offline) ele cria automaticamente um novo projeto com o gatinho do Scratch na tela:

Caso queira relembrar como foi feito o jogo do gato e rato em sala de aula você pode assistir os vídeos abaixo:

PASSO 1:

– Incluir novo ator (rato) e mudar nomes dos atores.

– Incluir evento “Quando clicar na bandeira verde”

– Ir para o conjunto de comandos “MOVIMENTO”

– Incluir comando “mover X passos”.

– Colocar vários “mover X passos” para o gato andar mais rápido.

– Incluir o comando SEMPRE

– Montar o loop com o comando SEMPRE

– Testar.

PASSO 2:

– Agora vejam que o gato está andando apenas para frente (para a direita). Se o rato não estiver na frente do gato ele não será pego. Para resolver esse problema, vamos incluir o comando “APONTAR PARA” (para fazer com que o gato aponte para o rato e assim vá atrás dele!)

– Vamos colocá-lo dentro do SEMPRE e selecionar o ator rato. Assim o gato estará sempre apontando para o ratinho.


PASSO 3:

Agora vamos ajudar o ratinho a fugir. Para isso precisamos fazer ele se mover quando pressionarmos as setas para cima, pra baixo e para os lados.

– Mudar para o ator rato.

– Usar o EVENTO “QUANDO A TECLA xxx FOR PRESSIONADA” (que está dentro do grupo EVENTOS) para ler as teclas quando forem pressionadas.

– Escolher a seta e apontar de maneira correspondente e mover:

 

– Fazer isso para as 4 setas.

– Como o ratinho está movendo na mesma velocidade do gato, ele não consegue fugir. Vamos aumentar os passos do rato para ele andar mais rápido? (colocar 30 passos).

CÓDIGO FINAL:

Código do Ator Gato:

Código do Ator Rato:

 

ATIVIDADE EXTRA:

– Agora podemos criar um novo ator cachorro (ou outro que você escolher) e colocá-lo para perseguir o gato (exatamente como fizemos antes).

Dica: É importante reduzir o número de passos do cachorro para 5 para que ele corra mais devagar:

Aula 3

Aula 3

Vamos escrever o joguinho de “Clicar no codeDragon” que conhecemos na primeira aula?
Objetivo: A definição de manipulação de variáveis e laços de repetição.

– Vamos fazer o jogo que clicar no codeDragon para marcar pontos. Os pontos serão armazenados dentro de uma caixinha na parte de cima da tela.

INTRODUZINDO VARIÁVEIS

– Uma variável é como uma caixa onde nós guardamos algum número para não esquecermos. Neste caso, guardaremos nessa caixa os pontos que marcamos ao clicar no codeDragon. Esta caixa é, na verdade, o que chamamos de variável.

VAMOS FAZER NOSSO PROGRAMA?

PASSO 1:

– Para criar uma variável precisamos ir para o conjunto de comandos “VARIÁVEIS”

– Devemos os criar uma variável com o nome “Pontos” para onde vamos guardar quantos pontos fizemos:

 

– Depois de criada a variável temos as opções de guardar alguma coisa na variável (mudar), somar e mostrar o que foi guardado na variável:

Para ver como se cria uma variável podemos assistir o vídeo abaixo:

 

 

PASSO 2:

– Precisamos descobrir quando o usuário conseguir clicar no ator (pois assim ele vai marcar pontos). Para isso, vamos aprender o evento “QUANDO ESTE ATOR FOR CLICADO” que fica dentro do grupo “EVENTOS”

– Se o usuário consegue clicar no ator o que fazemos? Precisamos adicionar mais um ponto na caixinha (variável) que guarda os pontos do jogado (pra ficar mais legal, podemos tocar um som quando o usuário conseguir marcar pontos):

 

PASSO 3:

– Escolher novo pano de fundo.

– Ir para o grupo de comandos “APARENCIA” e escolher o comando “MOSTRE” e “ESCONDA” que fará o codeDragon aparecer e desaparecer.

– Ira para o grupo “CONTROLE”

– Pegar o comando ESPERE para fazer o codeDragon esperar um segundo:

– Coloque o ator para aparecer e desaparecer com intervalo de espera de 1 seg. Depois repita isso diversas vezes:

– Agora, ao invés de repetir diversas vezes os comandos, podemos usar o loop SEMPRE dentro do conjunto de comandos CONTROLE:

– Mantendo o código desenvolvido anteriormente temos a primeira versão do jogo sem o ator se mover aleatoriamente:

Vamos testar?

 

PASSO 4:

– Agora vamos colocar o codeDragon para aparecer em qualquer lugar da tela. Assim fica difícil de acertar ele, né? Para isso precisamos usar as coordenadas x e y. Agora não vamos estudar muito isso, basta colocar um número aleatório para x e y como abaixo:

Obs: A localização é definida por duas coordenadas: x e y. Para ele aparecer em qualquer lugar da tela temos que usar o comando descrito acima (neste momento não nos aprofundaremos muito neste conceito):

– Colocar o comando acima dentro do LOOP e antes do comando “MOSTRE”

 

– Por fim, vamos incluir os outros comandos de inicialização antes do LOOP SEMPRE:

– Vamos testar e jogar!!!!

ATIVIDADE PARA CASA: Pensar em um jogo simples para fazer com o que aprendemos até agora. Trocar ideias com os outros alunos e professores.

Aula 4

Aula 4:

Vamos fazer a bola de fogo do codeDragon atravessar um labirinto?
Objetivo: revisar LOOPs, leitura de teclado e variáveis. Novo conceito: colisão de objetos e comando condicional.

Obs: para esta aula será necessário carregar o projeto do “labirinto do codeDragon”. O arquivo do projeto poderá ser fornecido pelo professor ou baixado do site.

Pessoal, vamos programar a bola de fogo que o codeDragon solta para fazer ela chegar até o morcego mau!

 

PASSO 1: mover a bola de fogo com as setas ignorando o labirinto verde (como feito na aula do gato correndo atrás do rato). Nesse momento não vamos considerar a colisão dos atores.

 

 

https://youtu.be/Zy53x7iB_YU

 

PASSO 2: Não passar por cima do labirinto, contornando as barreiras verdes. Para tal, usaremos o conceito de colisão de atores (comando “TOCANDO EM …”) e o comando condicional (comando “SE ENTÃO”).

 

Devemos fazer com que quando a bola tocar no labirinto verde ela deverá voltar pra sua posição anterior, ou seja, ela terá que andar pra trás (mover passos negativos)

Quando a bola de fogo tocar no labirinto verde ela deverá retornar.

– Como saber se a bola está tocando em labirinto verde?

Para isso vamos comando condicional “SE ENTÃO” dentro do grupo de “CONTROLE”

Se a condição dentro da caixa   …    for verdadeira, tudo que estiver dentro será executado. O que a gente quer saber se é verdade? Queremos saber se a bola está tocando no labirinto verde.

– Para saber isso, vamos usar no grupo “SENSORES” o sensor “TOCANDO EM… “

– Para fazer a bola retornar, devemos apontar para a direção contrária e mover a bola de volta, esperar meio segundo e tocar um beep:

Obs: podemos também mover –5 passos que é igual a mover na direção contrária.

 

– fazer o mesmo para todas as setas e adicionar a inicialização (para posicionar a bola):

Atividade extra:

– colocar pontos para cada vez que o morcego for pego

– iniciar a bola de fogo colocando na posição de início.

– criar diferentes labirintos (mais difíceis) e mudar a cada vez que o jogador marcar um ponto.

Aula 5

Aula 5

Pegue o Helicóptero com a mão.
Objetivo: Prática de LOOPs, revisão de comando condicional, revisão de colisão de atores. Novo conceito: manipulação de câmera e manipulação de fantasias.

PREPARAÇÃO:

Assegurar que o computador tenha uma câmera em bom funcionamento.

ORIENTAÇÂO PROFESSOR:

– Carregar o jogo “Helicóptero com Vídeo – completo” e mostrar para o aluno como funciona o jogo para que eles o implementem.

PASSO 1:

– Orientar o aluno a criar o ator helicóptero (pegando da biblioteca do Scratch) e outro ator muro como abaixo:

– Depois programar para fazer o ator helicóptero se mover continuamente para a direita até chegar no muro. Quando tocar no muro emitir um som e retornar para o início da tela à esquerda.

(relembrar com os alunos o comando condicional o SENSORES)

– Testar e ver o resultado.

 

PASSO 2:

– Agora, devemos incluir o controle do vídeo fazendo com que o helicóptero, ao ser “tocado” pelo movimento detectado pela câmera, retorne ao início antes de atingir o prédio:

. Para ativer a câmera devemos usar o comando de SENSORES “VIDEO <ligado>”:

Deve ser incluído assim que o programa começar.

Assim que o comando for executado pela primeira vez o computador pedirá autorização para usar a câmera. O usuário deverá permitir (caso o aluno não permita, o programa precisará ser reiniciado).

Obs: assim que o aluno permitir o uso da câmera aparecerá na tela a imagem da câmera.

 

. Para que o programe detecte o movimento na câmera devemos usar o comando SE … ENTÃO com o SENSOR “<movimento> DE VIDEO EM <este ator>”. Ou seja, se o programa “sentir” que ouve movimento no vídeo ele então informará.

Obs: o valor 20 define o quanto sensível será o movimento. Um número muito alto exige muito movimento. Um número baixo fará com que qualquer movimento ative o sensor.

Desta maneira ficamos com o seguinte resultado para o ator helicóptero:

– Testar o programa.

 

PASSO 3:

. Para finalizar devemos introduzir o conceito de fantasia. Um ator pode ter diversas fantasias que são variações da imagem. P0odemos trocar a fantasia dos atores durante o programa. Por exemplo:

 

Fantasias do gatinho do Scratch:

Fantasias do codeDragon voando:

Fantasia de um dinossauro dançando:

As fantasias geralmente são usadas para mostrar algum movimento. Vamos usar estas fantasias do helicóptero para ele parecer que explodiu:

Ir para “FANTASIAS” e clicar em “CARREGAR A PARTIR DE ARQUIVO”

. Selecione o arquivo fornecido para a aula com o helicóptero explodido:

Agora devemos mudar a fantasia para o helicóptero explodido sempre que ele tocar no ator muro. Assim ele terá a “aparência” ter explodido quando bateu. Depois retornar ao helicóptero normal:

Mostrar dentro do bloco “APARENCIA” o comando “MUDE FANTASIA PARA <…> “. Incluí-lo nos pontos em que o helicóptero toca no ator muro:

Obs: caso as duas fantasias estejam com tamanhos diferentes, eles devem ser ajustadas no editor de imagem do Scracth.

 

Obs: opcionalmente, ao invés de carregar o arquivo, pode-se orientar os alunos a desenhar um helicóptero explodido duplicando-se e alterando-se o já existente.

 

. Por fim, deve-se substituir o comando “mova – 450 passos” por outro que o coloque o ator em uma posição aleatória quando ele retornar ao início da tela. Além disso, deve-se criar dois outros atores idênticos para que tenham três helicópteros no jogo:

 

DE:

PARA:

Aula 6

Aula 6

Pegue o Peixinho
Objetivo: Nessa Aula Vamos aprender a nos movimentarmos em um plano cartesiano (x e y), lembrando que X: É na posição deitado (horizontal) e Y: É em pé (Vertical).

Além de tudo isso, ainda vamos aprender uma instrução muito legal onde o ator pergunta para o jogador e ele pode escrever a resposta. Muito usado em jogos de RPG.

Na imagem também vemos que os valores de x pra direita são positivos e para esquerda são negativos, o de Y pra cima são positivos e para baixo negativos.

Conheça o jogo:

 

 

 


 

 

Vamos montar a imagem do jogo:


 

 

Programa do Tubarão:

 


 

Programa do Peixinho:

 

 


Colocando Pontuação:

Aula 7

Aula 7

Jogo da corrida entre gato e cavalo:
Objetivo: Nessa aula vamos aprender uma maneira diferente de utilizar as variáveis e utilizaremos muitas mensagens entre os atores.


Layout do jogo, como vai ficar a tela do jogo.


Programação do Gato.

 

Programa Gato:

 

 

 

 

 

 

 

 

 

 

 

 

 


Programação do cavalo:

 

Programa Cavalo

 

 

 

 

 

 

 

 

 

 

 

 


 

Selecionando o Ator e testando o jogo:

Programa seleção Gato:                                         Programa seleção ReStart:

                          

 

Programa seleção cavalo:                                           Programa Start:

            

Aula 8

Aula 8:

Caixa de Pintura
Objetivo: Nessa aula vamos aprender a fazer nosso próprio programa de pintura, vamos utilizar muitas mensagens e ainda muitas funções bem legais da aba caneta.

Vídeo 1:

Vídeo 2:

Video 3:

Video 4:

Video 5

 

Programa do botão apagar:

 

Programa do botão Verde:

 

Programa do botão Vermelho:

 

Programa do botão Amarelo:

 

Programa do botão Azul

 

Programa de Aumentar linha:

 

Programa diminuir linha:

 

Programa do Lápis:

 

Aula 9

Aula 9

Corrida multiplayer
Objetivo: Recapitular os movimentos que já utilizamos e aprender a mudar o angulo do nosso ator. Além de aprender a fazer um jogo em que 2 jogadores jogam ao mesmo tempo.


 

 

Layout  do jogo:


 

Programa do carro vermelho:

 

continuação:


Programa carro azul:

Aula 10

Aula 10

Animal de estimação
Objetivo: Utilizar o tempo como variável para gerar pontuação, melhorar a interação entre os objetos.

Layout do jogo:

Video 2


Programa da banana

 

Programa do copo d'agua

 

Programa do tambor

 

video 3


Programa do macaco

 

video 4

 

video 5

 

 

Material didático em PDF:

Baixar material didático em pdf (27 descarregamentos)