Часы на языке "JS" имитирующие физику и гравитацию
Реализовал давнюю идею написать часы с динамическими подвижными элементами. Получилось, даже что-то метафорическое. Смотришь на падающее время, жалеешь о том, что потерянное время не вернуть. О том как быстро идет время.
Функционал у часов довольно простой. Шары в произвольном порядке падают из верхней границы холста и скапливаются в течении одной минуты в нижней части холста. Самый большой шар показывает текущий час. Средний шар - минуты. Самые маленькие шары отображают секунды. Холст очищается один раз в начале каждой минуты. Шары, показывающие "часы и минуты" падают один раз в начале каждой минуты. Шары с "секундами" падают каждую секунду наполняя холст. Очистка холста происходит в конце каждой минуты - это позволяет избежать переполнение холста, а также получить актуальную информацию о текущем времени.
Так же добавлена возможность взаимодействовать с шарами на экране. При нажатии левой кнопки мыши можно перетаскивать шары. Гравитация позволяет подбросить шар, а так же остановить/слегка замедлить падение одного шара другим шаром. Имитация эластичности позволяет слегка деформировать шар, а физика столкновений отвечает за отскоки шаров друг от друга. К сожалению, данная функция пока работает только с мышью. Тачскрином телефона взаимодействовать с объектами не получится. При этом код также хорошо работает в мобильных браузерах.
Ниже представлены некоторые переменные, которые можно изменять для достижения наилучшей визуализации физики, а также изменять цвета и размеры элементов:
this.velY = 0;
Начальная вертикальная скорость шара.
this.velX = Math.random() * 2 - 2;
Начальная горизонтальная скорость шара.
this.gravity = 0.2;
Влияние гравитации на шары.
this.bounceFactor = 0.35;
Сила отскока шара при столкновении с другим шаром
ctx.fillStyle
Цвет заливки шара
ctx.font
Используем размер шрифта из свойства
ctx.fillStyle
(Переменная после ctx.font) меняет цвет шрифта
fontSize = 160;
Размер шрифта внутри шара
radius = 160;
Радиус шара.
ctx.textAlign
Центрирует шрифт внутри шара.
реклама
Это моя первая работа с JS. Я не являюсь программистом и не работаю в IT - это мое плавное изучение языка, хобби. Есть недочеты в коде, которые я собираюсь устранить. А именно - авто-масштабирование холста. При изменении размеров окна браузера, на текущем этапе приходится обновлять страницу, чтобы скрипт перерисовал холст под новые размеры окна. Пока что я не совсем понимаю, как это сделать, не поломав весь скрипт, возможно его заново придется переписать. Пока что, это концепция идеи и черновое исполнение. Под спойлером оставляю код. Спасибо за внимание!
Код
class FallingNumber {
constructor(value, x, y, fontSize, radius) {
реклама
this.value = value;
this.x = x;
this.y = y;
this.radius = radius; // Установка радиуса через параметр