Pengaturcaraan Permainan Warna dalam Hype

• Mungkin 18, 2024

Dalam tutorial sebelumnya, kami mengimport imej untuk permainan pewarna untuk Pengarang iBooks^R yang kita buat dalam Hype Pro. Sekarang kita akan menambah elemen interaktif ke permainan.

Buka dokumen Hype anda dan mari bermula.

Langkah pertama kami ialah untuk menambah identiti kepada setiap lapisan yang perlu hilang apabila diklik. Ini termasuk lapisan seni line untuk badan itik, sayap dan paruh. Dengan memberikan setiap lapisan ini sebagai ID Unsur Unik, kami kemudian boleh memperlihatkan keterlihatan lapisan-lapisan ini dengan JavaScript.

1. Buka Inspektor Pengenalan.
   
   
2. Pilih lapisan duck_body_line dalam Garis Masa Utama.
   
   
3. Dalam Inspektor Pengenalan, tambahkan ID Unsur Unik. Mari kita gunakan ID Badan.
   
   
4. Pilih lapisan duck_wing_line dan tambahkan Sayap sebagai ID Unsur Unik.
   
   
5. Pilih layer duck_beak_line dan tambahkan Paruh sebagai ID Unsur Unik.
   
   

Sekarang bahawa lapisan mempunyai ID Unsur Unik, kami boleh menambah tindakan ke lapisan ini. Kami akan menggunakan JavaScript dan ciri Paparan untuk mengawal keterlihatan lapisan-lapisan ini. Nilai hartanah paparan bagi imej adalah dalam barisan, yang bermaksud bahawa imej itu dipaparkan dalam seluruh HTML dan tidak bermula pada baris baru.

Untuk menyembunyikan imej kami akan menggunakan JavaScript untuk mengubah nilai hartanah paparan dari dalam barisan kepada tiada untuk setiap lapisan seni baris. Ini akan mendedahkan lapisan pengisi warna di bawah.

object.style.display = "none"

1. Buka Inspektor Tindakan.
   
   
2. Pilih lapisan duck_body_line.
   
   
3. Dalam bahagian Klik Mouse Pada (Ketik), klik ikon Plus.
   
   
4. Dalam menu lungsur Tindakan, pilih Run JavaScript.
   
   
5. Kerana ini akan menjadi JavaScript tersuai, tetapkan menu lungsur Fungsi ke Fungsi Baharu. Ini akan membuka tetingkap tab baru dengan kod JavaScript lalai dan fungsi bernama untitledFunction.
   
   
6. Tukar nama fungsi dari untitledFunction kepada BodyFunction. Anda akan melihat nama tab perubahan kepada BodyFunction ().
   
   Seterusnya kita akan menambah kod untuk menetapkan harta paparan tiada untuk Badan elemen. Masukkan kod berikut pada baris kosong 5.
   
   hypeDocument.getElementById ("Badan"). style.display = "none";
   
   
7. Kembali ke tetingkap tab Scene Untitled dan pilih lapisan duck_wing_line.
   
   
8. Ulangi langkah sebelumnya untuk menukar nama fungsi kepada WingFunction dan tambahkan JavaScript berikut.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Pilih lapisan duck_beak_line, tukar nama fungsi kepada BeakFunction dan tambahkan JavaScript berikut.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Itu sahaja. Mari uji di Penyemak Imbas. Sekiranya semuanya berjalan lancar, eksport projek itu sebagai widget Pengarang iBooks.
   
   
10. Dari Menu, klik Fail - Eksport sebagai HTML5 - Widget Pengarang Dashboard / iBooks.
    
    

Arahan Video: Age of Deceit (2) - Hive Mind Reptile Eyes Hypnotism Cults World Stage - Multi - Language (Mungkin 2024).