Програмування гри кольорів у Hype

• Може 11, 2024

У попередньому підручнику ми імпортували зображення для розмальовки для iBooks Author^R що ми робимо в Hype Pro. Тепер ми додамо до гри інтерактивні елементи.

Відкрийте документ Hype і почнемо роботу.

Наш перший крок - додати ідентифікацію до кожного з шарів, які потрібно зникнути при натисканні. Сюди входять лінійні художні шари для тіла качки, крила та дзьоба. Призначаючи кожному з цих шарів унікальний ідентифікатор елемента, ми можемо програмувати видимість цих шарів за допомогою JavaScript.

1. Відкрийте інспектор посвідчення особи.
   
   
2. Виберіть шар duck_body_line на головній шкалі.
   
   
3. У інспекторі посвідчень додайте унікальний ідентифікатор елемента. Давайте скористаємося ідентифікатором Тіло.
   
   
4. Виберіть шар duck_wing_line та додайте Крило як унікальний ідентифікатор елемента.
   
   
5. Виберіть шар duck_beak_line та додайте Дзьоб як унікальний ідентифікатор елемента.
   
   

Тепер, коли шари мають унікальні ідентифікатори елементів, ми можемо додати дію до цих шарів. Ми будемо використовувати JavaScript та властивість Display для контролю видимості цих шарів. Значенням властивості відображення за замовчуванням для зображення є в лінію, а це означає, що зображення відображається в межах решти HTML і не починається з нового рядка.

Щоб приховати зображення, ми будемо використовувати JavaScript для зміни значення властивості відображення в лінію до жоден для кожного з ліній мистецьких шарів. Це виявить шари заливки кольорів нижче.

object.style.display = "немає"

1. Відкрийте інспектор дій.
   
   
2. Виберіть шар duck_body_line.
   
   
3. У розділі клацання миші (натисніть) клацніть піктограму плюс.
   
   
4. У спадному меню Дія виберіть Запустити JavaScript.
   
   
5. Оскільки це буде користувальницький JavaScript, встановіть спадне меню "Функція" на "Нова функція". Це відкриє нове вікно вкладки з кодом JavaScript за замовчуванням та функцією під назвою untitledFunction.
   
   
6. Змініть ім'я функції з untitledFunction до BodyFunction. Ви побачите назву зміни вкладки на BodyFunction ().
   
   Далі ми додамо код для встановлення властивості відображення жоден для Тіло елемент. Додайте наступний код у порожній рядок 5.
   
   hypeDocument.getElementById ("Тіло"). style.display = "немає";
   
   
7. Поверніться до вікна вкладки Без назви сцени та виберіть шар duck_wing_line.
   
   
8. Повторіть попередній крок, щоб змінити ім'я функції на WingFunction і додайте наступний JavaScript.
   
   hypeDocument.getElementById ("Крило"). style.display = "немає";
   
   
9. Виберіть шар duck_beak_line, змініть ім'я функції на BeakFunction і додайте наступний JavaScript.
   
   hypeDocument.getElementById ("Дзьоб"). style.display = "жоден";
   
   Це воно. Перевіримо в браузері. Якщо все добре, експортуйте проект у віджет автора iBooks Author.
   
   
10. У меню натисніть Файл - Експортувати як HTML5 - Віджет автора / iBooks Author Widget.
    
    

Відео Інструкція: Практична робота 6. Завдання 3. Гра (Lazarus) | 9 клас | Морзе (Може 2024).