Projeto Atual:

Programando Aplicativos com Javascript

06/02/2020

Programando Aplicativos com AI2 - Adivinhe

Voltar ao Sumário

Adivinhe

Descubra a palavra oculta

Lembra daquela brincadeira do Jogo da Forca? Um jogador escreve uma palavra em um pedaço de papel e pede para o outro adivinhar o que foi escrito, letra a letra.

Como dica sobre a palavra, são desenhados traços horizontais, um para cada letra.

Conforme o segundo jogador escolhe letras, estas são colocadas sobre os traços, nos lugares onde ocorrem, ou o primeiro jogador adiciona mais um traço ao boneco que vai ser enforcado, se a palavra não tem a letra. Se a palavra não for descoberta após um certo número de erros, o primeiro jogador ganha.

Por exemplo, se a palavra oculta é MANGA, o jogo começa assim:

_ _ _ _ _

Se o segundo jogador escolhe a letra B, o primeiro desenha a cabeça do enforcado.

Se o segundo jogador escolhe a letra A, ele acertou, e a palavra adivinhada passa a ser:

_ A _ _ A

E assim por diante.

Hoje, você vai criar um App para jogar esse jogo com os amigos.

Preparação - O Algoritmo

Para criar um bom programa, você tem que entender bem o problema que quer resolver. Tente criar um algoritmo em papel para executar o jogo, e compare com a solução abaixo:

1 - Comece com uma variável para guardar a palavra oculta;
2 - Você vai precisar de outra variável para guardar o progresso do segundo jogador. Só que traços são difíceis de enxergar em uma tela. Podem ser "*", como nas senhas que você digita? Então, essa variável começa com tantos "*" quantas letras na palavra oculta;
3 - Você precisa contar quantas letras o segundo jogador errou. Para isso,
vai precisar de uma variável numérica, que começa com 0.
4 - Agora, precisamos de um laço, ou repetição:
5 - Para cada letra proposta:
  5.1 - Se a letra existe na palavra oculta,
    5.1.1 - Para cada posição em que a letra proposta existe na palavra oculta,
      5.1.1.1 - Substitua o "*" da palavra adivinhada que está nesta posição
                pela letra proposta.
    5.1.2 - Se a palavra adivinhada é igual à palavra oculta,
      5.1.2.1 - Então, fim do jogo! O segundo jogador ganhou.
  5.2 - Senão (a letra não existe),
    5.2.1 - Aumente o número de erros de 1 unidade.
    5.2.2 - Se o número de erros passou do limite (qual é o limite?),
      5.2.2.1 - Fim do jogo! O primeiro jogador ganhou.

Pronto! Você já tem um algoritmo.

É interessante também que você faça um esboço em papel da tela do App. Nesta primeira versão, comece com uma tela simples:

  • Uma caixa de texto para ler a palavra oculta;
  • Um botão para iniciar o jogo com a nova palavra oculta;
  • Uma caixa de texto para ler a letra;
  • Um botão, para testar a letra;
  • Uma legenda com múltiplas linhas para mostrar os resultados.

Criando o App

Para criar o aplicativo, navegue para o site do App Inventor (http://appinventor.mit.edu), clique em Create Apps e faça Login com sua conta no Google. Quando o App Inventor iniciar, escolha a opção de menu Projetos/Iniciar novo projeto... (troque a língua para Português do Brasil).

Um diálogo vai solicitar o nome do projeto. Escolha um nome e clique no botão Ok (nome sugerido: Adivinhe, ou Forca).

O App Inventor já criou um componente para você, chamado Screen1. Esta é a tela do App. Mude o título dessa tela, para o nome do seu App. Para isso, role o painel Propriedades até visualizar a caixa de texto Título. Troque o valor para o nome do app (Adivinhe).

Designer

Selecione os componentes para criar seu aplicativo.

Comece escolhendo uma caixa de texto para a palavra oculta e um botão para iniciar o jogo. O App Inventor possui um componente chamado CaixaDeSenha, que é apropriado para a palavra oculta, porque esconde o texto digitado com asteriscos (*).

1 - Arraste o componente Legenda do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como Legenda1. No painel Propriedades, troque a propriedade Texto para "Palavra Oculta:".

2 - Arraste o componente CaixaDeSenha do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como CaixaDeSenha1.

3 - No painel Componentes, clique no botão Renomear para mudar o nome do componente. Por exemplo para: txPalavraOculta. Nomes que representam bem a função dos componentes vão ajudar na fase de programação.

4 - No painel Propriedades, mude a propriedade Largura deste componente para 50 porcentagem.

5 - Arraste o componente Botão do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como Botão1.

6 - No painel Componentes, clique no botão Renomear para mudar o nome do componente. Por exemplo para: btReiniciar. No painel Propriedades, mude também o Texto para "Reiniciar".

Veja na imagem abaixo como sua tela vai estar após estas operações (O painel Paleta foi omitido):

7 - Seria melhor que a caixa de senha e o botão estivessem arranjados na horizontal. Para conseguir isso, abra no painel Paleta o grupo de componentes de Organização, e escolha uma Organização Horizontal. Arraste a organização para o painel do Visualizador, logo abaixo da legenda "Palavra Oculta", e mova os componentes para dentro da organização.

Você vai precisar de outra caixa de texto, para o jogador 2 escolher uma letra, e um botão para fazer o jogo testar esta letra. Os passos são parecidos com os que você já executou, mas dessa vez você vai usar uma CaixaDeTexto.

8 - Arraste o componente Legenda do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como Legenda1. No painel Propriedades, troque a propriedade Texto para "Escolha uma letra:".

9 - Arraste o componente CaixaDeTexto do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como CaixaDeTexto1.

10 - No painel Componentes, clique no botão Renomear para mudar o nome do componente. Por exemplo para: txLetra. No painel Propriedades, mude a propriedade Largura para 10 porcentagem.

11 - Arraste o componente Botão do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o componente, ele aparece no painel do Visualizador e na lista do painel Componentes como Botão1. Renomeie o componente para: btOk. Mude também o Texto para "Ok".

12 - Esses três componentes cabem em uma mesma linha. Arraste para o Visualizador mais uma OrganizaçãoHorizontal, e organize os componentes dentro dela.

Só falta mais um componente na sua tela: Uma área de mensagens para o App mostrar os resultados.

13 - Arraste o componente Legenda do painel Paleta para o painel Visualizador. Renomeie o componente (que aparece como Legenda3)  para lgResultados.

14 - Com o novo componente selecionado, no painel Propriedades, altere a Altura e Largura para preencher principal, e o texto para "Resultados".


Agora, a tela deve estar como na imagem abaixo:



Programando com o Editor de Blocos

Neste ponto, você tem todos os componentes de que vai precisar. É hora de criar o programa. Clique no botão Blocos  que está no canto superior direito da tela para passar para a tela do Editor de Blocos.

Consultando o algoritmo que preparou no início dessa atividade, você vai ver que precisa guardar pelo menos três dados que devem persistir por todo o jogo: O número de erros, a palavra oculta e a palavra "adivinhada". Para dados persistentes, você deve utilizar variáveis de escopo global. A primeira é um número, e as outras duas são texto.

1 - No painel de Blocos, clique no grupo Variáveis e arraste um bloco inicializar global nome para para o painel do Visualizador. Escolha um bom nome  para a variável que vai contar os erros (que tal quantos_erros?). Troque o nome pelo nome escolhido. A variável deve começar com um valor numérico. No painel de Blocos, clique no grupo Matemática e arraste um bloco 0 para encaixar com o bloco inicializar global quantos_erros para.

2 - Para as duas variáveis que vão guardar texto, o procedimento é parecido, e só muda no tipo de dado final: Arraste mais dois blocos inicializar global nome para (grupo Variáveis) para uma área livre do painel do Visualizador. Troque os nomes para: palavra_oculta e palavra_adivinhada. Agora, clique no grupo Texto e arraste um bloco  " " para encaixar no bloco  inicializar global palavra_oculta para. Faça o mesmo para palavra_adivinhada


Seu painel do Visualizador deve estar como abaixo:





Botão Reiniciar

O jogo começa quando o primeiro jogador escolhe uma palavra oculta e clica no botão Reiniciar.  Então, comece por esse botão.

3 - No painel de Blocos, clique no grupo do componente btReiniciar e arraste um bloco quando btReiniciar.Clique para o painel do Visualizador. Este é o evento que inicia um novo jogo. Você tem que preencher o corpo desse bloco.

4 - Passe o mouse sobre o bloco inicializar global palavra_oculta... Vão aparecer dois blocos. Arraste o bloco ajustar global palavra_oculta para e encaixe este bloco no bloco quando btReiniciar... 

5 - O conteúdo a armazenar é o texto da caixa de texto txPalavraOculta. Mas você precisa transformar o conteúdo em letras maiúsculas antes de armazenar. Para isso, clique no grupo Texto, arraste o bloco maiúsculas e encaixe no bloco ajustar global palavra_oculta ...

6 - Clique no grupo do componente txPalavraOculta, role até encontrar o bloco txPalavraOculta.Texto e arraste este bloco para encaixar no bloco maiúsculas

Agora, você precisa preparar a variável palavra_adivinhada, preenchendo com um número de "*" igual ao tamanho da palavra oculta. Você pode usar uma repetição para isso. Comece com texto vazio, e acrescente um "*" para cada letra na palavra oculta:

7 -  Passe o mouse sobre o bloco inicializar global palavra_adivinhada... Vão aparecer dois blocos. Arraste o bloco ajustar global palavra_adivinhada para e encaixe este bloco abaixo do bloco  ajustar global palavra_oculta... Depois, arraste um bloco " " do grupo Texto e encaixe no bloco ajustar global palavra_adivinhada...

8 - Clique no grupo Controle, arraste o bloco para cada número desde... e encaixe abaixo do bloco ajustar global palavra_adivinhada... Neste novo bloco, troque a palavra número pela palavra posição (um nome melhor para a variável de controle da repetição). Descarte o bloco 5 encaixado em até, arrastando o mesmo até a lixeira no canto inferior direito da tela.

9 - Clique no grupo Texto, arraste o bloco comprimento e encaixe no parâmetro até do bloco para cada posição... Depois disso, passe o mouse sobre o bloco inicializar global palavra_oculta... até que apareçam dois novos blocos, arraste o bloco obter gobal palavra_oculta e encaixe no bloco comprimento.

Agora você pode ler o código que acabou de criar: para cada posição, desde 1 até o comprimento de palavra_oculta, com passo 1 (ou seja, de 1 em 1), fazer...

10 -  Passe o mouse sobre o bloco inicializar global palavra_adivinhada... Vão aparecer dois blocos, como no passo 7. Arraste o bloco ajustar global palavra_adivinhada para e encaixe este bloco dentro do bloco para cada posição...

11 - No grupo Texto, arraste um bloco juntar e encaixe no bloco anterior (ajustar global palavra_adivinhada...). Este bloco junta dois pedaços de texto.

12 - Passe o mouse novamente sobre  o bloco inicializar global palavra_adivinhada... e dessa vez arraste o bloco obter global palavra_adivinhada para o primeiro encaixe do bloco juntar.

13 - Clique no grupo Texto e arraste o bloco " " para o segundo encaixe do bloco juntar. Troque o " " por "*". Isso faz com que, a cada passo da sua repetição, seja adicionado um asterisco à palavra adivinhada.

14 - Falta voltar o número de erros a zero: Passe o mouse sobre o bloco inicializar global quantos_erros..., arraste um bloco ajustar global quantos_erros... e encaixe abaixo do bloco para cada posição... Arraste um bloco 0 do grupo Matemática para o encaixe do bloco ajustar global quantos_erros...


Sua tela deve estar como abaixo:





Documente seu código!

Sempre que criar um bloco de código um pouco mais complexo, habitue-se a criar um comentário para explicar o que ele faz.

15 - Posicione o mouse sobre o bloco para cada posição..., na parte marrom, e clique com o botão direito. No menu que surge, escolha a opção Adicionar Comentário. Surge um pequeno círculo azul com um ? no canto do bloco. Clique no círculo, e vai surgir uma caixa para você colocar seu comentário. Para esse caso, use um comentário como: "Preenche a palavra adivinhada com asteriscos."

Suas variáveis estão prontas para um novo jogo, mas o jogador 2 precisa saber o que está acontecendo dentro do seu programa. Você vai ter que preparar uma mensagem, e mostrar a ele.


Mostrando Mensagens na Tela

Você tem que mostrar uma mensagem sempre que o jogo reinicia, e também quando o segundo jogador clica no botão Ok. Para evitar criar código duplicado, use um procedimento (ou função):

16 - Clique no grupo Procedimentos, e arraste um bloco para procedimento fazer para uma área livre do painel do Visualizador. Existem dois blocos parecidos. O que você precisa é o que não retorna resultado. Troque o nome procedimento para MostrarResultado.

Você precisa preparar um texto com tudo que quer, e depois atualizar a legenda lgResultados. Faça um esboço da mensagem que você vai mostrar. Deve ser parecida com o texto abaixo:

Resultado:
Palavra: *****
Erros: 0
Limite de erros: 10
Escolha uma nova letra!

16 - Clique no grupo do componente lgResultados, arraste um bloco ajustar lgResultados.Texto para (verde escuro) e encaixe no corpo do bloco para MostrarResultado (roxo).

Note que na mensagem surgiu um novo número! O limite de erros. Se você decidir mudar este valor mais tarde, é melhor que ele esteja em uma variável global.

17 - Clique no grupo Variáveis e arraste um bloco inicializar global nome para para um espaço livre no painel do Visualizador. Troque nome por limite_de_erros. Clique no grupo Matemática, arraste um bloco 0 e encaixe no bloco inicializar global limite_de_erros. Troque o 0 por 10.

18 - Clique no grupo Texto, arraste o bloco juntar e encaixe no bloco ajustar lgResultados... O bloco juntar tem um círculo azul no canto, com imagem de engrenagem. Clique nesse círculo, e arraste blocos cadeia para dentro do bloco juntar na tela auxiliar, até que você tenha 8 blocos cadeia. Isto vai fazer com que o bloco juntar tenha 8 encaixes, para as partes da mensagem que você vai montar. As partes vão ser os fragmentos de texto e as variáveis que você tem na sua mensagem.

19 - Arraste para os encaixes do bloco juntar, nessa ordem, as seguintes partes: "Resultado:", "\nPalavra: ", obter global palavra_adivinhada, "\nErros: ", obter global quantos_erros, "\nLimite de erros: ", obter global limite_de_erros, "\nEscolha uma nova letra!". Para obter as partes entre aspas, clique no grupo Texto, arraste um bloco " " para o encaixe, e depois mude o texto. Note que depois da primeira parte entre aspas, as demais começam com a sequencia "\n". Esta sequência não aparece na mensagem, mas faz com que o texto passe para a próxima linha da legenda. Para obter as partes com nomes de variáveis, clique no grupo Variáveis, arraste o bloco obter para o encaixe e clique no triângulo para escolher o nome da variável desejada.

20 - Agora, você tem que chamar o procedimento, para que a mensagem seja mostrada. Clique no grupo Procedimentos, arraste um bloco chamar MostrarResultado e encaixe abaixo do bloco ajustar global quantos_erros... , dentro do bloco quando btReiniciar.Clique.


Veja abaixo o detalhe com a parte do programa que você acaba de construir:




Teste o Código

Você já tem bastante código, mas o jogo ainda não faz muita coisa. De qualquer jeito, pode ser interessante experimentar o funcionamento neste ponto, para verificar se a mensagem na tela do App está correta, e se os botões têm a forma e arrumação que você deseja. 

O procedimento para testar seu App está descrito no artigo anterior, mas vamos repetir abaixo uma última vez:

Ative o programa aiStarter no computador e espere que ele esteja pronto, e ative na tela do AppInventor a opção de menu Conectar/Emulador. Se ao invés do emulador você estiver utilizando um dispositivo Android para seus testes, ligue seu dispositivo e inicie o App AI2 Companion. Então, use a opção Conectar/Assistente AI no computador e a opção Scan QR Code no dispositivo.

Em alguns segundos, vai aparecer na tela do emulador a tela do seu app. Experimente preencher a caixa da palavra oculta e pressionar o botão Reiniciar. O que acontece? E se você usar o botão Ok?


Você vai ter que programar o código para o botão Ok.


Lendo Letras, Uma a Uma

21 - No painel de Blocos, clique no grupo do componente btOk e arraste um bloco quando btOk.Clique para um espaço livre do painel do Visualizador. É dentro desse bloco que você vai programar os próximos passos do algoritmo.

O programa precisa tratar cada letra escolhida pelo segundo jogador. Ele pode escolher letras minúsculas ou maiúsculas. Para evitar dúvidas, é melhor converter a letra escolhida para maiúsculas e armazenar em uma variável, mas esta não precisa ser permanente. Só precisa existir dentro do bloco quando btOk.Clique. Crie a variável:

22 - No painel de Blocos, clique no grupo Variáveis e arraste o bloco inicializar local nome para para dentro do bloco quando btOk.Clique. Existem dois blocos com o mesmo nome. Escolha aquele que encaixa, ou seja, o que tem encaixes arredondados na parte de cima e na parte de baixo. Neste novo bloco, troque nome por letra.

23 - No grupo Texto, arraste o bloco maiúsculas e encaixe no bloco inicializar local letra... 

24 - Clique no grupo do componente txLetra, arraste o bloco txLetra.Texto (verde claro) e encaixe no bloco maiúsculas.

Estes blocos devem estar como abaixo:



Relembre a parte do algoritmo que você está programando (parte relavante reproduzida abaixo):
5 - Para cada letra proposta:
  5.1 - Se a letra existe na palavra oculta,
    5.1.1 - Para cada posição em que a letra proposta existe na palavra oculta,
      5.1.1.1 - Substitua o "*" na palavra adivinhada que está nesta posição
                pela letra proposta.
    5.1.2 - Se a palavra adivinhada é igual à palavra oculta,
      5.1.2.1 - Fim do jogo! O segundo jogador ganhou.
  5.2 - Senão (a letra não existe),
    5.2.1 - Aumente o número de erros de 1 unidade.
    5.2.2 - Se o número de erros passou do limite (qual é o limite?),
      5.2.2.1 - Fim do jogo! O primeiro jogador ganhou.

Seguindo a lógica do algoritmo, você vai precisar de um bloco se/então:

25 - Clique no grupo Controle, arraste um bloco se... então e encaixe no bloco inicializar local letra... Você vai precisar da segunda parte, o senão. Clique no círculo azul com uma engrenagem do bloco se... então, e arraste um bloco senão para dentro do bloco se no painel que se abre.

26 - Clique no grupo Texto, arraste um bloco contém texto e encaixe no bloco se... então... senão. Clique no grupo Variáveis e arraste um bloco obter para o primeiro encaixe do bloco contém texto. Clique no triângulo e escolha global palavra_oculta. Repita o procedimento para encaixar outro bloco obter no encaixe parte. Dessa vez, clique no triângulo e escolha letra. Ou seja: "se a palavra oculta contém a letra escolhida..."


Decomposição de Problemas e Procedimentos

Os ítens 5.1.1 e 5.1.1.1 do algoritmo sugerem uma repetição que vai substituir letras na palavra adivinhada. Esse pedaço de código tem alguma complexidade, como você vai ver a seguir. É hora de usar a técnica de decomposição de problemas, e separar esse subproblema em um outro procedimento.

27 - Do grupo Procedimento, arraste um bloco para procedimento fazer para uma área livre do painel do Visualizador. Mude o nome, de procedimento para AtualizarPalavraAdivinhada. Lembre-se a escolha dos nomes é importante. Procure um nome que diz o que o procedimento executa. Se tiver dificuldade, é preciso pensar se você separou o pedaço de código certo.

O novo procedimento vai precisar receber um parâmetro: a letra escolhida.

28 - No canto do bloco para AtualizarPalavraAdivinhada fazer, existe um círculo azul com um símbolo de engrenagem. Clique nesse círculo, e arraste um bloco entrada: para o encaixe entradas da tela que se abre. Vai surgir um campo com nome x logo após o nome do procedimento (AtualizarPalavraAdivinhada). Mude o nome, de x para letra.

O tipo de dado da variável palavra_adivinhada é texto, e esse tipo de dado não permite que se façam alterações em uma posição qualquer. É preciso fazer uma pequena modificação no algoritmo: Você tem que criar uma nova palavra que vai ser a cópia de palavra_adivinhada, mas com a letra escolhida na posição dos asteriscos em que a letra  ocorre na palavra oculta.

29 - Do grupo Variáveis, arraste um bloco inicializar local nome... e encaixe no bloco para AtualizarPalavraAdivinhada... Mude nome para palavra_nova. Do grupo Texto, arraste um bloco " " e encaixe no bloco inicializar local palavra_nova.

30 - Agora, a repetição. Do grupo Controle, arraste um bloco para cada número desde... e encaixe no então do bloco se... então... senão. Mude número para posição. Estamos usando uma variável de controle com o mesmo nome que no bloco quando btReiniciar.Clique, mas como esta é uma variável local, não há problema. Joque fora o parâmetro 5, arrastando-o para a lixeira.
31 - Arraste os blocos comprimento (do grupo Texto) e obter (do grupo Variáveis) para o encaixe do até no bloco que você acabou de criar. No bloco obter, escolha a variável global palavra_oculta.

32 - Do grupo Controle, arraste um bloco se... então e encaixe no fazer do bloco para cada posição... Acrescente um senão ao bloco, como você fez no passo 25.

O programa tem que comparar a letra da variável palavra_oculta com a letra escolhida.

33 - Do grupo Texto, arraste um bloco comparar textos e encaixe no se do se... senão... então. Mude a comparação de < para =.

34 - Do grupo Texto, arraste um bloco segmento texto... início... comprimento para o primeiro encaixe da comparação. Do grupo Variáveis, arraste um bloco obter para o segundo encaixe da comparação, clique no triângulo e escolha letra.

35 - O bloco segmento texto... início... comprimento tem três encaixes. Do grupo Variáveis, arraste um bloco obter e encaixe em texto. Clique no triângulo e escolha global palavra_oculta. Repita esse procedimento, e encaixe o bloco obter em início, mas dessa vez, escolha posição. Por fim, clique no grupo Matemática, arraste um bloco 0 e encaixe em comprimento. Mude 0 para 1.

Seus blocos devem estar como abaixo:

36 - Do grupo Variáveis, arraste o bloco ajustar v para e encaixe no então do bloco se... senão... então. Clique no triângulo e escolha palavra_nova. Do grupo Texto, arraste o bloco juntar e encaixe no bloco ajustar palavra_nova para. Crie e arraste um bloco obter palavra_nova para o primeiro encaixe do bloco juntar, e um obter letra para o segundo encaixe. Você já sabe fazer isso!

Esta última sequencia está acrescentando a letra escolhida ao fim da palavra nova.

37 - Faça uma cópia do bloco ajustar palavra_nova para... e encaixe no senão logo abaixo. Lembra como (clique direito, Duplicar...)? Neste bloco copiado, descarte o bloco obter letra. Em seguida, copie o bloco segmento texto ... que está um pouco acima para o segundo encaixe do juntar. Troque o nome da variável nesse segundo bloco para global palavra_adivinhada.

Ao fim das repetições, palavra_nova tem o valor que precisa ser colocado em palavra_adivinhada. Falta um comando para isso:

38 - Arraste um bloco ajustar v para e encaixe abaixo do bloco para cada posição desde... Clique no triângulo, e escolha global palavra_adivinhada. Arraste um bloco obter para o encaixe deste último bloco, e escolha a variável palavra_nova da lista.


O procedimento está completo. Lembre-se de acrescentar um comentário:





Agora, você precisa "chamar" esse procedimento no bloco que trata o botão Ok.

39 - Do grupo Procedimentos, arraste o bloco chamar AtualizarPalavraAdivinhada para o encaixe então no tratamento de quando btOk.Clique. Preencha o encaixe letra com um bloco obter letra.


Contando Letras Erradas

Você já programou toda a lógica nessessária para o caso de o segundo jogador acertar a letra. Falta o caso de quando a letra está errada, que é bem mais simples.

40 - Encaixe no senão que ainda está vazio um bloco ajustar global quantos_erros para. Do grupo Matemática, arraste um bloco + e encaixe no bloco ajustar... No primeiro encaixe do +, encaixe um bloco obter quantos_erros, e no segundo, o número 1 (do grupo Matemática, lembra?). Essa sequência aumenta o número de erros do segundo jogador.


Antes de prosseguir, confira se seus blocos se parecem com essa imagem:


Fim do Jogo

Agora, você precisa testar se o jogo acabou. Pode ser útil criar mais uma variável local para indicar se o jogo acabou nessa rodada.

41 - No bloco iniciar local... (cor laranja), clique na engrenagem e acrescente mais uma variável à lista. Mude o nome da variável para jogo_acabou. Do grupo Lógica, arraste um bloco falso e encaixe na inicialização da variável jogo_acabou.

Conforme o algoritmo, se a letra existe na palavra, o jogo acaba com vitória do segundo jogador, caso a palavra adivinhada seja igual à oculta.

42 - Arraste um bloco se... então e encaixe abaixo do bloco chamar AtualizarPalavraAdivinhada. Do grupo Texto, arraste um bloco comparar textos e encaixe no se. Troque o < por =. Preencha os dois encaixes com blocos obter, um com palavra_adivinhada e o outro com palavra_oculta.

Monte a mensagem informando sobre a vitória.

43 - Do grupo do componente lgResultados, arraste o bloco ajustar lgResultados.Texto para  (verde escuro) e encaixe na cláusula então. No encaixe que fica, coloque um bloco juntar (do grupo Texto). Nos dois encaixes do bloco juntar, coloque "Parabéns! Adivinhou a palavra!", e "\nPara jogar de novo, escolha uma palavra e clique em Reiniciar".

44 - Abaixo do bloco anterior, coloque um bloco ajustar jogo_terminou para, e no encaixe desse, um bloco verdadeiro (do grupo Lógica).

No caso em que a letra estava errada, o jogo acaba com vitória do primeiro jogador, se o número de erros passar do limite. O programa tem que testar essa condição e mostrar a mensagem, se o jogo acabou.

45 - Encaixe um bloco se... então abaixo do bloco ajustar global quantos_erros... Do grupo Matemática, arraste um bloco = para o encaixe do se. Mude o = para >=. No primeiro encaixe deste bloco, coloque um bloco obter global quantos_erros e no segundo encaixe, um bloco obter global limite_de_erros.

46 - No então do bloco se... então, encaixe cópias dos blocos ajustar lgResultados.Texto... e ajustar jogo_terminou... criados nos passos 43 e 44. Troque a primeira mensagem para: "Limite de erros excedido." Acrescente mais dois encaixes ao juntar, no meio dos já existentes. No primeiro coloque "\n Palavra oculta:", e no segundo, obter global palavra_oculta.

Para o caso em que o jogo não terminou, você tem que atualizar as mensagens com o novo estado do jogo.

47 - Encaixe um bloco se... então abaixo do bloco se... então... senão mais externo. No encaixe se, coloque um bloco não, do grupo Lógica. No encaixe deste último, coloque um bloco obter jogo_terminou.

48 - Arraste um bloco chamar MostrarResultado do grupo Procedimentos para o encaixe do senão.


Veja o código recém-criado:




Testando a Versão Completa e Acrescentando Melhorias

Foi bastante código! Embora sempre haja oportunidade para melhorar o programa, o jogo agora deve estar funcionando. Carregue o jogo no emulador, ou no seu dispositivo Android, e experimente!

O que pode ser melhorado?

Sugestões:

  • Limpe a caixa de texto com a letra escolhida ao fim de cada rodada;
  • Só aceite uma letra de cada vez, quando o botão Ok é pressionado;
  • Limpe também a caixa de texto com a palavra oculta após tratar o botão Reiniciar;
  • Guarde e mostre as letras que o jogador 2 errou. Não deixe que ele escolha a mesma letra errada uma segunda vez;
  • Quando o jogo terminar, desative o botão Ok, e quando reiniciar, reative o botão;
  • Modifique o código para aceitar frases, com palavras separadas por espaços. Trate os espaços antes de deixar o jogador 2 jogar (um bom lugar é no código que trata do botão Reiniciar);
  • Acrescente comentários nas partes mais complexas do código;
  • Adicione um ícone para o App.



Revisão

Estes foram os conceitos cobertos neste tutorial:


  • Você usa o Designer para selecionar componentes e ajustar suas propriedades. Alguns componentes são visíveis, e outros não. 
  • Sempre que a lógica do programa for mais complexa, vale a pena criar um algoritmo.
  • Você usa o Editor de Blocos para montar blocos que definem o comportamento dos componentes.
  • Você aprendeu o funcionamento de muitos blocos diferentes;
  • Você venceu a complexidade do problema quebrando o desenvolvimento em etapas, e completando cada uma antes de passar à seguinte.

Para obter uma cópia do projeto pronto, visite o link: ai2.appinventor.mit.edu/?galleryId=4691593260564480


Distribuído sob a licença: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) : https://creativecommons.org/licenses/by-sa/3.0/deed.pt_BR


Passar ao próximo Tutorial - Trivia

Nenhum comentário:

Postar um comentário