<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.

Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создание интерактивного информационного окна на веб-странице с помощью JavaScript

Создание интерактивного информационного окна на веб-странице с помощью JavaScript

JavaScript позволяет делать веб-страницы более интерактивными и информативными. Одним из способов улучшить взаимодействие пользователя с сайтом является создание информационных окон, которые отображают дополнительную информацию при наведении курсора на элемент. Давайте рассмотрим простой пример кода, который позволяет создать подобное информационное окно на веб-странице.

Описание кода:


function showTagOnHover(event) {
  const hoveredElement = event.target;
  const tagName = hoveredElement.tagName.toLowerCase();

  // Создание информационного окна
  const infoBox = document.createElement('div');
  infoBox.textContent = `Наведен элемент с тегом: ${tagName}`;
  infoBox.style.position = 'fixed';
  infoBox.style.padding = '10px';
  infoBox.style.backgroundColor = 'white';
  infoBox.style.border = '1px solid black';
  infoBox.style.zIndex = '9999'; // Помещаем окно поверх остальных элементов

  // Добавление окна на страницу
  document.body.appendChild(infoBox);

  // Функция для перемещения окна
  function moveInfoBox(x, y) {
    infoBox.style.top = `${y + 10}px`;
    infoBox.style.left = `${x + 10}px`;
  }

  // Функция для проверки наложения элементов
  function checkOverlap(x, y) {
    const elementBelowCursor = document.elementFromPoint(x, y);
    if (elementBelowCursor && elementBelowCursor !== infoBox) {
      return true; // Есть наложение
    }
    return false; // Нет наложения
  }

  // Перемещение окна при движении курсора
  function onMouseMove(event) {
    const x = event.clientX;
    const y = event.clientY;

    if (checkOverlap(x, y)) {
      const newTop = y - infoBox.clientHeight - 20;
      const newLeft = x - infoBox.clientWidth - 20;
      moveInfoBox(newLeft < 0 ? 10 : newLeft, newTop < 0 ? 10 : newTop);
    } else {
      moveInfoBox(x, y);
    }
  }

  document.addEventListener('mousemove', onMouseMove);

  // Удаление окна при уходе курсора
  hoveredElement.addEventListener('mouseout', () => {
    infoBox.remove();
    document.removeEventListener('mousemove', onMouseMove);
  });
}

// Добавление обработчика события для отслеживания наведения курсора
document.addEventListener('mouseover', showTagOnHover);

Запуск в консоли браузера:

  1. Откройте консоль браузера: Нажмите F12 или щелкните правой кнопкой мыши на странице и выберите "Инспектировать" (Inspect), затем перейдите на вкладку "Console" (Консоль).

  2. Вставьте код: Вставьте код JavaScript в консоль и нажмите Enter.

  3. Наведите на элементы: Теперь при наведении курсора на элементы страницы появится информационное окно с тегом элемента.

Обратите внимание, что этот код реагирует на событие mouseover, поэтому для его тестирования необходимо наводить курсор мыши на элементы страницы.

Заключение:

Этот простой код на JavaScript демонстрирует создание интерактивного информационного окна, которое появляется при наведении курсора на элемент веб-страницы. Используйте его в своих проектах для улучшения пользовательского опыта и предоставления дополнительной информации о содержимом страницы.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.