Programando o jogo de cores no Hype

• Pode 16, 2024

No tutorial anterior, importamos as imagens para um jogo de colorir para o iBooks^R que estamos criando no Hype Pro. Agora vamos adicionar os elementos interativos ao jogo.

Abra seu documento do Hype e vamos começar.

Nosso primeiro passo é adicionar uma identidade a cada uma das camadas que precisam desaparecer quando clicadas. Isso inclui as camadas de arte de linha para o corpo, asa e bico do pato. Ao atribuir a cada uma dessas camadas um ID de elemento exclusivo, podemos programar a visibilidade dessas camadas com JavaScript.

1. Abra o Inspetor de identidade.
   
   
2. Selecione a camada duck_body_line na Linha do tempo principal.
   
   
3. No Inspetor de identidade, adicione um ID de elemento exclusivo. Vamos usar o ID de Corpo.
   
   
4. Selecione a camada duck_wing_line e adicione Asa como o ID do elemento exclusivo.
   
   
5. Selecione a camada duck_beak_line e adicione Bico como o ID do elemento exclusivo.
   
   

Agora que as camadas têm IDs de elemento exclusivo, podemos adicionar a ação a essas camadas. Usaremos JavaScript e a propriedade Display para controlar a visibilidade dessas camadas. O valor padrão da propriedade Display para uma imagem é na linha, o que significa que a imagem é exibida no restante do HTML e não inicia em uma nova linha.

Para ocultar as imagens, usaremos JavaScript para alterar o valor da propriedade de exibição de na linha para Nenhum para cada uma das camadas de arte de linha. Isso revelará as camadas de preenchimento de cor abaixo.

object.style.display = "nenhum"

1. Abra o Inspetor de ações.
   
   
2. Selecione a camada duck_body_line.
   
   
3. Na seção Ao clicar no mouse (toque), clique no ícone Mais.
   
   
4. No menu suspenso Ação, escolha Executar JavaScript.
   
   
5. Como este será um JavaScript personalizado, defina o menu suspenso Função como Nova Função. Isso abrirá uma nova janela da guia com o código JavaScript padrão e uma função denominada untitledFunction.
   
   
6. Mude o nome da função de untitledFunction para BodyFunction. Você verá o nome da guia mudar para BodyFunction ().
   
   Em seguida, adicionaremos o código para definir a propriedade display como Nenhum para o Corpo elemento. Adicione o seguinte código na linha vazia 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Volte para a janela da guia Cena sem título e selecione a camada duck_wing_line.
   
   
8. Repita a etapa anterior para alterar o nome da função para WingFunction e adicione o seguinte JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Selecione a camada duck_beak_line, altere o nome da função para BeakFunction e adicione o seguinte JavaScript.
   
   hypeDocument.getElementById ("Bico"). style.display = "nenhum";
   
   É isso aí. Vamos testar no navegador. Se tudo der certo, exporte o projeto como um widget Autor do iBooks.
   
   
10. No menu, clique em Arquivo - Exportar como HTML5 - Painel / Autor do widget do iBooks.
    
    

Instruções De Vídeo: Tutorial completo de como programar o Fogo do DOOM (JavaScript puro) (Pode 2024).