Ohjelmoi väripeli Hypessä

• Huhtikuu 28, 2024

Edellisessä opetusohjelmassa tuomme kuvat värityspeliä varten iBooks Authorille^R jota teemme Hype Prossa. Nyt lisäämme vuorovaikutteiset elementit peliin.

Avaa Hype-asiakirjasi ja aloitamme.

Ensimmäinen askel on lisätä identiteetti jokaiselle tasolle, joka täytyy kadota napsautettaessa. Tähän sisältyy ankan rungon, siipin ja nokan viivapiirros. Määrittämällä kullekin näistä kerroksista yksilöllinen tunnus, voimme sitten ohjelmoida näiden kerrosten näkyvyyden JavaScriptillä.

1. Avaa henkilöllisyyden tarkastaja.
   
   
2. Valitse duck_body_line-kerros pääajanjaksosta.
   
   
3. Lisää henkilöllisyyden tarkastajaan ainutkertaisen elementin tunnus. Käytämme ruumis.
   
   
4. Valitse duck_wing_line -kerros ja lisää siipi yksilöllisen elementin tunnuksena.
   
   
5. Valitse kerros duck_beak_line ja lisää Nokka yksilöllisen elementin tunnuksena.
   
   

Nyt kun tasoilla on yksilölliset elementtitunnukset, voimme lisätä toiminnan näihin tasoihin. Käytämme JavaScriptiä ja Näyttö-ominaisuutta näiden kerrosten näkyvyyden hallintaan. Kuvan Näyttöominaisuuden oletusarvo on linjassa, mikä tarkoittaa, että kuva näkyy HTML-koodin loppuosassa eikä se ala uutta riviä.

Kuvien piilottamiseksi käytämme JavaScriptiä muuttaaksesi näyttöominaisuuden arvon linjassa että ei mitään jokaiselle viivapiirroskerrokselle. Tämä paljastaa alla olevat värien täyttökerrokset.

object.style.display = "ei mitään"

1. Avaa toimintotarkastaja.
   
   
2. Valitse kerros duck_body_line.
   
   
3. Napsauta Hiiri napsauttamalla (kosketa) -osiossa Plus-kuvaketta.
   
   
4. Valitse avattavasta Toiminto-valikosta Suorita JavaScript.
   
   
5. Koska tämä on mukautettu JavaScript, aseta avattava Toiminto-valikko kohtaan Uusi toiminto. Tämä avaa uuden välilehden ikkunan oletus JavaScripti-koodilla ja toiminnolla nimeltä untitledFunction.
   
   
6. Muuta toiminnon nimi untitledFunction että BodyFunction. Näet välilehden nimen muuttuvan BodyFunction ().
   
   Seuraavaksi lisäämme koodin, jolla näyttöominaisuus asetetaan ei mitään varten ruumis elementti. Lisää seuraava koodi tyhjälle riville 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Palaa Untitled Scene -välilehteen ja valitse duck_wing_line kerros.
   
   
8. Toista edellinen vaihe muuttaaksesi funktion nimen WingFunction ja lisää seuraava JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "ei mitään";
   
   
9. Valitse kerros duck_beak_line, muuta funktion nimi BeakFunction ja lisää seuraava JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "ei mitään";
   
   Se siitä. Testataan selaimessa. Jos kaikki menee hyvin, vie projekti iBooks Author -widgetiksi.
   
   
10. Napsauta valikossa Tiedosto - Vie HTML5-muodossa - Dashboard / iBooks Author Widget.
    
    

Video-Ohjeita: nVent RAYCHEM SENZ WIFI ohjelmoi älylaitteellasi (Huhtikuu 2024).