<MyRusakov.ru />

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

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

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

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

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

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

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

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

Использование getBoundingClientRect в JavaScript

Использование getBoundingClientRect в JavaScript

В JavaScript getBoundingClientRect — это метод, предоставляемый DOM API, который позволяет получить размеры элемента и его позицию относительно области просмотра. Этот метод возвращает объект DOMRect, содержащий информацию о координатах и размерах элемента. В этой статье мы рассмотрим, как использовать getBoundingClientRect, его основные свойства и примеры применения.

Основные Свойства

Метод getBoundingClientRect возвращает объект DOMRect, который содержит следующие свойства:

  • top: Расстояние от верхней границы элемента до верхней границы области просмотра.
  • right: Расстояние от правой границы элемента до левой границы области просмотра.
  • bottom: Расстояние от нижней границы элемента до верхней границы области просмотра.
  • left: Расстояние от левой границы элемента до левой границы области просмотра.
  • width: Ширина элемента.
  • height: Высота элемента.
  • x: Горизонтальная координата левой границы элемента относительно области просмотра.
  • y: Вертикальная координата верхней границы элемента относительно области просмотра.

Примеры Применения

Пример 1: Получение Координат Элемента

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GetBoundingClientRect Example</title>
</head>
<body>
    <div id="myElement" style="width: 200px; height: 100px; background-color: lightblue;"></div>
    <script>
        const element = document.getElementById('myElement');
        const rect = element.getBoundingClientRect();

        console.log('Top:', rect.top);
        console.log('Right:', rect.right);
        console.log('Bottom:', rect.bottom);
        console.log('Left:', rect.left);
        console.log('Width:', rect.width);
        console.log('Height:', rect.height);
        console.log('X:', rect.x);
        console.log('Y:', rect.y);
    </script>
</body>
</html>

Пример 2: Проверка Видимости Элемента

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Element Visibility</title>
</head>
<body>
    <div id="myElement" style="width: 200px; height: 100px; background-color: lightblue;"></div>
    <script>
        function isElementInViewport(element) {
            const rect = element.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

        const element = document.getElementById('myElement');
        console.log('Element is in viewport:', isElementInViewport(element));
    </script>
</body>
</html>

Пример 3: Анимация Элемента

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animate Element</title>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="myElement"></div>
    <script>
        const element = document.getElementById('myElement');
        let position = 0;

        function animate() {
            position += 2;
            element.style.left = position + 'px';
            const rect = element.getBoundingClientRect();
            if (rect.right < window.innerWidth) {
                requestAnimationFrame(animate);
            }
        }

        animate();
    </script>
</body>
</html>

getBoundingClientRect — это мощный инструмент для работы с элементами DOM, который позволяет легко получать их размеры и позицию. Этот метод особенно полезен для создания анимаций, проверки видимости элементов и других задач, связанных с позиционированием и размерами элементов на веб-странице.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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