Renk Oyununu Hype'da Programlama

• Mayıs Ayı 15, 2024

Önceki öğreticide, iBooks Author için bir boyama oyunu için görüntüleri içe aktardık^R, Hype Pro'da yaptığımız Şimdi etkileşimli öğeleri oyuna ekleyeceğiz.

Hype belgenizi açın ve başlayalım.

İlk adımımız, tıklandığında kaybolması gereken katmanların her birine bir kimlik eklemektir. Bu, ördek gövdesi, kanat ve gaga için hat sanatı katmanlarını içerir. Bu katmanların her birine bir Benzersiz Öğe Kimliği atayarak, bu katmanların görünürlüğünü JavaScript ile programlayabiliriz.

1. Kimlik Denetçisini açın.
   
   
2. Ana Zaman Çizelgesi'nde duck_body_line katmanını seçin.
   
   
3. Kimlik Denetçisine, Benzersiz Öğe Kimliği ekleyin. Hadi kimliğini kullanalım Vücut.
   
   
4. Duck_wing_line katmanını seçin ve ekleyin Kanat Benzersiz Öğe Kimliği olarak.
   
   
5. Duck_beak_line katmanını seçin ve ekleyin Gaga Benzersiz Öğe Kimliği olarak.
   
   

Artık katmanların Benzersiz Öğe Kimlikleri olduğuna göre, bu katmanlara eylem ekleyebiliriz. Bu katmanların görünürlüğünü kontrol etmek için JavaScript ve Display özelliğini kullanacağız. Bir görüntünün varsayılan Görüntüleme özelliği değeri Çizgideanlamına gelir; bu, resmin HTML'nin geri kalanında gösterileceği ve yeni bir satırda başlamayacağı anlamına gelir.

Görüntüleri gizlemek için, display özelliği değerini değiştirmek için JavaScript kullanacağız. Çizgide için Yok hat sanatı katmanlarının her biri için. Bu, aşağıdaki renk dolgu katmanlarını ortaya çıkaracaktır.

object.style.display = "none"

1. Eylemler Denetçisini açın.
   
   
2. Duck_body_line katmanını seçin.
   
   
3. Fareyle Tıklandığında (Dokunun) bölümünde Artı simgesine tıklayın.
   
   
4. Eylem açılır menüsünde JavaScript'i Çalıştır'ı seçin.
   
   
5. Bu özel bir JavaScript olacağından İşlev açılır menüsünü Yeni İşlev olarak ayarlayın. Bu, varsayılan JavaScript koduna ve untitledFunction adlı bir işleve sahip yeni bir sekme penceresi açar.
   
   
6. İşlev adını şununla değiştirin: untitledFunction için BodyFunction. Sekme adının BodyFunction () olarak değiştiğini göreceksiniz.
   
   Sonra display özelliğini ayarlamak için kodu ekleyeceğiz Yok için Vücut öğesi. Boş satıra aşağıdaki kodu ekleyin 5.
   
   hypeDocument.getElementById ("Gövde"). style.display = "none";
   
   
7. Adsız Sahne sekmesi penceresine geri dönün ve duck_wing_line katmanını seçin.
   
   
8. İşlev adını değiştirmek için önceki adımı tekrarlayın. WingFunction ve aşağıdaki JavaScript'i ekleyin.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Duck_beak_line katmanını seçin, işlev adını BeakFunction ve aşağıdaki JavaScript'i ekleyin.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Bu kadar. Tarayıcıda test edelim. Her şey yolunda giderse, projeyi bir iBooks Author widget'ı olarak dışa aktarın.
   
   
10. Menüden Dosya - HTML5 Olarak Dışa Aktar - Gösterge Tablosu / iBooks Author Widget'ı tıklayın.
    
    

Video Talimatları: Every Krabby Patty EVER! ???? | #SpongeBobSaturdays (Mayıs Ayı 2024).