Jogo do Crachá – Tutoriais Scratch

Proposta

O objetivo deste primeiro jogo (Jogo do Crachá) consiste em mostrar na interface uma palavra e colocar diversas letras à disposição para que a criança replique a mesma palavra com o uso dessas letras.

Foto ilustrativa do jogo.

Jogue aqui: https://scratch.mit.edu/projects/677317080/

Glossário

  • Atores: Elementos que possuem blocos de código e que permitem algum tipo de interação, seja esta por parte do usuário ou do sistema.
  • Variáveis: Variáveis são como caixinhas que guardam informações (texto ou número) para o nosso programa. Elas podem ser listas também, ou seja, um grupo com várias dessas caixinhas. Na imagem abaixo, é exemplificado como você pode criar variáveis e interagir com elas.
Menu esquerdo do Scratch mostrando algumas variáveis.
  • Eventos: Na aba de eventos, podemos definir o que deve acontecer quando outra coisa acontecer, como quando o jogo for iniciado por exemplo. Além disso, nos eventos é possível configurar a transmissão e recebimento de informações, 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.
  • Aparência: Nesta aba, podemos customizar coisas sobre a disposição visual do jogo, como falas de atores, mudança de cenários e mostrar/esconder coisas na tela.
  • Movimento: Nesta aba, podemos adicionar movimentos e animações aos atores.

Primeiros Passos

Primeiramente, devemos pensar nos pontos-chave da lógica inicial do nosso jogo e no que deve ser feito para dispor adequadamente os elementos na tela.

            Vamos iniciar criando as variáveis que usaremos neste jogo

  • _Jogar: Para sabermos se o jogo está em execução ou está “pausado”.
  • _palavraCerta: Que possuirá a palavra que o jogador deverá acertar.
  • Palavra Escrita: Que possuirá a palavra que o jogador estará montando na tela.
  • Pontuacao: Número responsável pela pontuação do jogador.
  • Palavras: Lista de palavras disponíveis a serem escolhidas como palavras certas (a serem replicadas)
Demonstração de como vai ficar após algumas variáveis serem criadas.

Quanto ao início do jogo propriamente dito, devemos clicar no ator do gato (Sprite1) e  ligar os blocos (assim como demonstrado na imagem abaixo) para descrever a configuração inicial, onde:

  • Habilitamos o cenário fundo de estrelas.
  • Mostramos o valor das duas variáveis (“Palavra Escrita” e “Pontuacao”)  na tela
  • Transmitimos “iniciarJogo”, para avisar o restante dos atores que o jogo foi iniciado, caso eles possuam alguma reação a esse evento.
Bloco inicial do jogo que é executado após clicarmos na bandeira verde no Scratch.

Feito isso, precisamos agora adicionar o bloco de código responsável por fazer o gato (Sprite1) perguntar como se escreve a palavra certa e atualizar algumas variáveis.

Gato perguntando como se escreve a palavra “Lobo” logo após termos iniciado o jogo.

Para fazermos isso, selecionado o  ator do gato, devemos adicionar os blocos abaixo para que, quando o ator (gato) receber “iniciarJogo” de outro ator,  executar os comandos para configurar o início do jogo:

  • Mudar a variável _jogar para 1 (para ativar a lógica).
  • Atualizar a palavra certa para um item aleatório na lista de palavras (outra variável), ao escolher o item cuja posição na lista se encontra entre um e o tamanho da lista de palavras.
  • Zerar a palavra escrita, a qual será preenchida futuramente.
  • Deslizar até as coordenadas definidas por 1 segundo, para gerar o efeito de animação.
  • Perguntar de fato como se escreve a palavra certa, sendo que o “junte” é responsável por juntar dois textos em um único elemento.
Bloco de instruções executado após o jogo ter sido iniciado.

Agora, devemos dispor as letras na tela do jogo, e para isso, devemos adicionar 1 ator para cada letra (assim como na imagem abaixo). Porém, no exemplo as letras já foram adicionadas, mas o seu deve ficar ao menos parecido com isso.

Exemplos de atores de letras presentes no jogo.

Por fim, é só definir a posição de cada letra ao arrastá-la com o mouse pela tela.

Quanto à exibição das letras, elas só devem ser mostradas na tela quando o jogo for iniciado. Assim, em cada letra (após o clique no ator), devemos adicionar o seguinte bloco de código:

Bloco de código para mostrar as letras após o jogo ter começado.

Esta mesma lógica pode ser replicada para adicionar os dois botões de “enviar” e “apagar” na tela, que também só devem aparecer quando o jogo for iniciado. Assim, selecione os atores para estes botões e adicione os seguintes blocos de código.

Bloco com as regras de aparência dos botões “Enviar” e  “Apagar”.

Montagem da palavra

Após termos adicionado todas as letras e botões na tela, devemos pensar como essas letras vão funcionar. Para isso, faça a seguinte pergunta: o que deve acontecer quando eu clicar em uma letra específica?

Quando clicamos em uma letra específica, ela deve ser adicionada a palavra que estamos formando. Agora, como podemos fazer isso? Na verdade, é uma lógica simples.

Bloco de código para adicionar a letra “a” quando for clicada à palavra escrita.

O que está acontecendo aqui é: a partir do momento que eu clicar em uma letra específica (nesse caso a letra “A”), ele vai alterar a palavra a escrita de modo que, a palavra escrita agora terá um “a” adicionado ao final dela. Pense da seguinte forma: Nova Palavra escrita será formada pela palavra atual + a. Isso deve ser replicado para todas as letras do alfabeto.

Apagando a palavra

Agora que sabemos como escrever palavras, devemos pensar em como apagar elas. Para começarmos faça a seguinte pergunta: o que deve acontecer quando eu apago uma palavra? Bom, ela deve sumir. Logo, todas as letras que colocamos lá devem desaparecer.

Bloco de código para apagar a palavra, no botão “Apagar”.

O código acima faz justamente isso: ele vai mudar a palavra que tínhamos escrito até agora para… nada, por isso o espaço em branco está vazio.

Validação das palavras

Agora que vimos como montar as palavras, precisamos saber se o que escrevemos está correto. Como podemos fazer isso? Bom, a resposta para essa pergunta não poderia ser mais simples: a palavra digitada estará correta quando ela for igual a palavra mostrada.

Bloco de código responsável por fazer a validação da palavra, no botão “Enviar”.

O bloco de código acima vai fazer justamente isso. Mas, vamos entender um pouco mais sobre suas partes individuais? Quando o usuário clicar em “Enviar”,  primeiramente ele vai verificar se o jogo já começou (se _jogar = 1 então). Caso o jogo já tenha começado, ele vai verificar se a palavra escrita pelo usuário é igual a palavra que o jogo nos deu. Caso isso seja validado como verdade, o jogo vai adicionar 1 na pontuação do usuário e transmitir “acertou”. Por outro lado, se a palavra escrita estiver incorreta, ele apenas vai transmitir “errou”.

Ações com base na validação

Perfeito, os outros atores já estão cientes do resultado, porém o mesmo não ocorre para o jogador, pois ainda não comunicamos na tela se ele acertou ou errou. Para que isso ocorra, deveremos mostrar uma mensagem por um tempo, além de mudar a variável jogar para zero, pois o jogo está “pausado” por assim dizer.

Bloco de código responsável por comunicar o resultado na tela (dentro do ator do gato)

Podemos notar que em ambos os resultados possíveis é transmitido “tentarNovamente”. Isso ocorre porque, além de mostrar o resultado para o jogador, devemos também habilitar a opção para o mesmo selecionar se quer jogar novamente (mantendo a pontuação, caso acerte) ou se prefere deixar o jogo.

Agora, você precisa adicionar dois atores, sendo eles botões com “sim” e “não”, para que o usuário possa responder à pergunta do gato na imagem acima. Ao final, o jogo deverá ficar parecido com isto:

Tela perguntando se o usuário deseja jogar o jogo novamente.

Em ambos os botões, devemos regular a visibilidade, para que eles só apareçam quando receberem “tentarNovamente”.

Bloco de código para controlar a visibilidade de “Sim” e “Não”.

Quanto aos eventos dos botões, a lógica também é bem simples:

  • No botão “Sim”, basta transmitir iniciarJogo (caso o jogo esteja “pausado”) quando o ator for clicado, o que fará com que o jogo seja retomado.
  • No botão “Não”, basta transmitir fimDeJogo quando o ator for clicado.

Agora, para o “fimDeJogo”, devemos esconder todos os outros elementos (inclusive as variáveis) e centralizar o gato com a mensagem, o que pode ser feito ao adicionarmos o seguinte bloco de código no ator no gato

ódigo para centralizar o gato com a mensagem (dentro do ator do gato)

Por fim, também gostaríamos de esconder as letras na tela quando o jogo terminar, e para isso precisamos adicionar em cada letra o bloco de código da imagem abaixo, e assim o jogo estará pronto.

Código para esconder a letra
Visual do encerramento do jogo
Inscreva-se no Canal do ACT!