Programovanie farebnej hry v Hype

• Smieť 20, 2024

V predchádzajúcom tutoriále sme importovali obrázky pre hru sfarbenia pre autora iBooks^R ktoré vyrábame v Hype Pro. Teraz do hry pridáme interaktívne prvky.

Otvorte svoj dokument Hype a začnime.

Naším prvým krokom je pridať identitu ku každej vrstve, ktorá musí po kliknutí zmiznúť. To zahŕňa vrstvy čiary pre kačicu, krídlo a zobák. Priradením každej z týchto vrstiev jedinečné ID prvku môžeme potom naprogramovať viditeľnosť týchto vrstiev pomocou JavaScriptu.

1. Otvorte Inšpektora identity.
   
   
2. Vyberte vrstvu duck_body_line v hlavnej časovej osi.
   
   
3. V Inšpektore identity pridajte jedinečné ID prvku. Použime ID telo.
   
   
4. Vyberte vrstvu duck_wing_line a pridajte ju krídlo ako jedinečné ID prvku.
   
   
5. Vyberte vrstvu duck_beak_line a pridajte ju zobák ako jedinečné ID prvku.
   
   

Teraz, keď majú vrstvy jedinečné ID prvkov, môžeme do týchto vrstiev pridať akciu. Na kontrolu viditeľnosti týchto vrstiev použijeme JavaScript a vlastnosť Display. Predvolená hodnota vlastnosti Display pre obrázok je v rade, čo znamená, že obrázok sa zobrazí v rámci zvyšku kódu HTML a nezačína sa na novom riadku.

Na skrytie obrázkov použijeme JavaScript na zmenu hodnoty vlastnosti zobrazenia z v rade na nikto pre každú vrstvu čiary. Toto odhalí vrstvy farebnej výplne nižšie.

object.style.display = "none"

1. Otvorte inšpektora akcií.
   
   
2. Vyberte vrstvu duck_body_line.
   
   
3. V časti Kliknutie myšou (klepnutie) kliknite na ikonu Plus.
   
   
4. V rozbaľovacej ponuke Akcia vyberte možnosť Spustiť JavaScript.
   
   
5. Pretože to bude vlastný JavaScript, nastavte rozbaľovaciu ponuku Funkcie na novú funkciu. Otvorí sa nové okno s predvoleným kódom JavaScript a funkciou s názvom untitledFunction.
   
   
6. Zmeňte názov funkcie z untitledFunction na BodyFunction, Uvidíte názov karty zmeniť na BodyFunction ().
   
   Ďalej pridáme kód na nastavenie vlastnosti display na nikto pre telo prvok. Pridajte nasledujúci kód na prázdny riadok 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Prejdite späť do okna karty Untitled Scene a vyberte vrstvu duck_wing_line.
   
   
8. Opakovaním predchádzajúceho kroku zmeníte názov funkcie na WingFunction a pridajte nasledujúci JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Vyberte vrstvu duck_beak_line, zmeňte názov funkcie na BeakFunction a pridajte nasledujúci JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   To je všetko. Skúsme to v prehliadači. Ak všetko pôjde dobre, exportujte projekt ako miniaplikáciu Autor knihy.
   
   
10. V ponuke kliknite na položku Súbor - Exportovať ako HTML5 - Widget pre autorských panelov / iBookov.
    
    

Video Návody: Zítra už zase škola :( // Minecraft stream cz / sk // hype 1500 subs (Smieť 2024).