Бегающий смайлик по экрану, JS

Бегающий смайлик по экрану, скрипт показал или создали совместно с ИИ.

Возможно кому-то пригодися, настроить можно под себя, код с комментариями. Например для сайта с анекдотами.

 

Вот код скрипта:

// Получаем элемент body для добавления анимации
const body = document.querySelector('body');

// Создаем элемент смайлика
const smiley = document.createElement('div');
smiley.style.position = 'absolute';
smiley.style.width = '50px';
smiley.style.height = '50px';
smiley.style.borderRadius = '50%';
smiley.innerHTML = ''; // Смеющееся лицо
smiley.style.fontSize = '90px';
smiley.style.textAlign = 'center';
body.appendChild(smiley);

// Переменная для отслеживания направления вращения
let rotateDirection = 1;

// Функция для плавного перемещения и вращения смайлика
function moveAndRotateSmiley() {
  const x = Math.random() * (window.innerWidth - 50);
  const y = Math.random() * (window.innerHeight - 50);
  smiley.style.transition = 'transform 0.5s, left 0.5s, top 0.5s'; // Плавная анимация
  smiley.style.left = `${x}px`;
  smiley.style.top = `${y}px`;

  // Вращаем смайлик на 45 градусов влево или вправо
  smiley.style.transform = `rotate(${45 * rotateDirection}deg)`;
  // Меняем направление вращения
  rotateDirection *= -1;
}

// Запускаем функцию moveAndRotateSmiley каждые 500 миллисекунд для более плавного движения
setInterval(moveAndRotateSmiley, 500);