Часы на языке "JS" имитирующие физику и гравитацию

  class FallingNumber {

  constructor(value, x, y, fontSize, radius) {

    this.value = value;

    this.x = x;

    this.y = y;

    this.radius = radius; // Установка радиуса через параметр

    this.velY = 0;

    this.velX = Math.random() * 2 - 2;

    this.gravity = 0.2;

    this.bounceFactor = 0.35;

    this.isDragging = false;

    this.fontSize = fontSize;

  }

       update() {

      if (!this.isDragging) {

        this.velY += this.gravity;

        this.y += this.velY;

        this.x += this.velX;

        // Отскок от нижней границы canvas

        if (this.y + this.radius > canvas.height) {

          this.y = canvas.height - this.radius;

          this.velY *= -this.bounceFactor;

        }

        // Отскок от боковых границ

        if (this.x - this.radius <= 0 || this.x + this.radius >= canvas.width) {

          this.velX *= -this.bounceFactor;

          this.x = this.x - this.radius <= 0 ? this.radius : canvas.width - this.radius;

        }

      }

    }

    draw(ctx) {

    // Рисуем круг

    ctx.beginPath();

    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

    ctx.fillStyle = "rgba(255, 255, 255, 0.75)";

    ctx.fill();

    // Рисуем текст с определенным размером шрифта

    ctx.font = `${this.fontSize}px Arial`; // Используем размер шрифта из свойства

    ctx.fillStyle = '#221831';

    ctx.textAlign = 'center';

    ctx.textBaseline = 'middle';

    ctx.fillText(this.value, this.x, this.y);

  }

    checkCollision(other) {

      let dx = other.x - this.x;

      let dy = other.y - this.y;

      let distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < this.radius + other.radius) {

        // Простая реакция на столкновение: обмен скоростями

        let tempVelX = this.velX;

        let tempVelY = this.velY;

        this.velX = other.velX;

        this.velY = other.velY;

        other.velX = tempVelX;

        other.velY = tempVelY;

        // Помещаем объекты вне столкновения

        let overlap = 0.5 * (distance - this.radius - other.radius);

        this.x -= overlap * (this.x - other.x) / distance;

        this.y -= overlap * (this.y - other.y) / distance;

        other.x += overlap * (this.x - other.x) / distance;

        other.y += overlap * (this.y - other.y) / distance;

      }

    }

  }

  const canvas = document.getElementById('fallingNumbersCanvas');

  const ctx = canvas.getContext('2d');

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  let hoursGenerated = false;

  let minutesGenerated = false;

  const numbers = [];

  let isMousePressed = false;

  let draggedNumber = null;

  let lastMinute = new Date().getMinutes();

  function generateNumber(type, value) {

    const x = Math.random() * (canvas.width - 50) + 25; // Изменяем, чтобы учитывать радиус

    const y = -25; // Начальное положение над canvas

    let fontSize;

    let radius;

    // Устанавливаем размер шрифта и радиус в зависимости от типа

    switch (type) {

      case 'h': // Для часов

        fontSize = 160;

        radius = 160;

        break;

      case 'm': // Для минут

        fontSize = 120;

        radius = 120;

        break;

      case 's': // Для секунд

        fontSize = 40;

        radius = 40;

        break;

      default:

        fontSize = 20;

        radius = 25;

    }

    // Создание FallingNumber без буквенных префиксов

    numbers.push(new FallingNumber(value, x, y, fontSize, radius));

  }

  function clearCanvas() {

    numbers.length = 0; // Очищаем массив чисел

    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем canvas

  }

  function updateTime() {

    const now = new Date();

    const minutes = now.getMinutes();

    const seconds = now.getSeconds().toString().padStart(2, '0');

    if (!hoursGenerated || (lastMinute !== minutes && seconds === '00')) {

      lastMinute = minutes;

      clearCanvas();

      const hours = now.getHours().toString().padStart(2, '0');

      const minutesStr = minutes.toString().padStart(2, '0');

      generateNumber('h', hours);

      generateNumber('m', minutesStr);

      hoursGenerated = true;

      minutesGenerated = true;

    } else if (lastMinute !== minutes) {

      lastMinute = minutes;

      const minutesStr = minutes.toString().padStart(2, '0');

      generateNumber('m', minutesStr);

      minutesGenerated = true;

    }

    generateNumber('s', seconds);

  }

  function updateCanvas() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Проверка столкновений перед обновлением и отрисовкой

    for (let i = 0; i < numbers.length; i++) {

      for (let j = i + 1; j < numbers.length; j++) {

        numbers[i].checkCollision(numbers[j]);

      }

    }

    numbers.forEach((number, index) => {

      number.update();

      number.draw(ctx);

      // Удаление чисел, вышедших за пределы экрана

      if (number.y - number.radius > canvas.height) {

        numbers.splice(index, 1);

      }

    });

    requestAnimationFrame(updateCanvas);

  }

  canvas.addEventListener('mousedown', (e) => {

    isMousePressed = true;

    numbers.forEach(number => {

      let dx = e.clientX - number.x;

      let dy = e.clientY - number.y;

      if (dx * dx + dy * dy <= number.radius * number.radius) {

        number.isDragging = true;

        draggedNumber = number;

      }

    });

  });

  canvas.addEventListener('mousemove', (e) => {

    if (isMousePressed && draggedNumber) {

      draggedNumber.x = e.clientX;

      draggedNumber.y = e.clientY;

    }

  });

  canvas.addEventListener('mouseup', () => {

    isMousePressed = false;

    if (draggedNumber) {

      draggedNumber.isDragging = false;

      draggedNumber = null;

    }

  });

  setInterval(updateTime, 1000);

  updateCanvas();