Проект: Использование Canvas для создания браузерных игр
С Canvas придется немного освоиться, так как скорее всего вы не знакомы с рендерингом объектов, но после этого перед вами раскроются поистине безграничные просторы. В этом проекте нам предстоит создать классическую игру -- Missile Command. Для того, чтобы понять ее суть, вы можете (и должны) поиграть в нее здесь.
Согласно игре, на вашей базе (в нижней части экрана) ограниченное количество ракет, с помощью которых вы сбиваете летящие сверху ракеты, чтобы они не упали на "землю". Вы запускаете свои ракеты, кликая на экран в том месте, где она должна взорваться. После клика, ракета медленно перемещается к указанной точке, и там взрывается. Каждый взрыв запускает цепную реакцию, взрывая любые ракеты в радиусе своего действия, а затем медленно исчезает.
Ваше задание
Создайте игру, используя холст.
Необходимо подумать о рендеринге каждой фигуры (например, взрыва ракеты), а также о том, как разместить все объекты в двухмерном пространстве на экране. Необходимо отслеживать расположение объектов при каждом обновлении экрана, и основываясь на геометрии, рассчитывать новое положение ракет на экране после каждого обновления.
Если алгоритм игры становится слишком сложным, или же скорость слишком велика, то вы можете заметить, что игра начинает прерываться и браузер не отвечает должным образом.
- Создайте репозиторий на Github - если возникнут затруднения, следуйте этим инструкциям.
- Создайте пустой документ HTML.
- Подумайте, как создать различные элементы в игре. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Лучше всего набросать все на бумаге перед тем, как вообще садиться за компьютер.
- Создайте холст и разместите несколько ракет на своей базе, чтобы потренироваться с рендерингом и позиционированием.
- Заставьте ракеты взлетать в заданном направлении, обновляйте экран с каждым их перемещением.
- Сделайте, чтобы ракеты взрывались, при этом взрыв должен запускать цепную реакцию, если рядом другие ракеты.
- Запустите падающие сверху ракеты. Играйте!
- Отправьте проект на Github.
Решения студентов
- Решение 1 | Посмотреть в браузере
- Решение 2 | Посмотреть в браузере
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему