Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 03.05.2021, 16:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Angelinasen,
Ответить с цитированием
  #12 (permalink)  
Старый 04.05.2021, 08:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

движение в границах поля
Angelinasen,
<!doctype html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html{
    height: 100%;
    }

    body.gradient{
    background-image:radial-gradient(red,yellow);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    }
    .image{
    --color: #FF0000;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(to right, var(--color), black);
    }
    .image:nth-child(2){
    --color: #008000;
    width: 10px;
    height: 10px;
    }
    .field {
    width: 300px;
    height: 300px;
    margin: 70px auto;
    box-sizing: border-box;
    background-color: #808080;
    }
    .image.freedom{
    --color: #00FFFF;
    }

    </style>
</head>

<body>
    <div class="field" >
    <div class="image" ></div>
    <div class="image" ></div>
    </div>
    <script>
        const pressedKeys = new Set();
        addEventListener("keydown", event => {
            pressedKeys.add(event.code);
        });
        addEventListener("keyup", event => {
            pressedKeys.delete(event.code);
        });
        let dt, lastT = performance.now();
        const image = document.querySelectorAll(".image");
        const box  = document.querySelector(".field");
        const userKeys = [
            [
                ["KeyW", -.1],
                ["KeyS", .1],
                ["KeyD", .1],
                ["KeyA", -.1]
            ],
            [
                ["ArrowUp", -.1],
                ["ArrowDown", .1],
                ["ArrowRight", .1],
                ["ArrowLeft", -.1]
            ]
        ]
        const users = userKeys.map((keys, i) => ({
            matrix : new DOMMatrix([1, 0, 0, 1, 100 + 100 * i, 100 + 100 * i]),
            user: image[i],
            keys
        }));
        const checkCollision = users => {
        const [{user : one}, {user : two}] = users;
        let {top : a, left : c, height : h, width : w} = one.getBoundingClientRect();
        let {top : b, left : d, height : hh, width : ww} = two.getBoundingClientRect();
        a -= b;
        c -= d;
        h -= hh;
        w -= ww;
        return a <= 0 ||  a >= -h || c < 0 || c  >=  -w
        }

        (function loop(t) {
            dt = t - lastT;
            lastT = t;
            users.forEach(({matrix, user, keys}) => {
                keys.forEach(([key, delta], i) => {
                    let vector = i < 2 ? [0, delta * dt] : [delta * dt, 0];
                    if (pressedKeys.has(key)) matrix.translateSelf(...vector);
                    user.style.transform = matrix;
                    const collision = checkCollision([{user}, {user : box}])
                    if(collision) {
                    vector = vector.map(a => a * -1);
                    matrix.translateSelf(...vector);
                    }
                })
            })
            requestAnimationFrame(loop);
        })(lastT);
    </script>
</body>

</html>
Ответить с цитированием
  #13 (permalink)  
Старый 07.05.2021, 21:52
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

спасибо большое за помощь! Если вопрос по jQuery, сюда же писать?
При клике на кнопку "профиль" (.profile-top-header) я вешаю на меню (.profile-top-header__menu) класс эктив и показываю его, при повторном клике или по клике на любое место страницы по идее класс эктив должен убираться и меню должно скрываться. Но при клике на кнопку не скрывается, только при клике на страницу(( но без второго скрипта (обработки события mouseup) кнопка работает.
как сделать чтобы меню сркрывалось по клике на кнопку и по клике на любое место страницы. (кроме самого меню конечно же)

$('.profile-top-header').click(function(event) {
  event.preventDefault();
  $('.profile-top-header__menu').toggleClass('active');
});

$(document).mouseup(function(e) {
  let container = $('.profile-top-header__menu.active'); 
  if (container.has(e.target).length === 0) {
      container.removeClass('active');
  }
Ответить с цитированием
  #14 (permalink)  
Старый 07.05.2021, 23:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Angelinasen
Если вопрос по jQuery, сюда же писать?
нет это уже к теме управления клавишами не относится, для это есть раздел https://javascript.ru/forum/jquery/
но можно и тут ...
$(function() {
    const menu = ('.profile-top-header__menu');
    $('.profile-top-header').click(function(event) {
        event.preventDefault();
        menu.toggleClass('active');
    });
    $(document).click(function(event) {
        if ($(event.target).closest('.profile-top-header__menu, .profile-top-header').length) return;
        menu.removeClass('active')
    });
});
Ответить с цитированием
  #15 (permalink)  
Старый 07.05.2021, 23:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Angelinasen
как сделать чтобы меню сркрывалось по клике на кнопку и по клике на любое место страницы. (кроме самого меню конечно же)
https://javascript.ru/forum/showthread.php?p=382814
Ответить с цитированием
  #16 (permalink)  
Старый 09.05.2021, 00:10
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

увпвкеоевлеаловр
ЧТо Вы тут делаете)) Вы по-моему все знаете))С такими знаниями можно все)))
Ответить с цитированием
  #17 (permalink)  
Старый 09.05.2021, 00:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Angelinasen,
живу я здесь)))
Ответить с цитированием
  #18 (permalink)  
Старый 09.05.2021, 01:00
Интересующийся
Отправить личное сообщение для Angelinasen Посмотреть профиль Найти все сообщения от Angelinasen
 
Регистрация: 22.04.2021
Сообщений: 20

jquery слайдер
заметно))) спасибо вам))))
Ответить с цитированием
  #19 (permalink)  
Старый 09.05.2021, 01:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Angelinasen
jquery слайдер
поищите примеры по форуму ... или конкретизируйте проблему.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? miha2020 Мобильный JavaScript 2 05.06.2022 09:02
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? miha2020 Элементы интерфейса 5 07.03.2021 10:22
Как сделать сделать смену картинки по щелчку мыши? PavelGR Javascript под браузер 0 09.08.2020 09:28
Как сделать вертикальное меню с анимацией? Wimko jQuery 3 28.06.2020 19:31
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32