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.

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.

• 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)

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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:

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

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

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.