Programowanie gry kolorowej w Hype

• Kwiecień 20, 2024

W poprzednim samouczku zaimportowaliśmy obrazy do gry kolorystycznej dla iBooks Author^R które tworzymy w Hype Pro. Teraz dodamy interaktywne elementy do gry.

Otwórz dokument Hype i zacznijmy.

Naszym pierwszym krokiem jest dodanie tożsamości do każdej warstwy, która musi zniknąć po kliknięciu. Obejmuje to warstwy grafiki liniowej dla ciała kaczki, skrzydła i dzioba. Przypisując każdej z tych warstw unikalny identyfikator elementu, możemy następnie zaprogramować widoczność tych warstw za pomocą JavaScript.

1. Otwórz Inspektora tożsamości.
   
   
2. Wybierz warstwę duck_body_line na głównej osi czasu.
   
   
3. W Inspektorze tożsamości dodaj unikalny identyfikator elementu. Użyjmy ID Ciało.
   
   
4. Wybierz warstwę duck_wing_line i dodaj Skrzydło jako unikalny identyfikator elementu.
   
   
5. Wybierz warstwę duck_beak_line i dodaj Dziób jako unikalny identyfikator elementu.
   
   

Teraz, gdy warstwy mają unikalne identyfikatory elementów, możemy dodać akcję do tych warstw. Użyjemy JavaScript i właściwości Display do kontrolowania widoczności tych warstw. Domyślna wartość właściwości wyświetlania dla obrazu to inline, co oznacza, że ​​obraz jest wyświetlany w pozostałej części HTML i nie zaczyna się od nowej linii.

Aby ukryć obrazy, użyjemy JavaScript do zmiany wartości właściwości wyświetlania inline do Żaden dla każdej warstwy grafiki liniowej. Ujawni to poniższe warstwy wypełnienia kolorem.

object.style.display = "none"

1. Otwórz Inspektora działań.
   
   
2. Wybierz warstwę duck_body_line.
   
   
3. W sekcji Kliknięcie myszką (dotknij) kliknij ikonę Plus.
   
   
4. Z menu rozwijanego Akcja wybierz polecenie Uruchom JavaScript.
   
   
5. Ponieważ będzie to niestandardowy JavaScript, ustaw menu rozwijane Funkcja na Nowa funkcja. Otworzy się nowe okno zakładki z domyślnym kodem JavaScript i funkcją o nazwie untitledFunction.
   
   
6. Zmień nazwę funkcji z untitledFunction do BodyFunction. Zobaczysz nazwę zakładki zmieniającą się na BodyFunction ().
   
   Następnie dodamy kod do ustawienia właściwości display Żaden dla Ciało element. Dodaj następujący kod w pustym wierszu 5.
   
   hypeDocument.getElementById („Body”). style.display = „none”;
   
   
7. Wróć do okna zakładki Scena bez tytułu i wybierz warstwę duck_wing_line.
   
   
8. Powtórz poprzedni krok, aby zmienić nazwę funkcji na WingFunction i dodaj następujący kod JavaScript.
   
   hypeDocument.getElementById („Wing”). style.display = „none”;
   
   
9. Wybierz warstwę duck_beak_line, zmień nazwę funkcji na BeakFunction i dodaj następujący kod JavaScript.
   
   hypeDocument.getElementById („Beak”). style.display = „none”;
   
   Otóż ​​to. Przetestujmy w przeglądarce. Jeśli wszystko pójdzie dobrze, wyeksportuj projekt jako widget autora iBooks.
   
   
10. W menu kliknij Plik - Eksportuj jako HTML5 - Autorski widget Dashboard / iBooks.
    
    

Instrukcje Wideo: Unity dla dzieci. Zabawa w programowanie gier - trailer kursu | Videopoint.pl (Kwiecień 2024).