Introdução

Dando continuidade ao conteúdo da nossa oficina, hoje estaremos vendo o que são as famosas estruturas condicionais, também chamadas de desvios condicionais, e um pouco sobre os laços de repetição.

Ao final desta aula teremos uma atividade para praticarmos um pouco dos conceitos vistos até agora.

Estrutura Condicional

Vídeo aula, parte 1 – Estrutura Condicional

Antes de falar sobre a estrutura condicional, vamos pensar em algo mais simples para depois escalar para o desvio condicional.

Vamos imaginar um programa simples, onde o usuário digita um número e o programa deve mostrar o dobro desse número.

O programa seguiria a seguinte forma:

1. Início do programa;
2. Usuário digita um número;
3. Programa calcula o dobro do número;
4. Programa mostra o resultado para o usuário;
5. Fim do programa.

Simples correto? Mas imagina que você queira pegar este número e mostrar se ele é par. Neste caso a gente tem que fazer uma verificação, então ficaria assim:

1. Início do programa;
2. Usuário digita um número;
3. Programa calcula o resto deste número por 2;
4. Programa pergunta: “SE o resto for igual a 0”;

Se sim:

1. Mostra que o número é par;

Caso contrário:

1. Segue para o passo 5;
2. Fim do programa.

Agora passando para o AppInventor vamos ver como ficaria.

Agora na nossa programação, para iniciar colocaremos o evento de click. Então “quando btn_mostrar for clicado faça:”.

Devemos então colocar uma estrutura de controle chamado “if”. Este é o que chamamos de desvio condicional.

Então no nosso programa fica com a seguinte cara:

1. Quando btn_mostrar for clicado, faça;
2. O resto de txt_numero dividido por 2 é igual a 0?

Se sim:

1. Defina o texto de lbl_resultado para “Número par”.

Ok, então até aqui a gente tá vendo o que acontece caso uma premissa seja verdadeira. Mas e se eu quiser que meu programa também mostre se um número é ímpar? Nesse a lógica do nosso programa segue a seguinte estrutura:

1. Início do programa;
2. Usuário digita um número;
3. Programa calcula o resto da divisão do número dividido por 2;
4. SE o resto for igual a 0:

Faça:

1. Mostra “Número par” para o usuário;

Caso contrário, faça:

1. Mostra “Número ímpar” para o usuário;
2. Fim do programa.

Agora no appInventor, vamos nos manter com a mesma tela e a mesma programação que estávamos usando. Adicionaremos um “else” nesta estrutura condicional. Para isso, basta clicar na engrenagem do nosso “if” e adicioná-lo em nossa estrutura.

Basta então apenas definir para caso a premissa do “if” seja falsa, o texto de lbl_resultado para “Número ímpar”. Ficamos da seguinte forma:

Então agora já vimos como fica essa estrutura “se algo for verdade faça x ação, caso contrário faça y ação”. Mas podemos ir além novamente.

Vamos imaginar que quero fazer um programa onde o usuário vai digitar 3 números, e quero descobrir qual o menor entre eles. Nossa lógica vai seguir algo como:

1. Início do programa;
2. Usuário digita 3 números;
3. SE número 1 for menor que número 2:

Faça:

1. SE número 1 for menor que número 3:

Faça:

1. Mostra “‘número 1’ é o menor”;

Caso contrário, faça:

1. Mostra “‘número 3’ é o menor”;

Caso contrário, faça:

1. SE número 2 for menor que número 3:

Faça:

1. Mostra “‘número 2’ é o menor”;

Caso contrário, faça:

1. Mostra “‘número 3’ é o menor”;
2. Fim do programa.

Sendo assim, a gente consegue ver que também podemos ter “if’” dentro de “if” e assim criar estruturas mais complexas.

Para criar essas estruturas no appInventor basta adicionar “else–if” em sua estrutura “if” ou outras estruturas “if” dentro dela.

Então basicamente é isto, essas são as estruturas condicionais. São estruturas onde dependendo se uma premissa é verdadeira ou falsa o programa pode seguir um caminho diferente/tomar um desvio.

Laço de repetição

Para falarmos de laço de repetição vamos também começar pensando em algo mais simples.

Vamos imaginar que temos que fazer um programa onde o usuário informa um número e você deve mostrar a tabuada daquele número. Você deve imaginar que ficaria algo como:

1. Início do programa;
2. Usuário digita um número;
3. Mostra na tela “‘número’ X 1 = ‘número’”;
4. Calcula número vezes 2;
5. Mostra na tela “‘número’ X 2 = ‘resultado”;
6. Calcula número vezes 3;
7. Mostra na tela “‘número’ X 3 = ‘resultado”;
8. Calcula número vezes 4;
9. Mostra na tela “‘número’ X 4 = ‘resultado”;
10. Calcula número vezes 5;
11. Mostra na tela “‘número’ X 5 = ‘resultado”;
12. Calcula número vezes 6;
13. Mostra na tela “‘número’ X 6 = ‘resultado”;
14. Calcula número vezes 7;
15. Mostra na tela “‘número’ X 7 = ‘resultado”;
16. Calcula número vezes 8;
17. Mostra na tela “‘número’ X 8 = ‘resultado”
18. Calcula número vezes 9;
19. Mostra na tela “‘número’ X 9 = ‘resultado”
20. Calcula número vezes 10;
21. Mostra na tela “‘número’ X 10 = ‘resultado”;
22. Fim do programa.

Fazer desta maneira não está errado, porém não é a melhor forma. Imagina que ao invés de ser uma tabuada do 1 a 10 você quer que seja do 1 a 1000. Seria totalmente inviável basicamente ter que ficar copiando e colando o mesmo trecho de código, além de aumentar as chances de erro também.

Sendo assim, seria ideal se tivéssemos uma forma deste trecho de programa se repetir até completar um número x de iterações certo? E temos, é o que chamados de laço de repetição.

Então basicamente esse enorme código que vimos ficaria assim utilizando laço de repetição:

1. Início do programa;
2. Usuário digita um número;
3. Inicializa uma variável chamada contador com o valor 1;
4. ENQUANTO ocontador for menor ou igual a 10 faça:
   1. Calcula número vezes o contador;
   2. Mostra na tela “‘número’ X ‘contador’ = ‘resultado’”;
   3. Aumenta 1 em contador (então se contador for igual a 1, agora vira 2);
5. Fim do programa;

Bem melhor correto? Desta forma, caso queira trocar a tabuada de 1 a 10 para de 1 a 1000, basta trocar o número 10 por 1000 na estrutura do laço condicional.

Então vejamos como isso fica no appInventor, primeiro em nossa tela temos o seguinte:

Agora em nossa programação vamos adicionar o evento de click no botão. Então “quando btn_mostrar for clicado faça:”.

Devemos primeiro modificar o texto da nossa “lbl_tabuada” para algo vazio (para garantir que apenas uma tabuada apareça por clique de botão) e logo após adicionar nosso laço repetição, este se encontra nos blocos controle, e então trocar o segundo valor de 5 para 10.

A leitura desta estrutura seria algo como “para cada número de 1 a 10 aumentado de 1 em 1, faça:”

Agora basta definir o texto de lbl_tabuada para o que já estava nela (para não perder os valores anteriores) e a estrutura da frase “‘número’ X ‘contador’ = ‘resultado’”. Para isso vamos estar usando um “join”, que basicamente vai juntar blocos para formar algo único, no nosso caso, junta os blocos para formar nossa frase da tabuada. Ficando da seguinte forma:

Então basicamente é isto, está é a estrutura de repetição. Ela vai repetir um conjunto de instruções enquanto uma certa premissa seja verdadeira.

É claro que esta estrutura não se limita apenas a números, as premissas podem ser diversas, ter mais de uma premissa, passar por todos os itens de uma lista, dentre outros. Então convido vocês para explorarem um pouco dessas estruturas que nos dão uma vasta possibilidade de caminhos para tomar em nossos programas juntamente com as estruturas condicionais.

Atividade

Pegue o pomo 2.0

Seguindo o exemplo disponibilizado, complete o jogo para quando o jogador capturar os pomos eles ficarem invisíveis.

Os pomos devem se mover para uma posição aleatória a cada unidade x de tempo e ao capturar todos os pomos o jogo deve encerrar.

Solução

Dentro do bloco de colisão (when player.CollidedWith) inclua um bloco de controle if-then, após isso, clique na engrenagem e adicione dois blocos else-if. Fazendo isso formamos a primeira estrutura necessária para a resolução.

Agora, vá em “Math”, selecione o bloco de comparação de igualdade e coloque um em cada encaixe para “if”.

Passe o mouse sobre a palavra “other”, selecione “get Other” e coloque um em cada um dos if’s. Então selecione os pomos para coloca-los no segundo espaço para a comparação.

Agora basta modificar a visibilidade de cada pomo para falso quando ocorrer uma colisão.

Vá no pomo e selecione o bloco “set pomo .Visible to” e então encaixe o bloco “false” que é possível encontrar na no conjunto lógico (Logic).

Vamos então configurar o controle para finalizar a partida. No mesmo bloco de colisão, adicione outro bloco de if-then. Nele você vai comprar se os três pomos estão com a visibilidade no falso. Para isso, usaremos dois blocos lógicos de “and” e três de “Math” para comparar se a visibilidade é falsa ou verdadeira.

Agora basta adicionar um bloco de notificação utilizando textos e configurar o “clock” para estar desativado.

No final teremos o seguinte bloco para colisão:

Agora iremos configurar a movimentação dos pomos, para isso utilizaremos o bloco “When clock1 .Timer”.

Como queremos que apenas os pomos que ainda estão em jogo se movimentem, utilizaremos três blocos de if-then para isso.

Então basta adicioná-los, e colocar uma comparação de igualdade para saber se suas visibilidades são “true”.

Dentro de “then” colocaremos blocos para modificar o x e o y de cada pomo utilizando as funções criadas para gerar esse número aleatório.

No final teremos o seguinte código:

Arquivos da aula: https://drive.google.com/drive/folders/1E3q6sFr986tP5Km-Btop7lA649IPU5B5?usp=sharing