Курс Canvas по HTML и JavaScript - DVD

Название – Курс Canvas по HTML и JavaScript

Уровень – основы

Продолжительность — 2 часа

Чему вы научитесь?

Canvas был представлен в HTML как элемент, благодаря которому вы можете рисовать любые фигуры с помощью JavaScript. Однако это еще не все, на что он способен, поскольку он также позволяет редактировать изображения, создавать анимацию, движущиеся игры и инфографику. Этот элемент был представлен в версии HTML5 и до тех пор активно используется в приложениях. Благодаря этому приложение или игра могут запускаться без необходимости установки в браузер дополнительных плагинов, например устаревшего Flash Player. Он поддерживается большинством современных браузеров, таких как Chrome, Firefox, Safari, Opera, IE. В курсе вы увидите, на что способен Canvas и как с его помощью можно создать простую браузерную игру.

• Вы узнаете интересную функцию Canvas

• Вы назначите отдельные функции клавишам

• Вы изучите важные переменные, методы и параметры

• Вы научитесь создавать события
• Вы будете анимировать статические элементы

Первая игра — змейка

Canvas — одна из лучших возможностей HTML5, позволяющая создавать отличные приложения. Для целей курса мы будем использовать пример игры, которую, наверное, знают все. Я уверен, что большинство из вас играли в популярную игру «Змейка» на старых мобильных телефонах. Вначале на экране появляется маленькая змея. Игроки могут менять направление змеи, используя клавиши со стрелками для перемещения вверх, вниз, влево и вправо. Длина змеи увеличивается после поедания квадрата, случайно появляющегося на доске. Игра является прекрасным примером для изучения наиболее важных функций холста.

Стилизация

Прежде всего, вы создадите основы игры и начальный экран, на котором игра запустится после нажатия кнопки клавиатуры. Затем вы стилизуете игру, т. е. придаёте ей правильный вид. Вы узнаете, что такое переменная ctx, научитесь использовать различные методы и параметры, которые позволят вам создать любую понравившуюся вам фигуру.

Функции игры

Следующим шагом будет внедрение необходимых функций в игру и создание доски. Изучение концепции переменных и обработки событий поможет в выполнении этой задачи. Это позволит вашей змее двигаться и расти по мере того, как вы будете собирать квадраты. Вы также определите, как ваша змея должна вести себя, когда дело доходит до поедания собственного хвоста.

Анимация и расширение игры

На следующих шагах вы будете анимировать статический контент, используя анимацию элементов. Знакомство с функцией setInterval поможет вам в этой задаче. Также вы добавите возможность выбора уровней сложности, при этом вы сможете назначать отдельные кнопки на клавиатуре выбранному уровню.

Как выбрать версию курса:

Видеокурс доступен в двух формах:

1. в электронном виде - в виде ссылки для скачивания запакованного архива. После покупки вы получите ссылку на электронную почту. В этом случае ищите аукцион, помеченный как цифровая версия.

2. коробка на DVD — вместо ссылки для скачивания вы получите DVD по указанному адресу. В этом случае ищите аукцион с пометкой DVD.

Подойдет ли курс к моей программе?

Курсы созданы с использованием разных версий программы. Однако в большинстве случаев им подходит любая версия. Курсы созданы таким образом, чтобы быть совместимыми и нейтральными для старых версий программного обеспечения. То есть если у вас, например, Photoshop 2019 года и курс создан на версии Photoshop 2020 года, то он подойдет на 100%.

Получу ли я программу вместе с курсом?

Курсы представляют собой видеоролики, демонстрирующие работу в заданной программе. Ни один из курсов не сопровождается программой, которую необходимо приобрести самостоятельно.