Курс Canvas у Html та JavaScript - ZIP

Назва - Курс Canvas з Html і JavaScript

Рівень - основи

Тривалість - 2 години

Що ви дізнаєтеся?

Canvas було введено в HTML як елемент, завдяки якому ви можете малювати будь-які фігури за допомогою JavaScript. Однак це ще не все, що він може, адже він також дозволяє редагувати зображення, створювати анімацію, рухливі ігри та інфографіку. Цей елемент був представлений у версії HTML5 і до того часу він активно використовується в додатках. Завдяки цьому додаток або гра можуть працювати без необхідності встановлення додаткових плагінів у браузері, наприклад, застарілого Flash Player. Він підтримується більшістю сучасних браузерів, таких як Chrome, Firefox, Safari, Opera, IE. Під час курсу ви побачите, на що здатний Canvas і як його можна використовувати для створення простої браузерної гри.

• Ви дізнаєтесь про цікаву функцію Canvas

• Ви призначатимете окремі функції для клавіш

• Ви дізнаєтесь про важливі змінні, методи та параметри

• Ви навчитеся створювати події
• Ви будете анімувати статичні елементи

Перша гра — змійка

Canvas — одна з найкращих функцій HTML5, яка дозволяє створювати чудові програми. Для цілей курсу ми будемо використовувати приклад гри, яку, напевно, знають усі. Я впевнений, що більшість із вас грали в популярну гру «Змійка» на старих мобільних телефонах. Спочатку на екрані з'являється маленька змія. Гравці можуть змінювати напрямок змії за допомогою клавіш зі стрілками для переміщення вгору, вниз, вліво і вправо. Довжина змії збільшується після з'їдання квадрата, який випадковим чином з'являється на дошці. Гра є чудовим прикладом для вивчення найважливіших функцій Canvas.

Стилізація

Перш за все, ви створите основи гри та початковий екран, який запускає гру після натискання кнопки клавіатури. Потім ви стилізуєте гру, тобто додасте їй відповідний вигляд. Ви дізнаєтеся, що таке змінна ctx, навчитеся використовувати різні методи та параметри, які дозволять вам створювати будь-які форми, які вам подобаються.

Функції гри

Наступним кроком є ​​впровадження необхідних функцій у гру та створення дошки. Вивчення концепції змінних і обробки подій допоможе впоратися з цим завданням. Це дозволить вашій змії рухатися та рости, коли ви збираєте квадрати. Ви також визначите, як ваша змія повинна поводитися, коли дійде до з’їдання власного хвоста.

Анімація та розширення гри

На наступних кроках, ви будете анімувати статичний вміст за допомогою анімації елементів. Знайомство з функцією setInterval допоможе вам у цьому завданні. Ви також додасте можливість вибору рівнів складності, де ви зможете призначити окремі кнопки на клавіатурі вибраному рівню.

1. Вступ

2. Стилі та текст

3. Дошка

4. Анімація та елементи керування

5. Додаткові можливості гри

Як вибрати версію курсу:

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

1. в електронному вигляді - як посилання для завантаження упакованого архіву. Після покупки ви отримаєте посилання на електронну пошту. У цьому випадку шукайте аукціон, позначений як цифрова версія.

2. box on DVD - замість посилання для завантаження ви отримаєте DVD за вказаною адресою. У цьому випадку шукайте аукціон, позначений як DVD.

Чи підійде курс до програми, яку я маю?

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

Чи отримаю я програму разом із курсом?

Курси - це відеоролики, що демонструють роботу в заданій програмі. Жоден із курсів не супроводжується програмою, яку ви повинні придбати самостійно.