Mole Mash V2 com camadas de Sprite (2023)

O que você está construindo

Este tutorial mostra como construir um jogo semelhante ao jogo de arcade Whac-A-Mole™. O objetivo é tocar em uma toupeira que sai aleatoriamente de um dos cinco buracos fixos. Cada vez que você consegue, sua pontuação aumenta em um ponto.

Para destacar os recursos do App InventorQualquer componentee ImageSpriteCamada Z, este aplicativo adota uma abordagem um pouco diferente daTutorial original do Mole Mash, que vocênão precisater concluído para concluir este. Você deve, no entanto, estar familiarizado com os fundamentos do App Inventor, usando o Designer para construir uma interface de usuário e usando o Editor de Blocos para codificar o comportamento de um aplicativo. Se você não estiver familiarizado com o básico, tente percorrer alguns dostutoriais básicosantes de continuar.

Introdução

Este tutorial inclui:

1. Adicionando componentes no Designer
2. UsandoQualquer componentefuncionalidade para obter e definir propriedades de componentes ImageSprite
3. Controlando o jogo com oRelógiocomponente
4. Usando SpriteCamada Zpara garantir que um ImageSprite apareça na frente de outro

Começando

Abrirai2.appinventor.mit.edue iniciar um novo projeto. Defina a telaTítulopropriedade para um nome apropriado, como "Mole Mash". Baixe os arquivos de imagem abaixo (criados por Yun Miao) para o seu computador clicando com o botão direito sobre eles e, em seguida, adicione-os ao seu projeto pressionando o botão "Carregar arquivo ..." no painel Mídia.

Configure os componentes

A interface do usuário conterá um total de 6 ImageSprites: 5 buracos imóveis e 1 toupeira. A toupeira se moverá em cima dos buracos. Use o Designer para criar a interface do usuário. Quando terminar, deve ser parecido com a imagem abaixo. Não se preocupe em alinhar os buracos uniformemente. Você especificará suas localizações através de seusXeSpropriedades. Instruções adicionais estão abaixo da imagem.

A seguir está a lista de componentes que você adicionará:

Faça as seguintes alterações nas propriedades dos componentes:

Não se preocupe agora em definir oFotopropriedade para os buracos; definiremos a propriedade no Blocks Editor.

Adicione comportamentos aos componentes

Aqui está uma visão geral do que precisamos para criar blocos:

1. Crie variável global:
   • buracos: uma lista de ImageSprites buracos
2. Quando o aplicativo é iniciado:
   • Preencha a lista de buracos.
   • Defina cada buracoFotopropriedade para "hole.png".
   • Mova a toupeira aleatoriamente para um buraco.
3. Crie um procedimentoMoveMolepara:
   • Definir variável localburaco atualpara um buraco aleatório da listaburacos.
   • Mova a toupeira para o local deburaco atual.
4. QuandoMoleClock.Timergatilhos:
   • ChamarMoveMolepara mover a toupeira aleatoriamente.
5. Implemente um manipulador que faça o seguinte quando a toupeira for tocada:
   • Adicione um à pontuação.
   • Faça o telefone vibrar brevemente.
   • ChamarMoveMole.

Para prosseguir, mude para o Editor de Blocos.

Criando Variáveis

Crie a variável e nomeie-aburacos. Por enquanto, daremos a ele um valor inicial "fictício" de uma lista vazia. Definiremos o valor inicial real noTela1.Inicializarmanipulador de eventos, que é executado sempre que o aplicativo carrega a tela. Aqui está uma imagem e uma lista dos blocos que você precisará:

Comentários (criados clicando com o botão direito em um bloco) são incentivados, mas não obrigatórios.

Iniciando o aplicativo

O primeiro evento a ocorrer em qualquer aplicativo éTela1.Inicializar, então colocaremos o código de inicialização nesse manipulador. Especificamente, adicionaremos os componentes do furo à listaburacos, defina cada buracoFotopropriedade para "hole.png" e chameMoveMole. Como ainda não escrevemos o MoveMole, criaremos um procedimento vazio com esse nome, que preencheremos posteriormente.

Abaixo está uma tabela dos blocos que você precisa criar. Observe que a gaveta "Any ImageSprite" é encontrada na guia "Qualquer componente" na parte inferior da lista de blocos no Editor de blocos.

Compare opara cadabloco para os blocos equivalentes que seriam necessários sem ele:

O conjunto esquerdo de blocos não é apenas mais curto, mas também menos repetitivo, poupando o programador de copiar e colar sem pensar e facilitando a modificação, por exemplo, se o nome da imagem for alterado.

Movendo a toupeira

Agora vamos preencher o corpo do procedimentoMoveMole, que chamaremos quando o programa iniciar, quando a toupeira for tocada e quando nosso cronômetro disparar a cada segundo. O procedimento deve escolher um buraco aleatório e mover a toupeira sobre ele. Aqui estão os blocos compilados e uma tabela dos blocos utilizados:

Agora precisamos especificar que MoveMole deve ser chamado sempre que o temporizador do MoleClock disparar. Precisamos apenas de dois blocos para fazer isso:

Registrando toques

Finalmente, precisamos de especificar o que acontece quando a toupeira é tocada. Especificamente, queremos:

1. Aumente a pontuação.
2. Faça o telefone vibrar brevemente.
3. Mova a toupeira.

Podemos facilmente traduzi-los em blocos:

Programa Final

Variações

Aqui estão algumas variações que você pode querer implementar:

• Adicionando um botão Redefinir para definir a pontuação de volta para 0.
• Fazer com que a pontuação dependa não apenas do número de acertos, mas também do número de erros e toupeiras escapadas.
• Aumentar a velocidade do jogo de movimento da toupeira se o jogador estiver indo bem e diminuindo se o jogador estiver indo mal.
• Adicionando uma segunda toupeira em um cronômetro diferente.

Você pode ver como implementar as duas primeiras variações noTutorial original do Mole Mash.

Análise

Aqui estão alguns dos conceitos abordados neste tutorial:

• Colocar componentes em umLista.
• Executar uma operação em cada componente de umListausando opara cadarecursos de bloco e qualquer componente.
• Colocando umImagemSpriteem cima de outro, usando seuZpropertyt para controlar o que vai na frente.
• Usando oRelógiocomponente para controlar o jogo.
• Criando um procedimento e chamando-o de vários lugares.

Feito comMole Mash 2? Voltar para os outros tutoriaisaqui.

Digitalize o aplicativo de amostra para o seu telefone

Digitalize o código de barras a seguir em seu telefone para instalar e executar o aplicativo de amostra.

Oubaixe o apk

Baixar código-fonte

Se quiser trabalhar com este exemplo no App Inventor, baixe oCódigo fontepara o seu computador, abra o App Inventor e clique emProjetos, escolherImportar projeto (.aia) do meu computador...e selecione o código-fonte que você acabou de baixar.