Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira.

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

1. Para começar a atividade devemos acessar o site https://appinventor.mit.edu/ e clicar na opção “Create Apps!”, então será solicitado que realize o login, para isso deverá usar sua conta google e aceitar os termos da plataforma.

2. Após efetuar o login será levado para esta tela, caso ache necessário poderá alterar o idioma do site para português do Brasil.

3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele, nesse caso, chamaremos de “Snake”.

4. Começando adicionando um VerticalArrangement, mudamos os alinhamentos para center em ambos os casos e alteramos a largura e a altura para “fill parent”. Podemos mudar a cor de fundo caso queiramos, nesse caso será alterada para laranja.

5. Adicionamos uma label no VerticalArrangement, mudamos o texto para “Snake Game” e mudamos a fonte para 30.

6. Adicionaremos um botão para começar, que chamaremos de “start”, e mudamos seu texto para “start” e sua fonte para 18, colocando ela em negrito. Podemos mudar a cor também, nesse caso será alterada para verde.

7. Para continuarmos a trabalhar, desmarcamos a opção “Visible” do VerticalArrangement.

8. Adicionamos um novo VerticalArrangement e ajustamos altura e largura para “fill parent”.

9. Agora adicionamos na tela um “Canvas”, um espaço onde podemos desenhar e animar, e mudamos a altura e largura para “fill parent”.

10. Adicionamos um TableArrangement com 3 linhas e 3 colunas. Depois nós adicionamos 4 botões, que serão os botões para controlar a cobra, que renomearemos para “cima”, “baixo”, “direita”, “esquerda” e alteraremos seu texto também com esses termos. Também colocaremos o tamanho da fonte em 15.

11. Mudamos a cor de fundo do Canvas para preto, adicionamos um “ImageSprite”, que renomearemos “cobraSprite”, e uma “Ball”. Mudamos a cor da Ball para laranja e seu raio para 10. Mudamos a altura e a largura do ImageSprite para 100 pixels e adicionamos a imagem da cobra para o jogo. Mudamos a sua velocidade para 5.

12. Adicionamos um HorizontalArrangement, mudamos sua largura para “fill parent”, e também duas labels, que mostrarão a pontuação da pessoa. Mudamos o texto de uma para “Pontuação” e o da outra para “0”. Em ambas também mudamos o tamanho da fonte para 20 e deixamos em negrito. Deixamos tudo alinhado no centro. Mudamos a cor do Arrangement para laranja, para destacar melhor.

13. Criamos mais um VerticalArrangement igual ao primeiro, mas mudamos o nome do botão para “restart” e o texto para “Restart”.

14. No começo do jogo, apenas o VerticalArrangement1 estará visível, então na aba “Blocks” nós criamos um bloco para que quando o botão Start for clicado, o VerticalArrangement1 fique invisível, ou seja, “Visible = False”, e o VerticalArrangement2 fique visível, ou seja, “Visible = True”.

15. Quando começarmos, a cobra começará a se mover, com velocidade 5, que armazenaremos numa variável chamada “cobraVelocidade”. Para controlarmos a cobra com nossos botões, criaremos um conjunto de blocos para cada botão, e quando esse botão for clicado ele girará a cobra nessa direção, com os valores representando quantos graus ela girará. Para cima será 90, para esquerda será 180, para baixo 270 e para direita 0.

16. Quando a cobra coletar a bola, uma nova bola deverá aparecer numa posição aleatória, então para isso nós criaremos um bloco que sempre se a bola colidir com algo, ele vai para uma nova posição aleatória.

17. Cada vez que a cobra pegar a bola, sua velocidade aumentará. Criamos um bloco que incrementará sua velocidade em 1 a cada vez que ela pegar a bola.

18. Quando a cobra pegar a bola, sua pontuação deve aumentar em 1. Adicionamos uma nova variável chamada “pontos”começando em 0 que aumentará quando a cobrar pegar a bola. Também devemos alterar o texto da nossa label “pontos” para que represente o valor da pontuação atual.

19. Quando a cobra bater na margem, o jogador perdeu, e deve aparecer a tela para ele poder reiniciar o jogo. Quando ele clicar para reiniciar a partida, a cobra deve aparecer nas coordenadas iniciais, que no nosso caso será X = 80 e Y = 275. A pontuação voltará a ser zero.

20. Mudamos o texto da tela de Restart para “Game Over”.

21. Deixamos apenas o VerticalArrangement1 visível.

22. Com o aplicativo pronto, clique em “Connect”, depois “AI Companion”, aparecerá um QR Code no seu monitor.

23. Abra o aplicativo do seu celular e utilize a opção “scan QR code” do aplicativo.