Spalvų žaidimo programavimas programoje „Hype“

• Gegužė 18, 2024

Ankstesniame vadove mes importavome „iBooks Author“ spalvinimo žaidimo vaizdus^R kuriuos gaminame naudodami „Hype Pro“. Dabar žaidimą pridėsime interaktyvius elementus.

Atidarykite „Hype“ dokumentą ir pradėkime.

Pirmasis mūsų žingsnis yra pridėti kiekvieno sluoksnio tapatybę, kuri, spustelėjus, turi išnykti. Tai apima linijinius anties kūno, sparno ir snapo sluoksnius. Kiekvienam iš šių sluoksnių priskirdami unikalų elemento ID, mes galime užprogramuoti šių sluoksnių matomumą naudodami „JavaScript“.

1. Atidarykite tapatybės inspektorių.
   
   
2. Pagrindiniame laiko juostoje pasirinkite sluoksnį „duck_body_line“.
   
   
3. Tapatybės inspektoriuje pridėkite unikalų elemento ID. Panaudosime kūnas.
   
   
4. Pasirinkite sluoksnį duck_wing_line ir pridėkite Sparnas kaip unikaliojo elemento ID.
   
   
5. Pasirinkite sluoksnį duck_beak_line ir pridėkite Bukas kaip unikaliojo elemento ID.
   
   

Dabar, kai sluoksniai turi unikalius elementų ID, galime pridėti veiksmą prie šių sluoksnių. Šių sluoksnių matomumui valdyti naudosime „JavaScript“ ir „Display“ ypatybes. Numatytoji atvaizdo rodymo nuosavybės vertė yra inline, tai reiškia, kad paveikslėlis rodomas likusioje HTML dalyje ir neprasideda naujoje eilutėje.

Norėdami paslėpti vaizdus, ​​mes naudosime „JavaScript“, kad pakeistume rodomos nuosavybės vertę nuo inline į nė vienas kiekvienam linijinio meno sluoksniui. Tai atskleis žemiau esančius spalvų užpildymo sluoksnius.

object.style.display = "nėra"

1. Atidarykite Veiksmų inspektorių.
   
   
2. Pasirinkite sluoksnį „duck_body_line“.
   
   
3. Skiltyje „Pelės paspaudimas“ (bakstelėjimas) spustelėkite pliuso piktogramą.
   
   
4. Išskleidžiamajame meniu Veiksmas pasirinkite Vykdyti „JavaScript“.
   
   
5. Kadangi tai bus tinkintas „JavaScript“, išskleidžiamąjį meniu Funkcija nustatykite į Nauja funkcija. Bus atidarytas naujas skirtuko langas su numatytuoju „JavaScript“ kodu ir funkcija pavadinimu „untitledFunction“.
   
   
6. Pakeiskite funkcijos pavadinimą iš untitledFunction į „BodyFunction“. Matysite skirtuko pavadinimą pakeisdami į „BodyFunction“ ().
   
   Tada mes pridėsime kodą, kad nustatytumėte ekrano ypatybę nė vienas už kūnas elementas. 5 tuščioje eilutėje pridėkite šį kodą.
   
   hypeDocument.getElementById („Body“). style.display = „none“;
   
   
7. Grįžkite į skirtuko „Untitled Scene“ langą ir pasirinkite sluoksnį duck_wing_line.
   
   
8. Pakartokite ankstesnį veiksmą, norėdami pakeisti funkcijos pavadinimą į „WingFunction“ ir pridėkite šią „JavaScript“.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Pasirinkite sluoksnį duck_beak_line, pakeiskite funkcijos pavadinimą į „BeakFunction“ ir pridėkite šią „JavaScript“.
   
   hypeDocument.getElementById („Bukas“). style.display = „nėra“;
   
   Viskas. Pabandykime naršyklėje. Jei viskas gerai, eksportuokite projektą kaip „iBooks Author“ valdiklį.
   
   
10. Meniu spustelėkite Failas - Eksportuoti kaip HTML5 - Informacijos suvestinė / „iBooks“ autoriaus valdiklis.
    
    

Vaizdo Instrukcijos: Tour of Dropbox (Gegužė 2024).