Summary  
This chapter covers how to implement code to build a user interface layout by loading and positioning image assets, styling text and buttons, and adding simple floating animations.  

General domain of usage  
Game development

Ви запускаєте нову гру під назвою "Допоможи Коліну". Колін проспав, автобус майже приїхав, і завдання користувача — допомогти йому зібратися, ловлячи хороше шкільне приладдя та уникаючи поганого. Спочатку ви створите яскравий і дружній домашній екран, який розповідає цю історію.

Завантажте підготовлені зображення (`room.png`, `colin.png`). Бажаєте використати власні ресурси? Це не проблема, залиште ті ж імена файлів або відповідно змініть підказку.

1. Створіть нову папку для проєкту (наприклад, `help-colin-game`) і відкрийте її у Cursor (File → Open Folder);
2. Розмістіть `room.png` та `colin.png` у корені проєкту;
3. Відкрийте новий чат у Cursor;
4. Вставте підказку нижче та запустіть її;
5. Натисніть Go Live для попереднього перегляду.

Створення домашнього екрану

- Фоном є `room.png` з м'яким затемненням для кращої читабельності тексту;
- Ліворуч розташоване велике зображення Коліна (`colin.png`);
- Праворуч відображається назва гри та коротка, дружня історія про те, що Колін запізнюється;
- Є основна кнопка дії з написом "Допоможи Коліну!" — велика та яскрава, яка згодом запускатиме гру;
- Загальний настрій доповнюють плаваючі шкільні емодзі для ігрового руху, з округлими, дружніми для дітей візуальними елементами, адаптованими для телефонів і ноутбуків.

Що має містити результат

Згідно із завданням, що слід використати як фон для домашнього екрана у грі 'Help Colin'?

Створюйте прості браузерні ігри за допомогою підказок у Cursor. Дізнайтеся, як перетворювати повсякденні ідеї на інтерактивні проєкти без знань програмування. Тренуйтеся керувати ШІ за допомогою чітких інструкцій і вдосконалюйте свої ігри до рівня, яким можна пишатися.

Створіть свою першу гру, керуючи Cursor AI за допомогою простих підказок. Дослідіть механізми перевертання карток, перевірки збігів і відстеження прогресу у браузері. Дізнайтеся, як поетапно вдосконалювати результати AI та створити зрозумілу гру на пам’ять, у яку зможе грати кожен.

Створіть захопливу та динамічну гру на ловіння з Cursor AI. Керуйте рюкзаком у нижній частині екрана та ловіть шкільне приладдя, що падає згори. Відпрацьовуйте додавання підрахунку балів, керування гравцем і яскравих візуальних ефектів, навчаючись удосконалювати генерацію коду за допомогою AI.

Розробіть невелику пригодницьку гру, у якій кролик намагається дістатися до моркви, уникаючи лисиць і вовків. Керуйте Cursor AI для створення руху, перешкод і умов перемоги чи поразки. Дізнайтеся, як коригувати підказки для роботи зі складнішою логікою та вдосконалити гру до завершеного вигляду.

Проєктування Домашнього Екрана