A színes játék programozása a Hype-ben

• Április 18, 2024

Az előző leckében egy színező játék képeit importáltuk az iBooks Author számára^R amit a Hype Pro-ban készítünk. Most hozzáadjuk az interaktív elemeket a játékhoz.

Nyissa meg a Hype dokumentumot, és kezdje el.

Első lépésünk az, hogy minden egyes réteghez azonosítót adjunk, amelynek kattintáskor eltűnnie kell. Ide tartoznak a kacsatest, a szárny és a csőr vonalas rétegei. Ha ezen rétegek mindegyikéhez egyedi elemet azonosítót rendelünk, akkor ezeknek a rétegeknek a láthatóságát beprogramozhatjuk a JavaScript használatával.

1. Nyissa meg az azonosító ellenőrét.
   
   
2. Válassza ki a duck_body_line réteget a Fő idővonalban.
   
   
3. A Személyazonossági ellenőrben adjon hozzá egyedi elem azonosítót. Használjuk a Test.
   
   
4. Válassza ki a duck_wing_line réteget, majd adja hozzá Szárny mint egyedi elem azonosítója.
   
   
5. Válassza ki a duck_beak_line réteget, majd adja hozzá Csőr mint egyedi elem azonosítója.
   
   

Most, hogy a rétegek egyedi elem-azonosítóval rendelkeznek, hozzáadhatjuk a műveletet ezekhez a rétegekhez. Ezeknek a rétegeknek a láthatóságát a JavaScriptet és a Megjelenítés tulajdonságot fogjuk használni. A kép alapértelmezett megjelenítési tulajdonságértéke: Sorban, ami azt jelenti, hogy a kép a HTML többi részén megjelenik, és nem indul új sorra.

A képek elrejtéséhez a JavaScript használatával változtatjuk meg a megjelenített tulajdonság értékét Sorban nak nek egyik sem mindegyik vonalas rajzréteghez. Ez feltárja az alábbi szín kitöltő rétegeket.

object.style.display = "none"

1. Nyissa meg a Műveletek ellenőrét.
   
   
2. Válassza ki a duck_body_line réteget.
   
   
3. Az Egér kattintása (érintse meg) szakaszban kattintson a Plusz ikonra.
   
   
4. A Művelet legördülő menüben válassza a JavaScript futtatását.
   
   
5. Mivel ez egy egyedi JavaScript lesz, állítsa a Funkció legördülő menüt Új funkcióra. Ez megnyit egy új fülablakot az alapértelmezett JavaScript-kóddal és az untitledFunction nevű funkcióval.
   
   
6. Változtassa meg a funkció nevét untitledFunction nak nek BodyFunction. Látni fogja, hogy a fül neve BodyFunction () lesz.
   
   Ezután hozzáadjuk a kódot, amellyel a megjelenítési tulajdonságot beállíthatjuk egyik sem a Test elem. Adja hozzá a következő kódot az 5. üres sorhoz.
   
   hypeDocument.getElementById ("Body"). style.display = "nincs";
   
   
7. Menjen vissza a Untitled Scene fül ablakba, és válassza a duck_wing_line réteget.
   
   
8. Ismételje meg az előző lépést a funkció nevének megváltoztatásához WingFunction és adja hozzá a következő JavaScriptet.
   
   hypeDocument.getElementById ("Wing"). style.display = "nincs";
   
   
9. Válassza ki a duck_beak_line réteget, változtassa meg a funkció nevét BeakFunction és adja hozzá a következő JavaScriptet.
   
   hypeDocument.getElementById ("Csőr"). style.display = "nincs";
   
   Ez az. Vizsgáljuk meg a böngészőt. Ha minden jól megy, exportálja a projektet iBooks Author widgetként.
   
   
10. A menüben kattintson a Fájl - Exportálás HTML5 formátumban - Irányítópult / iBooks Author Widget elemre.