ВВЕДЕНИЕ
В последние годы Интернет стал неотъемлемой частью нашей повседневной жизни, позволяющей распространять информацию в неисчерпаемом источнике контента и взаимодействия. Игра играет важную роль в нашей повседневной жизни, позволяя миллионам людей быстро и бесплатно получать доступ к развлечениям и развлечениям.
Размышляя над этими концепциями, вы решили разработать небольшую игру, которая работает в наиболее распространенных веб-браузерах и демонстрирует ваш талант в области веб- дизайна и разработки. Игра будет называться Sky Angel .
Разработка игры будет включать использование HTML и CSS для разработки макета и программирования на стороне клиента (JavaScript и библиотек с открытым исходным кодом) для функциональности игры. Несколько файлов мультимедиа будут предоставлены в zip-файле. Вы можете создавать новые файлы и изменять все, что предоставляется вам для игры.
Ваша игра будет разработана с разрешением 1024x768 пикселей (ширина x высота). Если игра открывается на большом экране, игра должна находиться в центре экрана (по горизонтали и по вертикали).
ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ
Этот модуль рассчитан на 6 часов. В первые 3 часа вы должны создать дизайн игры в двух изображениях PNG и выполнить верстку макета с использованием HTML/CSS. Ваш HTML/CSS-макет должен соответствовать дизайну (PNG), который вы создали. За последние 3 часа вы должны создать функциональность игры, используя JavaScript, чтобы игра работала корректно в разных веб- браузерах в соответствии с требованиями, описанными ниже.
В игре SkY Angel используются элементы, описанные ниже:
1. Самолет: элемент, который контролирует пользователь.
2. Облака: элементы, которые перемещаются справа налево, чтобы создать впечатление движения самолета в небе.
3. Птицы: элементы, от которых самолет должен увернуться.
4. Звезды: элементы, которые самолет должен ловить, чтобы увеличить счетчик звезд.
5. Парашюты: элементы, которые самолет должен ловить, чтобы увеличить уровень топливо.
6. Счетчик топлива: элемент, который показывает уровень топлива.
7. Счетчик звезд: элемент, показывающий, сколько звезд самолет получил.
8. 8.Таймер: элемент, который показывает, сколько времени длится игровой процесс.
9. Звуковая кнопка: включение и отключение звука в игре.
10.Кнопки размера шрифта: увеличивает и уменьшает размер шрифта. 11.Кнопка паузы/продолжения: кнопка для приостановки/продолжения игра. 12.Logo: логотип игры.
ПЕРВЫЕ 3 ЧАСА – ДИЗАЙН И ПЛАН:
ПЕРВЫЕ 3 ЧАСА - ДИЗАЙН И МАКЕТ
1. Предоставьте 2 файла в формате PNG:
Платформа игровой доски: макет должен содержать все элементы, описанные выше: логотип, самолет, облака, птицы, звезды, парашюты, счетчик топлива, счетчик звезд, таймер, звуковая кнопка, кнопки размера шрифта и пауза/продолжение.
Таблица рейтинга: макет должен содержать логотип игры и рейтинг со следующими столбцами: позиция, имя, количество звезд и время продолжительности игры, также в таблице расположена кнопка «Начать игру».
Файлы проекта были сохранены на рабочем столе в папке «ModuleA_XX/design». XX – номер по жеребьѐвке.
2. Сделайте верстку (HTML + CSS) вашего игрового приложения. На главной странице должна быть инструкция к игре «Как играть» и кнопка «Начать игру». Инструкция должна быть
представлена с анимацией и привлекать пользователя. Исходные файлы верстки сохраняются на рабочем столе в папке с именем «ModuleA_XX/template».
4. Все кнопки должны иметь активные эффекты наведения. Фон кнопок в режиме наведения должен быть: #f39c12. Эффект наведения должен соответствовать предоставленному
примеру в папке ripple в Медиа файлах.
5. Код HTML и CSS должен соответствовать по стандартам W3C для HTML5 и CSS3.
ЗАКЛЮЧИТЕЛЬНЫЕ 3 ЧАСА – ФУНКЦИОНАЛ ИГРЫ
1. Нажав кнопку «Начать игру» на начальном экране, игра начинается, самолет начинает летать анимированным образом, и облака должны перемещаться справа налево, чтобы создать впечатление движения самолета в небе. Таймер запускается и отображает время движения самолета. Счетчик топлива начинает уменьшаться на одну точку в секунду. Счетчик топлива меняется сверху вниз. Когда игра начинается, 10 единиц топлива дают игроку 10 секунд летать.
2. Пользователь может использовать клавиши со стрелками для перемещения самолета. Левая стрелка перемещает самолет влево. Стрелка вправо перемещает самолет вправо. Стрелка вверх перемещает самолет вверх. Стрелка вниз перемещает самолет вниз. Полет невозможен, если самолет не виден на экране. Самолет не может покинуть игровое поле.
3. Во время полета самолет должен избегать птиц, которые представлены в небе. Если самолет сталкивается с птицей, игра заканчивается. Птицы должны быть представлены в случайном положении и анимированным образом, летая справа налево. Всегда должны быть возможность, чтобы самолет уклонился от птиц (например, нет сплошной стены птиц). Птицы в фоновом режиме должны двигаться с разной скоростью, большие птицы должны перемещаться быстрее, чем меньшие, создавая эффект параллакса.
4. Во время полета самолет должен собирать парашюты и звезды, падающие с неба. За каждый собранный значок парашюта счетчик топлива увеличивается до максимального значения (10 секунд). Каждая собранная звезда увеличивает счетчик звезды на 1 балл. Счетчик звезд начинается с 0.
5. Парашюты и звезды падают в анимированном виде в случайном порядке.
6. Во время полета пользователь может приостановить игру, нажав кнопку паузы, или нажав клавишу пробела. Когда игра приостановлена, все взаимодействия и звуки должны быть остановлены. Если пользователь снова нажимает кнопку паузы или снова нажимает клавишу пробела, игра продолжается с того момента, когда она была приостановлена.
7. Облака в фоновом режиме должны представить анимацию, чтобы дать ощущение движения.
8. Если счетчик топлива достигает нуля, игра заканчивается.
9. Когда игра закончена, анимация и счетчик таймера останавливается, открывается форма, где нужно заполнить имя пользователя. Пользователь заполняет поле и нажимает кнопку
«Продолжить». Кнопка будет отключена до тех пор, пока пользователь не заполнит это поле.
10. Имя пользователя, время полета и количество собранных звезд должны быть отправлены на сервер через AJAX запрос. Отправьте эту информацию на сервер и используйте эти переменные:
http: //ModuleA_XX/register.php 10,2. Method: post
name: name of the user
time: number (integer) time in seconds
stars: number (integer) of collected stars
11. Register.php будет регистрировать вашу информацию в базе данных и передача информации будет осуществляться в формате JSON с ранжированием пользователей. Пример структуры JSON представлен ниже:
[
{"id": "1", "name": "Player 1", "time": "20", "stars": "10"},
{"id": "2", "name": "Player 2", "time": "14", "stars": "8"}
]
12. Чтобы перезапустить игру необходимо нажат кнопку «Начать игру».
13. Рейтинг должен быть упорядочен по количеству собранных звезд и времени, в порядке убывания. Если у нескольких пользователей одинаковое количество собранных звезд и одно и то же время, они получают ту же позицию в рейтинге. Данные JSON, возвращаемые сервером, не упорядочены, ваша задача правильно передавать данные пользователю.
14. Чтобы увеличить игровое взаимодействие, необходимо использовать некоторые звуковые эффекты:
15. background.mp3: используется во время полета;
16. hit.mp3: играет, когда самолет поразил птицу (игра окончена);
17. star.mp3: играет, когда самолет получает звезду; 18.finish.mp3: играет, когда топливо закончилось (игра окончена).
19. Должна быть опция отключения/включения звуков игры. Если звук отключен, звуки не должны воспроизводиться. Если звук включен, все звуки должны воспроизводиться.
22. Ваша игра должна работать без ошибок JavaScript или сообщений, отображаемых в консоли браузера.
23. Сохраните свой код HTML/CSS и JavaScript, используйте правильные отступы и комментарии.
24. Игра должна корректно работать для обоих браузеров (Google Chrome и Mozilla Firefox).
