O que são estruturas de repetição - Parte 3
Escapando do Vírus…
Agora que você aprendeu como usar várias instruções do makecode é hora de fazer algo divertido, inspirado nos clássicos arcades como: Galaga, Asteroids e Space Invaders. Preparamos um jogo totalmente funcional, que levará você a explorar e aprender mais a medida que vamos avançando. A este jogo demos o nome ESCAPE VÍRUS.
Iremos demonstrar duas maneiras de realizar a construção deste game. A primeira será descrita nos passos a seguir, a segunda, estará gravada em vídeo logo abaixo.
E o que muda entre as duas formas de implementação???
Apenas a maneira que controlamos o vírus para a direita e esquerda…
Se você quiser conhecer ou adquirir nosso livro digital contendo este jogo e suas versões melhoradas, além de vários outros, basta clicar na imagem abaixo.
ESCAPE VÍRUS v.0
O micro:bit possui dois botões, A e B, pensando em um jogo, o uso mais óbvio para isso é fazer com que um personagem (sprite) do jogo se mova para a esquerda e para a direita na tela. Devido ao tamanho pequeno da tela micro:bit, nossos sprites será do tamanho de um LED. Colocar um sprite na tela será apenas uma questão de acender um LED, fazemos isso usando o bloco:
Como no jogo Space Invaders, vamos posicionar nosso sprite de jogador na linha inferior da tela (4), e o ponto de partida no ponto à esquerda. A posição de um sprite é algo que varia ao longo do jogo; portanto, precisaremos de variáveis para controlar isso. Temos duas opções, utilizar uma ou duas variáveis, como o valor de Y sempre será 4, podemos usar apenas a variável para X e manter Y fixo. Optamos em construir duas variáveis, para deixar mais flexível o uso. Podemos nomear variáveis como desejar, usamos JogadorX e JogadorY.
Ao desenvolver um jogo, é importante testá-lo a cada passo. Se você fizer muita codificação sem fazer uma pausa para verificar se tudo funciona corretamente, pode ser muito mais difícil encontrar a fonte de quaisquer erros que ocorram.
Controle do jogador
Nosso próximo passo é permitir que nosso sprite se mova para a esquerda e para a direita. Para esta ação iremos utilizar o bloco no botão … pressionado. Escolhemos fazer uma modificação extra, e utilizar o bloco escolher aleatório 0 até 4 para definir o ponto inicial do jogador, ou seja, o jogador começará o jogo posicionado em alguma posição aleatória do eixo X do display.
Com isto, você pode observar que pressionar o Botão A afasta 1 da posição do jogador, o que significa que o sprite aparecerá um LED à esquerda na próxima vez que o programa passar pela instrução e o Botão B desloca o jogador para a direita.
Teste no simulador, tente mover o sprite, você irá observar que o jogador ao chegar na extremidade direita ou esquerda ele se apaga, na verdade ele está se movendo para além da borda da tela e avançando ou recuando um pixel mais. Isto irá gerar um erro, porque não há LED como ‘4, -1’ ou ‘4, 5.’ O micro:bit não é inteligente o suficiente para pensar por nós. Se dissermos para acender um LED que não existe, ele tentará fazê-lo e, então, reportará a falha. Iremos corrigir isso logo abaixo.
Agora que já temos a possibilidade de mover o jogador, o próximo passo é permitir o controle de interrupção do jogo, a maneira mais eficiente de lidar com isso é enviar toda a execução do programa para dentro de um laço que permita controle lógico, usaremo o bloco enquanto …
Iremos substituir o bloco de condição VERDADEIRO que está ligado conectado ao bloco enquanto por um bloco lógico Não…
Definiremos também uma variável chamada gameover e iremos definir o valor como falso.
Conecte a variável gameover ao bloco não.
A expressão lógica criada será: faça enquanto não falso, ou seja, é a mesma coisa que faça enquanto verdadeiro, porém, no momento que gameover se tornar verdadeiro, o laço é interrompido.
É o momento de corrigir a saída do jogador da área do display, precisamos modificar o código para impedir que o jogador seja capaz de fazer algo que possa causar uma falha. Chamamos isso de adição de validação a um programa. Para isso iremos utilizar o bloco se … então para controlar o momento que a variável x se torna menor que 0 e maior que 4.
Você deve ter notado que foi adicionado uma instrução pausa no final. O micro:bit é rápido eE se não desacelerássemos um pouco, nosso jogo seria impossível de jogar. O menor toque no botão A ou B enviaria o sprite diretamente para a borda da tela.
Vá em frente e teste o programa para verificar essas alterações. Agora temos tudo funcionando bem. Há uma hora, isso poderia parecer um engano, mas agora você já entende bem e podemos avançar mais um pouco, criando nosso adversário, o sprite do vírus.
Movendo o vírus.
Agora, temos um sprite do jogador programado com sucesso. Então, vamos colocar um inimigo no jogo. Há muitas direções que poderíamos tomar com isso, mas vamos começar simples. Imagine, se quiser, um ponto (sprinte) aparecendo na parte superior da tela. Ele poderia para aparecer em qualquer um dos cinco LEDs que ocupam a primeira linha; não há como dizer qual. Imediatamente, ele começa a cair em direção ao jogador. O jogador deve usar os Botões A e B para evitar o contato com o inimigo. Se o inimigo chegar até a linha de baixo (4) sem encostar no jogador, outro aparece no topo e começa a cair. Você pode pensar nisso como uma enxurrada de mísseis inimigos ou uma chuva de meteoros.
Lembre-se do que dissemos sobre variáveis. Eles são usados para acompanhar tudo o que muda no jogo. A posição do inimigo é algo que mudará de momento para momento. Sua posição horizontal mudará dependendo da coluna em que aparecer, e sua posição verticalmente mudará conforme desce em direção ao jogador. Portanto, precisamos de duas variáveis para acompanhar isso, que chamaremos de virusX e virusY.
Precisamos definir posições iniciais para essas variáveis. A posição inicial vertical é fácil; o inimigo começará sua vida no topo da tela, que é a linha 0.
Precisamos também adicionar um bloco plotar x virusX y virusY para que o sprite seja apresentado no display.
Vá em frente e teste o programa para verificar essas alterações. Agora precisamos dar movimento ao vírus…
Adicione um bloco definir virusY para virusY + 1 antes do bloco pausa. Teste e veja o movimento, porém ainda não está completo como desejamos…
Caso o sprite chegue a linha de baixo, ele precisará tomar uma ação… usaremos o bloco se virusY = 5 então… fará uma ação
e esta ação é definir virusY para 0, para que ele seja posicionado no topo e comece novamente a cair… porém queremos que a cada ciclo destes ele vá para uma coluna diferente (X), e que seja aleatório, para não ser previsível onde estará o inimigo…
para conseguir este efeito de aleatoriedade adicionamos um bloco definir virusX para … e dentro dele adicionamos o bloco da categoria matemática encolher aleatório 0 até 4. Teste no simulador, observe que a cada ciclo o inimigo é posicionado no topo porém sempre em colunas aleatórias.
aproveite para adicionar mais um bloco escolher aleatório 0 até 4 no bloco de definição de variáveis que está dentro de no iniciar, como isto, cada vez que ligar o micro:bit, o inimigo iniciará em uma coluna aleatória…
Colisões
A colisão entre jogadores e inimigos é relativamente fácil, basicamente, “se o jogador e o inimigo ocupam o mesmo espaço, saia do jogo” 🙂
Primeiro, adicione um novo bloco se … então, antes de definir a posição de virusY, em seguida, substitua o bloco verdadeiro, por um bloco de comparação … E …
complete a expressão para atender ao seguinte critério:
SE virusY = 4 E virusX = jogadorX ENTÃO…
… se o critério for verdadeiro, então:
limpar tela
mostrar string GAME OVER…
limpamos a tela e mostramos a mensagem de game over, agora precisamos definir gameover para verdadeiro…
Com esta ação, o laço enquanto, será interrompido.
Sempre teste no simulador a cada mudança realizada.
Pronto!!!… agora é testar no simulador, e em seguida enviar para o micro:bit e sair jogando 🙂 e quando for GAME OVER, basta pressionar o botão de reset do micro:bit e começar um novo jogo 😉
ESCAPE VÍRUS v.1
Até agora, você tem experimentado o fato de que os programas não são escritos de cima para baixo, da mesma maneira que você escreveria uma história curta. À medida que aumentamos a complexidade do nosso jogo, tivemos que inserir novos blocos de código em vários lugares. Mas também tivemos que ter cuidado de onde colocar cada peça deste quebra-cabeça. Ao criar seus próprios programas, sejam jogos ou não, você se beneficiará muito e perceberá que o aprendizado adquirido em um programa pode ser a base para um novo.
Gravamos um vídeo detalhando uma segunda maneira de codificar o movimento do jogador pelos botões A e B, e de utilização de valores numéricos com o papel de condições booleanas.
É importante conhecer as possibilidades e recursos que temos disponíveis com o makecode, isso nos permite desenvolver diferentes estratégias para codificar nossos projetos. Teste, edite e remixe…
Para ir além... projetando loops criativos
O desafio
Você percebeu que existem muitas maneiras de utilizar os diferentes tipos de blocos de laço/repetição, para este desafio, pense na criação de algo útil, divertido ou interessante. Pode ser:
- um emoji animado;
- uma animação visual que utilize repitições;
- um game que incorpore elementos gráficos animados;
- diferentes animações que são executadas quando botões diferentes são pressionados…
Inspire-se
Batalha dos dados
Que tal usar apenas um micro:bit para realizar uma batalha de dados entre dois jogadores? Cada dado é lançado ao pressionar o Botão A (Jogador 1) e Botão B (Jogador 2).
Um número aleatório entre 0 e 5 é definido aleatoriamente (dadoA e dadoB), em seguida adicionamo 1 a este valor, para facilitar o controle da quantidade de repetições que irão ligar os LED´s na matriz. Esta ação é necessário pois os dados vão de 1 a 6.
O Dado A, inicia na linha (DadoAy) 0 e o Dado B inicia na linha (DadoBy) 3, desta maneira dividimos o display de LED´s para conseguir apresentar os dados de dois jogadores.
Seja curioso e divirta-se!!!
Fireflies Funk
Para inspirar e para você remixar e servir como ponto de partida para seus projetos, criamos o Fireflies Funk aqui no HacKids Labs. Escolhemos este nome, por conta da característica de variação visual produzida, é um projeto simples, uma animação visual utilizando apenas uma repetição, porém usamos o bloco plotar x … y… brilho … para permitir que uma série de números aleatórios controlasse qual LED seria aceso e qual brilho ele teria (entre 0 a 255). Também usamos blocos outros blocos extras da categoria Música, estudaremos estes blocos nas próximas lições, perceba como é simples incorporar novos recursos a nossos projetos.
Para a sonorização, conectamos o micro:bit a uma velha caixa de som que temos aqui, por meio de garras de jacaré nos pinos P0 e GND.
Waves
Este segundo projeto, Waves, é o mais complexo dos que já fizemos até agora, esta complexidade foi necessária para conseguir obter o efeito visual desejado. Compartilhamos o código abaixo para você abrir, estudar e perceber o quanto é poderoso o makecode e como são infinitas as possibilidades de uso, aproveite para fazer modificações, usar o simulador, usar o recursos de câmera lenta para acompanhar passo-a-passo a execução do programa.
De forma simplificada, cada variável é controlada por um bloco Sempre, que aumenta e diminui o seu valor, de 10 em 10. Como cada variável V1 … V9 inicia com valor diferente, com isto elas oscilam entre 0 e 100 em tempos diferentes. Por fim usamos um bloco sempre para ligar cada um dos LED´s com brilhos diferentes, brilhos controlados pelo bloco map e pelas variáveis V1 … V9. Em aulas futuras iremos estudar o bloco map.