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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-323-1024x518.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-324-1024x522.png)
3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele, nesse caso, chamaremos de “Snake”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-325-1024x521.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-326-1024x495.png)
5. Adicionamos uma label no VerticalArrangement, mudamos o texto para “Snake Game” e mudamos a fonte para 30.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-327-1024x495.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-328-1024x497.png)
7. Para continuarmos a trabalhar, desmarcamos a opção “Visible” do VerticalArrangement.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-329-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-330-1024x499.png)
8. Adicionamos um novo VerticalArrangement e ajustamos altura e largura para “fill parent”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-331-1024x485.png)
9. Agora adicionamos na tela um “Canvas”, um espaço onde podemos desenhar e animar, e mudamos a altura e largura para “fill parent”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-332-1024x495.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-333-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-334-1024x500.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-335-1024x501.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-336-1024x502.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-337-1024x493.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-338-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-339-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-340-1024x500.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-341-1024x493.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-342-1024x502.png)
13. Criamos mais um VerticalArrangement igual ao primeiro, mas mudamos o nome do botão para “restart” e o texto para “Restart”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-343-1024x494.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-344-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-345-1024x501.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-346-1024x495.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-347-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-348-1024x496.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-349-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-350-1024x498.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-351-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-352-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-353-1024x494.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-354-1024x498.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-359-1024x489.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-360-1024x494.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-361-1024x497.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-362-1024x501.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-363-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-364-1024x498.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-365-1024x496.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-366-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-367-1024x500.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-368-1024x498.png)
20. Mudamos o texto da tela de Restart para “Game Over”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-369-1024x499.png)
21. Deixamos apenas o VerticalArrangement1 visível.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-370-1024x500.png)
22. Com o aplicativo pronto, clique em “Connect”, depois “AI Companion”, aparecerá um QR Code no seu monitor.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-371-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-372-1024x497.png)
23. Abra o aplicativo do seu celular e utilize a opção “scan QR code” do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-373.png)