Promise

Цель: получить представление об асинхронности и цикле событий (Event Loop), научиться пользоваться функциями обратного вызова, объектом Promise и его методами.

Подготовка

Прочитайте про замыкания, принцип их работы и как оно помогает в сокрытии данных.

Изучите работу с таймерами: добавление (setTimeout, setInterval), удаление (clearInterval) и понятие функций обратного вызова.

Ознакомтесь с концепцией асинхронного JavaScript: что это такое и чем асинхронное отличается от синхронного JavaScript. Посмотрите демо цикла событий (Event Loop) и разберитесь в принципе его работы.

Обещания (Promises): объединение обещаний в цепочки, отлавливание ошибок с помощью функции catch(). И статическим методы Promise.

Источники

Выполнение

Как и в прошлых работах, переключитесь на ветку main, убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.

Создайте ветку lab4 и работайте на ней. Создайте документ html с H1 заголовком «ФИО - Тамагочи».

Не используйте async/await в этом задании. Вы должны использовать .then(), .catch() и .finally() и их цепочки. Все временные задержки должны быть смоделированы с использованием setTimeout, заключенного в Promise((resolve, reject) => {}).

Разделяйте вычисления состояния и отрисовку информации в DOM на разные функции, чтобы поддерживать чистоту решения. Подумайте над тем как можно использовать замыкания для скрытия некоторых значений и избегания глобальных переменных.

Тамагочи

У питомца в Тамагочи есть основные показатели в диапазоне от 0 до 100: сытость, счастье и энергия. С течением времени эти показатели убывают. Если один из показателей достигает 0, то питомец уходит и надо начинать сначала.

Ваша задача реализовать действия по уходу за питомцем. Каждое действие занимает определенное время выполнения +- заложенная случайность. Если действие приводит к превышению значения показателя в 100 единиц, то promise уходит в reject и интерфейс реагирует на это. В действии заложено максимальное изменение показателя, но применяется оно постепено с заданным интервалом времени.

Основные действия по нажатию на кнопки:

покормить: увеличивает сытость, при значении более 100 отказывается есть,
поиграть (увеличивает счастье, но уменьшает энергию, при счастье более 100 отказывается играть),
сон (восстанавливает энергию до 100 и прерывается, при превышении отказывается спать).

Также есть действие “Дрессировка”. Одновременно запускает покормить и поиграть. увеличивает счастье и энергию. Если какое-либо из действий отклоняется (например, питомец уже был слишком сыт, чтобы есть), все действие завершается отклонением promise.

Несколько действий одновременно запустить нельзя.

Реализуйте случайное периодическое событие “Блуждание”. При запуске нужно сравнить два Promise: 3-секундный таймер, который автоматически отклоняет promise, и нажатие кнопки “Поймать питомца”, которое разрешает promise. Если пользователь нажмет на кнопку до окончания таймера, питомец будет спасен. Если таймер сработает, promise будет отклонен, и питомец потеряет часть счастья.

Должна быть скрываемая панель для отладки, в которой можно изменить продолжительность таймеров и случайностей, значения изменения показателей питомца, перезапуска, чтобы вам проще было отлаживать и потом на защите показывать.

Можно сделать без графического представления игры, только числа и с этого лучше начать (40 баллов + бонус за сдачу в срок).

На максимальное число баллов (60 + бонус за сдачу в срок) требуется простая графика и анимации для разных действий. Добавьте CSS-анимацию “встряхивания” к питомцу, когда promise попадает в блок .catch(). Несколько действий подряд организуются в очередь, но не более 3-х.

Проведите ручное тестирование в браузере, отформатируйте документы, убедитесь, что нет замечаний от ESLint, зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab4 в репозиторий на github.

Требования