Krāsu spēles programmēšana hipe

• Aprīlis 28, 2024

Iepriekšējā apmācībā mēs importējām krāsošanas spēles attēlus iBooks Author^R ko mēs veidojam Hype Pro. Tagad mēs pievienosim interaktīvos elementus spēlei.

Atveriet Hype dokumentu un sāksim darbu.

Mūsu pirmais solis ir pievienot identitāti katram slānim, kam pēc noklikšķināšanas jāpazūd. Tas ietver līnijas mākslas slāņus pīles ķermenim, spārnam un knābim. Piešķirot katram no šiem slāņiem unikālo elementu ID, mēs pēc tam varam ieprogrammēt šo slāņu redzamību ar JavaScript.

1. Atveriet identitātes inspektoru.
   
   
2. Galvenajā laika skalā atlasiet slāni duck_body_line.
   
   
3. Identitātes inspektorā pievienojiet unikāla elementa ID. Izmantosim ID Korpuss.
   
   
4. Atlasiet slāni duck_wing_line un pievienojiet Spārns kā unikālā elementa ID.
   
   
5. Atlasiet slāni duck_beak_line un pievienojiet Knābis kā unikālā elementa ID.
   
   

Tagad, kad slāņiem ir unikālo elementu ID, mēs varam pievienot darbību šiem slāņiem. Lai kontrolētu šo slāņu redzamību, mēs izmantosim JavaScript un Display. Noklusētā attēla rekvizīta vērtība ir rindā, kas nozīmē, ka attēls tiek parādīts pārējā HTML daļā un nesākas jaunā rindā.

Lai paslēptu attēlus, mēs izmantosim JavaScript, lai mainītu displeja īpašuma vērtību no rindā uz neviena katram no līnijas mākslas slāņiem. Tas atklās zemāk esošos krāsu aizpildīšanas slāņus.

object.style.display = "nav"

1. Atveriet darbību inspektoru.
   
   
2. Atlasiet slāni duck_body_line.
   
   
3. Sadaļā Peles klikšķis (pieskarieties) noklikšķiniet uz ikonas Plus.
   
   
4. Nolaižamajā izvēlnē Darbība izvēlieties Palaist JavaScript.
   
   
5. Tā kā tas būs pielāgots JavaScript, nolaižamajā izvēlnē Funkcija iestatiet uz Jauna funkcija. Tiks atvērts jauns cilnes logs ar noklusējuma JavaScript kodu un funkciju ar nosaukumu untitledFunction.
   
   
6. Funkcijas nosaukuma maiņa no bez nosaukumaFunkcija uz BodyFunction. Jūs redzēsit cilnes nosaukumu, kas mainīta uz BodyFunction ().
   
   Tālāk mēs pievienosim kodu, lai displeja rekvizītu iestatītu uz neviena priekš Korpuss elements. Tukšajā 5. rindiņā pievienojiet šo kodu.
   
   hypeDocument.getElementById ("Body"). style.display = "nav";
   
   
7. Atgriezieties cilnes Untitled Aina logā un atlasiet slāni duck_wing_line.
   
   
8. Atkārtojiet iepriekšējo darbību, lai mainītu funkcijas nosaukumu uz WingFunction un pievienojiet šo JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "nav";
   
   
9. Atlasiet slāni duck_beak_line, mainiet funkcijas nosaukumu uz BeakFunction un pievienojiet šo JavaScript.
   
   hypeDocument.getElementById ("knābis"). style.display = "nav";
   
   Tieši tā. Pārbaudīsim pārlūkā. Ja viss iet labi, eksportējiet projektu kā iBooks Autora logrīku.
   
   
10. Izvēlnē noklikšķiniet uz Fails - eksportēt kā HTML5 - informācijas panelis / iBooks autora logrīks.
    
    

Video Instrukcijas: Minecraft - 5 Secret Things That You Can Make in Minecraft! (PS3/4, Xbox, Wii U, Switch, PE, PC) (Aprīlis 2024).