Добрый вечер! Нам нужно разработать простую веб-игру (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 пузырьками на экране.
Пожалуйста, работайте над исправлением ошибок очень внимательно, анимация и система вычислений должны работать точно и плавно. Свяжитесь со мной, чтобы уточнить время, необходимое для полного выполнения задачи.
Заранее благодарим за понимание и сотрудничество!
