Тимон и пумба. Webдизайн и разработка
 Скачать 277.55 Kb.
|
  WEB-Дизайн и разработка 7-й национальный чемпионат Молодые профессионалы WorldSkills Russia 2019 День 1. Разработка на стороне клиента содержаниеДанный тестовый проект состоит из следующих файлов: Задание.pdf media.zip – Медиа файлы введениеВ последние годы Интернет стал неотъемлемой частью нашей повседневной жизни. Использование игр приобрело заметную роль в этой вселенной, позволяя миллионам людей получать доступ к развлечениям быстро и бесплатно. Наш заказчик сделал срочный заказ: необходимо разработать игру и воплотить желание заказчика в реальность! Все что вам необходимо – это реализовать игру. Название игры: Тимон и Пумба. Технологии этого модуля: HTML 5, CSS3, JavaScript, jQuery, Граф. дизайн, PHP Время модуля: 6 часов Вам необходимо реализовать дизайнерское решение и функционал игры. Вам предоставлены необходимые медиа данные и шрифты, их заказчик подбирал самостоятельно, поэтому необходимо их использовать в разработке игры. описание проекта и задачВ игре используются элементы, описанные ниже: Тимон или Пумба: персонаж, который контролируется игроком. Гиены: элементы, от которых необходимо уклоняться игроку. Шкала жизней (HP): шкала, отражающая запас жизненной энергии игрока. Гусеница: элемент, при поедании которого у персонажа восстанавливается здоровье. Имя игрока: имя игрока, которое он ввел на стартовом экране. Съедено: количество съеденных гусеиц. Возвышенность: элемент, на который можно запрыгивать. Таймер: элемент, отображающий время игры Игра должна начинаться со стартового экрана, который содержит название игры, инструкцию к игре, поле для ввода имени игрока и кнопку "Начать". Если поле имени пустое, то кнопка не активна. Инструкция к игре должна быть представлена анимировано. Так же на стартовом экране можно выбрать персонажа для игры. Перед началом игры после нажатия кнопки «Начать» должен проигрываться небольшой мультик – предыстория, который предоставлен в медиафайлах. Должна быть предоставлена возможность пропустить мультик и сразу начать игру при нажатии на пробел. Игровой функционал: По нажатию на кнопку "Начать" и просмотра ролика игрок попадает на экран игры. На игровом экране отображается имя игрока, количество HP, количество съеденных гусениц и время игры. Изначально у игрока 0 съеденных гусениц, 100 HP и таймер в состоянии 00:00 (в формате mm:ss). В начале игры запускается таймер, персонаж располагается в левой стороне игрового поля, что является начальной границей карты. При начале игры должно включиться музыкальное оформление. В начале игры случайным образом генерируются возвышенности (не менее 10) Игрок может передвигаться с помощью клавиш-стрелок: налево и направо. Для прыжка используется клавиша вверх, а для ухода под землю клавиша вниз. Когда игрок находится в левой половине видимой части экрана фон не передвигается, а «замирает». Когда игрок доходит до центральной точки он остается в центральной части экрана, а фон в свою очередь начинает «прокручиваться». При этом когда фон достигает конца, игрок должен передвигаться в правую часть экрана. При движении справа налево фон прокручивается в обратную сторону. По мере прохождения игры на игрока нападают гиены, которые случайно генерируются в видимой части игрового поля и двигаются влево-вправо в пределах 500 пикселей от точки появления. Игра заканчивается, как только игрок доходит до конца карты и достигает правого местоположения или происходит смерть персонажа, а таймер останавливается. За каждую съеденную гусеницу дается 5 HP. За каждое соприкосновение с гиеной отбирается 30 HP. Если контакт длится больше 1 секунды, то 30 HP списывается за каждую полную секунду контакта. Если жизни игрока кончаются (0HP), то игра заканчивается. Жизни игрока (HP) расходуются со скоростью 1HP/с на протяжении всей игры. Гусеницы на карте должны генерироваться случайный образом, одновременно на экране должно быть не более 2 гусениц. Гусеницы располагаются на возвышенностях. Чтобы на них забраться необходимо подпрыгнуть. Для того чтобы достать гусеницу персонажу необходимо запрыгнуть на возвышенность, подпрыгнув. Он может находиться на возвышенности неограниченное время. Для того чтобы увернуться от гиены персонажу необходимо перепрыгнуть её, спрятаться под землю или запрыгнуть на возвышенность. При уходе под землю персонаж не виден на экране, и не может передвигаться влево-вправо. Для того чтобы персонаж появился из-под земли необходимо нажать клавишу вверх. При нажатии на кнопку ESC игра ставится на паузу, а при повторном нажатии - снимается с паузы. Во время паузы останавливаются все интерактивные действия, а также вся анимация, таймер тоже замирает, прекращается трата HP, игрок и гиены не двигаются. Когда игрок идет обратно, он поворачивается в обратную сторону. Ваша игра должна работать без отображения JavaScript ошибок или сообщений в консоли браузера. Ваш HTML/CSS и JavaScript код должен быть организован и понятным. Используйте корректные наименования переменных, методов и не забывайте оставлять комментарии для дальнейшей поддержки в будущем. После завершения игры результаты должны быть сохранены на сервере и показана таблица с рейтингом. Баллы для рейтинга рассчитываются по формуле: 1000 – затраченное время в секундах + количество съеденных гусениц*10 После завершения игры открывается экран результатов, в котором формируется таблица с лучшими 10 игроками, если игрок не вошел в таблицу, то выводятся 9 лучших игроков, а в последней строке указывается место и результат игрока только что завершившего игру. На экране результатов должна быть кнопка «Играть сначала», которая позволяет начать игру с начала, первый экран и ролик не отображаются. Проявите все свои навыки для создания качественной игры, с анимацией и интерактивностью. Также важен дизайн игры и соответствие целевой группе: дети дошкольного возраста. ИНСТРУКЦИя ДЛЯ КОНКУРСАНТА Время на выполнение задания вы можете использовать по своему усмотрению При необходимости вы можете нарисовать дополнительные медиа данные или отредактировать имеющиеся. Игра должна быть доступна по адресу: http://xxxxxx-m1.wsr.ru Оценка будет производиться при помощи браузера Google Chrome. СИСТЕМА ОЦЕНКИ
 WSR_NC_2019_TP17_CLIENT_SIDE_1 |