Доброго вечора! Нам потрібно розробити просту веб-гру (html/css, а також трохи js). Веб-сайт призначений для мобільних телефонів (міні-гра в Telegram).
Ось завдання:
У вас є сторінка html/css з чорним фоном:
У вас є 200 пузирів (різних розмірів, які ви можете варіювати на свій розсуд — головне, щоб вони були клікабельними та презентабельними. (розміри пузирів повинні бути довільними, вибирайте діапазон пікселів розумно); Також пузирі повинні мати скляний та рожевий градієнт (див. прикріплене зображення): https://static.vecteezy.com/system/resources/thumbnails/005/093/148/small_2x/realistic-soap-bubbles-with-rainbow-reflection -set-isolated-illustration-vector.jpg.
Коли користувач лопає ці пузирі, натискаючи на них, вони зникають (зробіть для цього реалістичну анімацію — пузирі повинні розчинятися на екрані так само, як розчиняються в повітрі в реальному житті);
У вас також є шкала енергії, яка підраховує загальну кількість пузирів (яка дорівнює 200). Шкала також відстежує, скільки пузирів користувач лопає в поточний момент. Коли користувач лопає пузирі, кількість енергії відповідно зменшується. Якщо користувач чекає деякий час (зазвичай 2-3 секунди), кількість пузирів на екрані починає поступово збільшуватися, як і шкала енергії. Після того, як користувач доторкається до екрана 200 разів, з'явиться анімація подарунка (після того, як користувач клікає на подарункову коробку, з'являється випадкове число в діапазоні від 1 до 100. Анімації та зображення зробіть на свій смак.), потім змусьте номер зникнути і поверніться до початкового етапу з 200 пузирками на екрані.
Будь ласка, працюйте над виправленням помилок дуже уважно, анімація та система обчислень повинні працювати точно і плавно. Зв'яжіться зі мною, щоб уточнити час, необхідний для повного виконання завдання.
Заздалегідь дякуємо за розуміння та співпрацю!
