JavaScript. Проект IV «Пчела»

Создание анимации с помощью canvas в JavaScript похоже на покадровую анимацию — вы рисуете картинку, делаете паузу, стираете картинку и затем перерисовываете её в новом месте. Казалось бы, очень много действий, но JS обновляет картинку очень быстро, так что получается плавная анимация.

Плавно двигающийся квадрат.

По сути, здесь задано две функции, они идентичны, но для второй выбрана другая позиция старта. Это сделано для того, чтобы показать пример создания нескольких объектов на одном листе.

Два черных квадрата двигаются вправо до достижения позиции в 200 пикселей они вернуться в позицию 0 и начнут свое движение заново.

Пояснения указаны в файле выше.

Изменения размера квадрата.

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

Случайная пчела.

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

Рисуем пчелу

Результат можно посмотреть canvas4

Задание: переделать код таким образом, чтобы вместо пчелы была любая другая фигура или набор фигур (снеговик, автомобиль, домик, насекомое, зверек и т.п.).

Отскакивающий мяч.

Пример работы скрипта canvas2

Задание:

  1. Вместо одного мячика создайте пустой массив и в цикле for добавьте в него 10 мячей. Затем измените функцию setInterval, использовав цикл for для перемещений и проверки столкновений каждого мяча.
  2. Измените предыдущее задание так, чтобы все мячики были цветными. Задайте в конструкторе Ball новое свойство color,используйте его для задания цвета в методе draw.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Анти-спам: выполните заданиеWordPress CAPTCHA