Programmering af farvespil i Hype

• Kan 3, 2024

I den foregående tutorial importerede vi billederne til et farvelægningsspil til iBooks Author^R som vi laver i Hype Pro. Nu tilføjer vi de interaktive elementer til spillet.

Åbn dit Hype-dokument, og lad os komme i gang.

Vores første skridt er at tilføje en identitet til hvert af de lag, der skal forsvinde, når der klikkes. Dette inkluderer linjekunstlagene til andekroppen, vingen og næb. Ved at tildele hvert af disse lag et unikt element-ID, kan vi derefter programmere disse lags synlighed med JavaScript.

1. Åbn identitetsinspektøren.
   
   
2. Vælg duck_body_line-lag i hovedtidslinjen.
   
   
3. Tilføj et unikt element-ID i identitetsinspektøren. Lad os bruge ID'et til Legeme.
   
   
4. Vælg duck_wing_line-laget, og tilføj Vinge som det unikke element-ID.
   
   
5. Vælg duck_beak_line-laget, og tilføj Næb som det unikke element-ID.
   
   

Nu hvor lagene har unikke element-ID'er, kan vi tilføje handlingen til disse lag. Vi vil bruge JavaScript og egenskaben Display til at kontrollere synligheden af ​​disse lag. Standard visningsegenskabsværdien for et billede er inline, hvilket betyder, at billedet vises i resten af ​​HTML-koden og ikke starter på en ny linje.

For at skjule billederne bruger vi JavaScript til at ændre værdien for visningsegenskaber fra inline til ingen for hvert af linjekunstlagene. Dette afslører farvepåfyldningslagene nedenfor.

object.style.display = "none"

1. Åbn handlingens inspektør.
   
   
2. Vælg duck_body_line-laget.
   
   
3. Klik på Plus-ikonet i afsnittet Til museklik (tap).
   
   
4. Vælg Kør JavaScript i rullemenuen Handling.
   
   
5. Da dette vil være en brugerdefineret JavaScript, skal du indstille rullemenuen Funktion til Ny funktion. Dette åbner et nyt fanevindue med standard JavaScript-koden og en funktion kaldet untitledFunction.
   
   
6. Skift funktionsnavn fra untitledFunction til BodyFunction. Du vil se navnet på fanen ændres til BodyFunction ().
   
   Dernæst tilføjer vi koden, der skal indstilles til visningsejendom ingen til Legeme element. Tilføj følgende kode på den tomme linje 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Gå tilbage til fanebladvinduet Untitled Scene, og vælg duck_wing_line-laget.
   
   
8. Gentag det forrige trin for at ændre funktionsnavnet til WingFunction og tilføj følgende JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Vælg laget duck_beak_line, skift funktionsnavnet til BeakFunction og tilføj følgende JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Det er det. Lad os teste i browseren. Hvis alt går godt, kan du eksportere projektet som en iBooks Author-widget.
   
   
10. Fra menuen skal du klikke på File - Export as HTML5 - Dashboard / iBooks Author Widget.
    
    

Video Instruktioner: LED-lys i meter fra Solar Light (Kan 2024).