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

движение в границах поля
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>
Ответить с цитированием